float을 제거하는 방법(clearing float)

앞서 CSS로 이미지 정렬하기라는 글에서 CSSclear 속성으로 float된 요소를 다루는 방법을 소개했습니다. 이렇게 float을 제거하는 방법(clearing float)은 그외에도 몇 가지가 더 있는데 그중에서 overflow 속성을 사용하는 방법과 CSS2에 새로 도입된 :after 가상 요소(pseudo-element)를 이용하는 방법을 알아보겠습니다.

overflow 속성을 사용하는 방법

overflow 속성은 박스(containing box)에 담긴 내용물이 박스 크기보다 클 때 브라우저가 어떻게 처리할 지 알려주는 역할을 하는 CSS 속성입니다. 기본값인 visible은 박스 밖으로 넘친(overflow) 내용물을 그대로 보여주고, hidden은 안보여주게 되지요.

† 인터넷 익스플로러(이하 IE)6에서는 visible 속성을 적용할 경우 박스가 내용물 높이만큼 늘어나는데 표준과는 어긋나는 방식입니다.

그런데 이런 효과는 박스의 크기(width, height)를 명확하게 지정했을 경우에만 나타납니다. 만약 width만 지정한 상태에서 overflow: hidden;을 적용하면 박스가 내용물의 크기만큼 아래로 늘어나니까요. 이 때 박스 안에 있는 float된 요소의 높이까지도 같이 계산됩니다. 결국 박스가 float된 요소를 포함할 만큼 커지기 때문에 float을 제거하는 효과가 나타나게 됩니다. 다시 말해서 앞서 설명한 clear 속성과 같은 효과를 내게 됩니다. 또한, 절대 위치(absolute positioning)가 지정되지 않은 박스의 높이(height)를 퍼센트 단위(%)로 지정하고, 높이를 참조할 상위 박스(containing box)의 높이가 명확하지 않을 경우(내용물에 따라 달라질 경우)에는 CSS 규격에 따라서 heightauto로 간주된다는 점도 중요합니다.

아래 예는 이미지가 포함된 단락(paragraph)에 overflow 속성을 적용하지 않은 경우입니다.

test imageLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel tellus nec massa cursus malesuada. Pellentesque metus.

Proin eu nisi eu tortor consectetuer varius. Curabitur magna nunc, pretium id, tincidunt a, tempus porttitor, nisi. Integer erat lacus, tempor non, varius sit amet, laoreet in, arcu. Pellentesque tempus mauris. Nulla ut ante ut massa suscipit euismod.

이미지와 텍스트 단락이 들어 있는 p 태그에 overflow: hidden; 속성을 적용하면 아래처럼 그 차이를 확인할 수 있습니다.

test imageLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel tellus nec massa cursus malesuada. Pellentesque metus.

Proin eu nisi eu tortor consectetuer varius. Curabitur magna nunc, pretium id, tincidunt a, tempus porttitor, nisi. Integer erat lacus, tempor non, varius sit amet, laoreet in, arcu. Pellentesque tempus mauris. Nulla ut ante ut massa suscipit euismod.

하지만 IE에서는 overflow 속성이 조금 다르게 적용됩니다. 위 예를 IE6로 보면 IE7이나 파이어폭스 등의 브라우저와는 다른 결과가 나타나는데 그 이유는 앞서 hasLayout 속성과 홀리 핵(Holly hack)에서 소개했던 Layout 속성이 활성화되지 않았기 때문입니다. IE7은 overflow 속성이 박스가 Layout을 갖도록 하지만 IE6에서는 그렇지 않거든요. 따라서 IE6에서도 동일한 효과를 얻으려면 Holly hack을 사용하거나 Layout을 활성화시키는 추가적인 CSS 지정이 필요합니다.

정리하자면 파이어폭스, 오페라 등의 브라우저는 overflow: hidden;으로 float이 제거되고, IE7에서는 overflowLayout을 갖게 만들어서 같은 효과를 냅니다. 하지만 IE6 이하 버전에서는 overflowLayout을 갖게 할 수 없기 때문에 Holly hack이 필요한 것이지요.

† IE7이 overflow 속성을 CSS 표준대로 적용시키는지는 잘 모르겠습니다. 하지만 아무래도 CSS 표준보다는 Layout을 갖게 만드는 역할만 하는 것이 아닐까 생각되네요.

:after CSS 가상 요소(pseudo-element)를 사용하는 방법

CSS2에 도입된 가상 요소(pseudo-element)는 말 그대로 HTML에 없는 요소를 CSS만으로 넣을 수 있도록 해주는 역할을 합니다. 가상 요소는 ‘생성된 컨텐츠(generated content)’를 만드는 방법의 하나인데 ‘생성된 컨텐츠(generated content)’의 가장 간단한 예는 순서있는 리스트(ordered list)를 만들 때 사용하는 ol 태그에서 list-style-type에 따라 자동으로 생기는 항목 번호를 들 수 있습니다. 즉, HTML에 없는 항목 번호가 CSS를 통해서 생기는 것이지요.

