요즘 Web표준에 대한 관심이 높아지면서 XHTML+CSS로 코딩을 하고자 하는 분들이 많이 늘은 것 같다. XHTML+CSS에 의한 코딩에서 많은 분들이 어려움을 느끼고 계시는게 아마 float의 처리가 아닌가 싶다. 나도 예전 그 부분에서 많은 어려움을 겪었지만 결국 Tony Aslett씨가 고안한 “clearfix:after“로 해결을 하고 있다.
<div id="contentsArea">
<div id="contents">Contents</div>
<div id="subNavigation">Sub Navigation</div>
</div>
가령 위와 같은 마크업을 작성하고 왼쪽에는 컨텐츠가, 오른쪽에는 서브 네비게이션이 위치하도록 CSS를 작성한다고 하자.
#contentsArea {
background-color:#F90;
padding:10px;
}
#contents {
background-color:#3C0;
float:left;
}
#subNavigation {
background-color:#3CC;
float:right;
}
컨텐츠를 왼쪽에 위치시키기 위해서 float속성에 left를 주고 서브 네비게이션의 float속성에 right를 주어서 각각 왼쪽과 오른쪽에 배치된 페이지가 완성되었다. 하지만 여기서 문제가 되는게 float속성을 해소(clear:both)시켜 주지 않으면 높이값(height)이 생기지 않는 것이다.
이 문제를 해소하기 위해서 CSS에 다음과 같은 소스를 추가한다.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
그리고 XHTML문서의 contentsArea에 class태그를 추가하는 것으로 간단히 문제가 해결된다.
<div id="contentsArea" class="clearfix">
id가 아니라 class를 지정하고 있는 경우에는 스페이스로 구분하여 clearfix를 지정해 주면 된다.
<div class="comment clearfix">
신현석님이 알려주신 overflow 속성을 이용한 방법도 참고하면 많은 도움이 되리라고 생각한다.
she님이 알려주신대로 IE7(베타3)에서는 이 소스가 적용되지 않는다(쇼크!!). 여기에 다시
*+html .clearfix { overflow:auto; }
이렇게 IE7용의 hack을 적어주면 문제는 해결되지만 그다지 의미가 없는 것 같다(기존 작업물의 수정에나 용이할듯..;;). 역시 현석님이 알려주신대로 스크롤바에 유의해가며 overflow:auto;를 이용해서 작업하는게 더 나을 것 같다.
찾아보니 벌써 IE7문제에 대한 해결책이 나와 있었다!(도움주신 kazu님에게 감사드립니다!)
Roger Johansson씨에 따르면 display: inline-table을 display:inline-block으로 바꿔주면 문제가 해결된다고 한다:-)
최종 소스
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
참고링크
역시 이래서 Web Design이 재미있다:-)
…그리고 무엇보다 영어공부의 필요성을 절실히 느낀다..;;
좋은 공부하게 해주신 jely님, she님, kazu님 감사합니다:-)
IE 전용 zoom프로퍼티를 이용한 clear방법
2006년 12월 26일 업데이트
.clearfix{
zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
이 방법은 IE 전용 프로퍼티를 이용하고 있기에 hack을 사용하지 않아도 되는 장점과 IE7에서도 적용이 되고 소스코드도 줄어드는 장점이 있지만 역시 IE 전용 프로퍼티를 이용하는데서 오는 껄꺼로움이 남는다..;
