레이아웃 float
레이아웃 float방식은 블록 요소를 좌우 방향으로 배치하는 속성입니다.
일반적으로 레이아웃을 구성할 때 사용되며 레이아웃을 구성하는 데에는float, flex, grid 3가지 방식이 있습니다.
요즘은 float방식을 잘 사용하지 않는다고 하지만, 그래도 알아두면 좋을 것 같습니다.
float를 이용하면 여러 개의 요소를 배치하여 레이아웃을 만들 수 있습니다. float를 사용하여 만든 레이아웃은 다양한 디자인 요소를 추가하여 다양한 레이아웃을 만들 수 있습니다.
float는 다른 요소와 겹치지 않고, 페이지의 다른 요소들이 float 된 요소 주변에 배치될 수 있도록 합니다.
예를 들어, float된 요소가 왼쪽에 위치한 경우, 다른 요소들은 float된 요소 오른쪽에 배치됩니다. float는 요소의 위치를 변경하며, 요소의 크기나 위치를 바꾸지는 않습니다.
float를 사용하여 만든 레이아웃은 주로 다음과 같은 형태로 구성됩니다.
- header: 로고, 검색창, 내비게이션 메뉴 등이 위치합니다. 보통 가장 상단에 위치합니다.
- aside: 메뉴, 광고 등이 위치합니다. 보통 왼쪽 또는 오른쪽에 위치합니다.
- contants: 주요 내용이 위치합니다. 보통 중앙에 위치합니다.
- footer: 회사 정보, 저작권 정보, SNS 링크 등이 위치합니다. 보통 가장 하단에 위치합니다.
float를 사용하여 레이아웃을 만들 때 주의할 점은 다음과 같습니다.
- float 된 요소는 다른 요소에 영향을 받지 않으므로, float된 요소 다음에 clear를 추가해주어야 합니다.
- float된 요소는 높이가 없으므로, float된 요소의 부모 요소에 overflow: hidden; 기능을 추가하여 float된 요소의 높이를 계산할 수 있도록 합니다.
- float된 요소가 다른 요소를 덮어쓰는 경우, z-index 속성을 사용하여 요소의 층위를 조절합니다.
- float된 요소가 브라우저의 가로폭을 벗어나는 경우, 가로 스크롤이 생길 수 있으므로, float된 요소의 크기를 조절하여 가로폭을 초과하지 않도록 해야 합니다.
float를 사용하여 레이아웃을 만들 때는 이러한 주의점을 잘 숙지하고, 디자인 요소를 추가하여 다양한 레이아웃을 만들어 볼 수 있습니다.
사라진 footer?
float를 이용하여 레이아웃을 제작하게 되면 가끔 footer영역이 사라지는 것을 경험하게 되는데 그럴 땐
- clear: both
- overflow: hidden
- clearfix
의 기능을 추가하여 사라진 footer를 불러올 수 있습니다.
댓글