† 가상 요소는 링크 태그에 사용되는 :active 등의 가상 클래스(pseudo-class)와는 다른 개념입니다.

:after 가상 요소에 content 속성을 지정하면 해당 CSS가 적용된 요소 뒤에 content의 속성 값이 추가적으로 들어갑니다. 대표적인 예가 짧은 인라인 인용문에 쓰이는 q(quotation) 태그입니다. 한 번 써볼까요?

<q>짧은 인용문 테스트</q>

짧은 인용문 테스트

:before:after 가상 속성을 지원하는 파이어폭스에서는 “짧은 인용문 테스트” 같이 자동으로 큰 따옴표를 붙여서 보여줍니다. 하지만 안타깝게도 IE에서는 이 가상 요소를 지원하지 않으므로 큰 따옴표가 생기지 않습니다.

:after 속성을 사용해서 float을 제거하는 방법은 실질적으로는 clear 속성을 사용하는 것과 같습니다. 단지 cleardivbr을 사용하지 않고 CSS가 자동으로 생성하는 컨텐츠를 사용하는 것만 다를 뿐이지요. 일반적으로 사용되는 CSS 규칙은 아래와 같습니다.

.layoutFix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

layoutFix가 지정된 박스 끝부분에 마침표(.) 하나를 생성하고, 이 마침표에 clear 속성을 적용하게 됩니다. visiblity: hidden; 속성으로 보이지는 않지만 박스로서의 영역은 차지하도록 해주고요.

이 방법 역시 IE에서는 사용할 수가 없습니다. 마침표를 만들어주지 못하니까요. 따라서 Holly hack 등을 추가로 사용해야 합니다.

마치며

이밖에도 float된 요소가 포함된 박스 역시 float시켜서 float을 없애는 방법도 있지만 그렇게 의미 있는 방법은 아니라고 생각되네요. clear 속성을 사용하는 방법과 display 속성을 사용하는 방법, :after 가상 요소를 사용하는 방법을 알아봤는데 어느 한 가지가 최고의 방법이라고는 생각하지 않습니다. 상황에 따라서 적절한 방법을 골라서 쓰는 것이 가장 좋겠지요.

또한, float을 제거할 때 float된 요소의 마진이나 패딩(margin, padding)이 제대로 적용되지 않는 경우도 있습니다. 어떤 float 제거 방법을 쓰느냐에 따라서 달라지기도 하는데 관련된 정보가 잘 정리된 페이지가 CSS tests home 사이트의 Float containment에 있으니 참고하시고요.

이렇게 해서 이미지 정렬에 관한 글을 모두 마쳤습니다. ^^; 사실 float만 잘 사용하면 <br /> 태그를 반복해서 사용하지 않고도 이미지와 문단을 자유롭게 배치할 수 있거든요. 다음 글에서는 테이블(table) 태그 사용에 대해 알아볼게요.

float 관련 글 안내

  1. CSS로 이미지 정렬하기
  2. hasLayout 속성과 홀리 핵(Holly hack)
  3. float을 제거하는 방법(clearing float)

댓글 8개가 달렸습니다. 태그: , , ,

  1. 중독 | 2007-08-27 16:10

    이 블로그 쥔장님이 뉘신가 했더니 위스턴이었군요!
    약속대로 '텍스트패턴'으로 검색해서 찾아왔습니다 ㅎㅎㅎㅎ

  2. wystan | 2007-08-27 20:40

    앗~ 찾아주셨네요. ^^
    댓글도 남겨주시고... 고맙습니다~

  3. 꼬세 | 2008-04-05 05:06

    CSS Secret Manual 이라는 지인께서 빌려주신 책에서 잠시 봤던 기억이 나네요..정말 좋은 자료다 싶어 저도 포스팅 하고 싶었는데..ㅋㅋ 이렇게 숨은 진주 사이트가 있어서 오늘하루도 즐거운데요?? 좋은자료 잘읽고 가요^^ 또 올께요~

  4. wystan | 2008-04-06 20:54

    찾아주시고 좋은 말씀 해주셔서 고맙습니다. ^^
    오늘도 즐거운 하루 보내세요~

  5. 음양화평인 | 2008-05-02 13:51

    음… 볼꺼 많네요.. 도움이 많이 되고 있습니다.

  6. wystan | 2008-05-03 00:37

    고맙습니다~ ^^

  7. 99 | 2010-08-19 13:12

    좋은 정보 ! 감사합니다

  8. duck | 2011-04-21 17:23

    존경합니다.

댓글이 닫혔습니다.