CSS Floating and Clearing

CSS의 플로트(float)는 포지션(position)과 함께 레이아웃을 잡는데 사용할 수 있는 속성입니다. 포지션은 블록의 위치와 크기가 고정되어 있는 상황에서는 아주 좋은 방법이지만 블록의 크기(높이)가 자유롭게 변할 수 있는 레이아웃의 컬럼에 사용하기에는 힘듭니다. 최소높이(min-height)나 최소너비(min-width) 등과 같이 사용하면 되지만 최소높이 자체를 확정지을 수 없는 경우도 있습니다.

그래서 보통 3단 레이아웃 같은 경우는 플로트를 사용하게 됩니다. 플로트의 경우 아래의 블록(푸터 같은 것들)에서 클리어(clear)해주면 되기 때문에 높이가 변하는 레이아웃에 아주 유용합니다. 하지만 플로트는 화면 상에서 위치를 차지하지 않기 때문에 상위 엘리먼트의 경계선이나 배경이미지가 원하는 대로 나오지 않게 됩니다. 그래서 많은 사람들이 플로트된 레이아웃을 사용할때 클리어에 관한 고민을 해 왔습니다.

가장 처음에 시도된 것은 플로트 된 블록만을 가지고 있는 상위 엘리먼트 하단에 클리어 기능을 해주는 블록을 넣는 것(The Markup Method)이었습니다. 하지만 이것은 클리어를 위한 불필요한 마크업을 추가해야하기 때문에 마크업이 완전하지 못하다는 단점이 있었습니다.

그 다음으로 나온 방법은 CSS로 클리어 할 수 있는 HTML 요소를 추가하는 것(The Aslett/PIE Method)이었습니다. '애프터 수도 클래스(:after psuedo class)'와 콘텐츠(content) 속성을 이용해서 상위 엘리먼트의 하단에 클리어 할 수 있는 블록 요소를 추가하는 것이었습니다. 하지만 이 방법은 IE6 에서 '애프터 수도 클래스'와 콘텐츠 속성을 모두 지원 안하기 때문에 IE 핵을 사용해서 IE 의 자동 클리어 효과(auto-clearning effect)를 같이 사용해야만 했습니다. 코드도 길고요.

그런데 최근에 아주 좋은 방법이 하나 나왔습니다. '오버플로우 오토(overflow: auto)'를 사용하면 플로트 된 요소만 있어도 상위 엘리먼트가 높이에 맞게 맞춰진다는 것을 발견한 것입니다.

단점이 있다면 너비를 넘어가는 콘텐츠(큰이미지나 공백이 없는 문자열)가 있을 경우 스크롤바가 생긴다는 것입니다. 콘텐츠를 다 보기 위해서는 스크롤바가 생기는 것이 좋겠지만 일반적이지 않고 보기에도 그다지 좋지 않습니다. 플로트 된 요소들에 '오버플로우 히든(overflow: hidden)'을 주어서 해결 할 수도 있지만 이것의 문제는 콘텐츠가 짤리게 되어 볼 수가 없다는 것입니다.

하지만 이 방법은 추가적인 마크업도 필요 없고 CSS도 아주 간단하기 때문에 유용한 방법이라고 생각 됩니다. 콘텐츠가 너비를 넘어갈 경우 IE에서는 어쩔 수 없이 '오버플로우 히든'을 써야 하기 때문에, 그리고 쓸데없이 큰 이미지는 줄여서 넣어야 사이트 자체의 콘텐츠로서도 좋다는 것을 생각해 보면 콘텐츠가 짤린다고 해서 문제가 될 것 같지는 않습니다.

IE 때문에 플로트 레이아웃을 사용하지 않고 있었는데 이 방법으로 보다 간결하고, 쉬운 CSS 레이아웃을 작성할 수 있게 되었습니다.

Float Everything!

관련 링크 : CSS clear

March 07, 2005 12:17 PM