CSS 레이아웃
- 현재는 flex, Grid 를 혼용해서 쓰고 있으며 Float은 거의 사용되지 않음
*Float은 반응형 웹에 적합하지 않아 스마트폰 사용률이 높은 오늘 날의 기술에 적합하지 않기 때문
[그래도 배워야 한다!]
*Float의 사용 코드를 읽을 수 있어야 함(아직까지도 일부 웹사이트는 Float이 적용되어 있음)
Float, Clear
- float
div같이 한 줄을 차지하는 Block요소의 빈 공간에 강제적으로 레이아웃을 배치시킴
정렬하고자 하는 해당 박스의 속성값에 float을 적용
(예시)
↑ 파란색
div박스 옆에 빈 공간이 있지만 Block 속성으로 인해 Text 박스는 그 아래에 위치하게 됨
↑ 해당 파란색
div에float:left;속성을 주면 박스가 왼쪽 끝으로 붙고, 나머지 빈 공간에 text 박스가 강제적으로 들어오게 됨
tip!
(float된 요소는 block형태로 변하게 되는데 이때 inline처럼 자신만의 영역을 가지고 있는 block 형태가 됨. 즉,display:inline-block;을 선언한 것과 동일함
-문제는 파란박스에만 속성값을 주었으나 text박스도 같이 끌려 올라왔다는 것
(float 속성을 적용하면 그 이후의 요소들도 속성을 전달받아 생기는 문제)
↑ [원인!]
[자식에게 float 속성을 적용하면 적용된 요소는 현재의 레이아웃을 벗어나 그보다 위쪽으로 부유(위로 뜸)하게 됨.
이 경우 부모요소는 아래쪽에 있으나 자식은 위로 뜨면서 독립적인 존재가 되기에 부모는 품고 있는 요소를 감지하지 못하게 되고 결국 height 값 또한 감지하지 못해서 부모 요소가 사라지게 되는 것]
+a)
- float 속성은 위로 뜨더라도(부유하더라도) inline 블록은 인지하기 때문에 위처럼 텍스트(inline)가 박스 옆에 걸쳐있게 됨
- 만약 위 요소가 (block) 이라면 float은 이를 인지하지 못하기에 요소끼리 겹쳐보이게 됨
↑ 이 경우 text박스에
clear:left;속성을 넣어서 잘못 올라간 박스를 재위치시킬 수 있음
[이는 clear 속성으로 text박스에 파란색 div박스의 height값 만큼 margin을 주어서 띄워둔 것임]
-
Clear
-float 속성 적용으로 영향을 받아 같이 부유하게 되는 다른 요소들에게 줄 수 있는 속성
-float으로 인해 강제적으로 끌려간 다른 요소들의 float을 해제 시켜줄 수 있음clear:left=>float:left로 영향 받은 요소들 위치 해제
clear:right=>float:right로 영향 받은 요소들 위치 해제
clear:both=> 모든 영역의 요소 위치 해제
-
Clear:both 활용
-보통Clear:both를 업무에 많이 활용함
-그러나 float 속성으로 끌려간 모든 부분에clear:both를 속성값으로 하나하나 주는 것은 비효율적
-따라서 float 속성이 들어간 태그들의 제일 아래쪽에 형제격 태그로div class="clearfix"만들고,clearfix태그의 속성에clear:both를 넣는 방식을 주로 사용(BUT! => 의미없는 태그를 만들기에 HTML 구조상 비효율적)
↓↓
-
부모요소에 가상 클래스 선택자 after 추가
-float 속성 적용된 요소들의 부모의 클래스로 clearfix 추가, 이를 이용해clearfix::after추가
-after 가상클래스 속성에display:block,clear:both추가
-
위의 형제격 태그를 만드는 방식과 유사하지만 after 가상 선택자로 html 구조에 변화가 없어 효율적임.
-
display:block으로 float이 가상요소(after)를 인지 못하기에 기존의 float된 요소에 겹쳐 float정렬은 유지하면서도 이후의 블록은 가상요소(after) 블럭에 막혀 위로 올라가지 않고 자연스레 그 아래쪽에 위치하게 되어 레이아웃이 유지됨
