웹 페이지를 디자인하다 보면, 요소들을 가로로 나란히 배치하거나 텍스트를 이미지 주위로 감싸는 등의 작업이 필요할 때가 있습니다. 이럴 때 CSS에서 제공하는 float 속성을 사용하면 편리합니다.
Float 속성 이해하기
float 속성은 원래 이미지와 텍스트를 함께 배치하기 위해 만들어졌습니다. float을 적용한 요소는 페이지 흐름에서 벗어나 먼저 지정된 방향(left, right)으로 이동하고, 그 주위에 있는 인라인 요소들이 그 요소를 감싸도록 배치됩니다.
Float 사용법
CSS에서 float 속성을 사용하는 방법은 아래와 같습니다:
img {
float: left;
}위 코드는 이미지가 왼쪽으로 부동하도록 설정되어 있으며, 오른쪽에 있는 텍스트가 이미지를 감싸게 됩니다.
Clearing Floats
float을 사용할 때 종종 발생하는 문제 중 하나는 부모 요소가 자식 요소의 높이를 인식하지 못하는 것입니다. 이 문제를 해결하기 위해 'clearing floats'라는 기법이 필요합니다.
css
.container::after {
content: "";
display: table;
clear: both;
}
Float와 Flexbox/Grid 비교
현재 CSS에는 Flexbox와 Grid 같은 좀 더 진보된 레이아웃 도구들이 존재합니다. 이러한 도구들은 복잡한 레이아웃 구성에 있어서 보다 많은 제어력과 유연성을 제공하지만, 단순한 작업에 대해서는 여전히 float의 활용도가 큽니다.
실습
결론
무언가를 좌우로 분리하거나 문자열을 다른 요소 주변으로 감싸야 할 경우 등, 일반적인 웹 디자인 시나리오에서 float 속성은 매우 유용합니다. 하지만 복잡한 레이아웃 구조를 만들기 위해서는 Flexbox나 Grid 같은 최신 CSS 레이아웃 도구를 사용하는 것이 좋습니다.
위 글은 float의 기본적인 개념과 사용법에 초점을 맞추고 있습니다. 더욱 상세한 내용을 원하시면 MDN Web Docs의 Float 가이드를 참조하세요.
