https://codepen.io/wookyunglee/pen/PodGgeG
호버링
…
codepen.io
호버링
– 플렉스 전에 모든 레이아웃을 float로 작성
-(단점): 수직 중앙 정렬이 매우 어렵다.
– (장점) : 옛날부터 많이 사용되어 사용률이 높다.
다양한 예가 있습니다.
-수영선수: 없음;
b기본값
– 수영 선수: 왼쪽;
– 마우스 오른쪽;
(특성)
미뤄야 할 그 날로 플로트 사용
– float가 적용된 태그에서 clear로 자르지 않는 한 float의 형제가 영향을 받습니다.
– 영향을 받은 형제는 표시 기능을 되찾기 위해 clear 속성을 사용할 수 있습니다.
(디스플레이의 특징)
float와 display는 공존할 수 없습니다(float:none; 제외).
– float 태그는 float가 적용된 태그의 상위 요소로 래핑할 수 없습니다.
– 부모가 float 적용 태그에 float 태그를 감싸기 위해서는 마지막 자식 표현식이 display:bldck 이고 clear 속성이 적용되어야 합니다.
지우기: 왼쪽
– 끝내는 수영선수가 왼쪽으로 끝나는 경우
지우기: 오른쪽
– 상단에서 끝나는 플로트가 오른쪽으로 끝나는 경우
둘 다 삭제
– 끝낸 수영선수가 왼쪽이든 오른쪽이든 수영선수로 끝나는 경우
https://codepen.io/wookyunglee/pen/LYJRvoY
리저보이
…
codepen.io
구부러
– 수영선수의 단점을 보완하기 위해
회로망
–
:: 전, 후
– 가상 요소라고 함
– 가상 요소를 사용하려면 내용이 ” “여야 합니다. 존재하는 코드.
-가상 요소는 적용된 태그의 자식 역할을 합니다.
-가상 요소의 경우 display 속성 값이 인라인입니다.
https://codepen.io/wookyunglee/pen/mdGrgKV
:: 전, 후
…
codepen.io
https://codepen.io/wookyunglee/pen/yLxarWq
yLxarWq
…
codepen.io
https://codepen.io/wookyunglee/pen/XWPjQLG?editors=1100
float-::이후
…
codepen.io
-position:absolute를 적용하면 너비가 최소화됩니다.
– section>div에 width:100px가 적용되어 있기 때문에 폭이 제한됨
line-block과 마찬가지로 -float는 상위 너비에 충분한 공간이 없으면 위로 올라갈 수 없습니다.
https://codepen.io/wookyunglee/pen/mdGrYJR
mdGrYJR
…
codepen.io
https://codepen.io/wookyunglee/pen/VwGKOLa
중심 정렬
…
codepen.io
2. 메뉴
https://codepen.io/wookyunglee/pen/bGxwyVa
나비 예시
…
codepen.io
– ul의 상하 패딩 시 ul 패딩 중간에 li가 걸려서 li:hover>ul 코드 사용 시 중간 잘림 현상이 발생합니다.
를 볼 때 주의하십시오.
(솔루션): 패딩을 li에 적용하거나 텍스트의 줄 높이를 조정합니다.
https://codepen.io/wookyunglee/pen/vYzXwZx
탐색 예시 – 해결됨
…
codepen.io
https://codepen.io/wookyunglee/pen/mdGrYqM
2. 메뉴
…
codepen.io