저번에 float에 대해 공부한 적이 있습니다. 이번에는 float의 특징에 대해 더 자세하게 다루겠습니다.
float은 떠오르다, 떠다니다라고 번역할 수 있습니다. float은 요소를 '띄우는' 개념입니다. 특징은 크게 3가지입니다.
1. float된 요소는 자신의 부모 요소의 content 영역 내에서 배치됩니다.
부모 안에 있는 모든 자식이 float되었을 경우, 부모의 높이는 0이 됩니다.
2. float 적용 시 margin 상쇄 규칙을 해결할 수 있습니다.
3. inline 요소에 float 적용시 display: block으로 변경됩니다.
모든 자식이 float될 시 부모의 높이는 0이 됩니다.
float 속성을 부여하면 그 요소는 부모 요소의 content에 없는 것처럼 배치됩니다. 배치되는 영역은 부모 content 영역 내에 배치되지만, 주변 형제 요소들은 float된 요소를 없는 요소로 취급합니다.
예제를 통해 알아보겠습니다.
부모(.wrap)에는 높이 값을 설정하지 않았습니다. 자식 요소들에는 각각 width와 height 값을 200px씩 주었습니다.
따라서 부모의 높이는 200 * 3, 600px이 됩니다. 하지만 이때 분홍색 박스에게 float 값을 부여하면,
부모의 높이는 노란색, 파란색 박스의 합인 400px이 되었습니다. 이는 부모가 분홍색 박스를 없는 요소로 취급하기 때문에 발생합니다. 노란색 박스는 분홍색 박스를 없는 요소로 취급하여 분홍색 박스 밑에 배치된 상태입니다. 즉, 노란색 박스 위로 분홍색 박스가 부유하는 상태입니다. 파란색 박스는 노란색 박스 하단에 배치된 상태입니다. float: left;를 적용했을 때, 분홍색 박스는 자신이 이동할 수 있는 공간(즉, 부모 요소의 content 영역이자 이전 형제 요소들이 배치된 영역을 제외한 나머지 영역) 내 가장 왼쪽으로 이동합니다. 여기서 만약 모든 자식 박스에게 float을 부여한다면,
이렇게 부모의 높이가 0이 되어버리는 것을 알 수 있습니다. 부모가 자식 요소의 높이를 인식하지 못하기 때문에 0이 됩니다.
이를 해결하는 방법은 총 4가지가 있습니다.
1) 부모에 높이 적용
2) 부모에도 float 적용
3) 부모에 overflow: hidden; 적용
4) .clearfix (::after) 적용 -- 추천!
기본 스타일은 위의 예제와 같습니다.
기본 CSS
1) 부모에 높이 적용
부모에 높이를 적용한다면 제일 빠르게 해결되지만, (사실 부모의 높이값이 없거나 별다른 속성이 없기 때문에 발생하는 문제이기 때문에) 부모가 자식 요소에 따라 높이가 가변적인 경우 등 높이를 고정 값으로 설정하기 쉽지 않습니다.
2) 부모에도 float 적용
부모 요소에도 같은 float을 적용한다면 자식이 부모를 넘지 않도록 부모 요소의 높이가 맞춰집니다. 즉, 부모 요소가 자식 요소를 감쌀 수 있게 됩니다. 하지만 이 방식으로는 사진처럼 부모 요소가 float되면서 float의 특징인 inline-block 특성을 가지게 됩니다. 따라서 상황에 맞게 사용하는 것이 좋습니다.
3) overflow: hidden 적용
이 방법에 대해서는 이전 float 글에 대해 다뤘기에 넘어가겠습니다.
[CSS] float, clear / float과 overflow: hidden
CSS 포지셔닝은 박스 모델을 배치하는 것을 의미합니다. CSS에서는 float을 이용해 정렬을 할 수 있습니다. float은 사전적 의미로 '떠오르다', '떠다니다'입니다. 웹 페이지에서는 float을 왼쪽이나 오
hyun0907.tistory.com
4) .clearfix::after 적용
.clearfix::after{
content: "";
display: block;
clear: both;
}
::after이라는 가상 요소를 사용하는 방법으로, 가장 권장되는 방법입니다. 가상 요소는 가상의 요소를 만들어 적용한다는 뜻입니다. 부모 요소 마지막에 ::after (가상 요소를 만들어) content: ' ' (내용이 없는) display: block(block 형식의 상자를 만들고) float 값을 취소하는 원리입니다.
위의 예문에서 '.clearfix'는 클래스 명이며 이 코드를 CSS에 작성한다면 clearfix라는 클래스 이름을 가진 모든 요소에 적용이 되므로 하나 하나 코드를 입력하지 않아도 class 값에 clearfix를 추가하는 것만으로도 해결할 수 있다는 장점이 있습니다.
float 적용 시 margin 중첩 문제 해결
마진 상쇄 규칙에 대해 다룰 때 해결 법으로 float을 언급한 적이 있습니다.
CSS 박스 문제점: margin 중첩/padding, border 만큼 크기 커짐(border-box)
CSS에서 박스(block 요소)를 사용하게 되면 크게 3가지 정도의 문제가 생깁니다. 그 문제와 해결법을 알아보겠습니다. 1. 박스가 여러 개일 때, margin(바깥 여백)이 박스들 모두 적용된 상태라면, 그
hyun0907.tistory.com
inline 요소에 적용 시 display: block으로 수정
float이 적용된 경우 그 요소는 종류에 상관 없이 block box로 변경됩니다. 따라서 inline 요소는 float이 될 경우 block 요소가 되어 width, height, margin, padding 속성을 지정할 수 있게 됩니다. 대신 자신의 영역을 가지는 inline-block처럼 랜더링됩니다. 가로 너비를 부모의 가로 너비 전체를 사용하지 않고, 남은 가로 너비 또한 margin 값으로 채우지 않습니다.
b1에는 float을 적용하지 않고 b2에만 float:left;를 적용해보았습니다.
b2인 하단 박스를 보게 되면 inline 요소인 span 태그가 inline-block 요소의 특징을 갖게 된 것을 알 수 있습니다.
'HTML, CSS' 카테고리의 다른 글
| [HTML] form 태그 1 - <label>, <fieldset>, <legend> 태그 (0) | 2024.02.27 |
|---|---|
| [HTML] Semantic Tag(시멘틱 태그) (1) | 2024.02.14 |
| [CSS] float, clear / float과 overflow: hidden (1) | 2024.02.09 |
| [CSS] 다양한 선택자의 종류 (0) | 2024.02.08 |
| [CSS] @charset "utf-8"; (1) | 2024.02.07 |
