overflow: auto; + web standard

오늘 오래된 고민거리가 신현석님 덕분에 해결되었습니다. 신현석님 완전 감사합니다.

본론으로 들어가서 <ul> 로 tab 메뉴나 가로 리스트를 만들 경우 <li>에 float: left; 값을 줍니다. 아래 캡쳐화면 처럼 말이죠.


<li>의 float이 left인데, <ul>에 border-bottom이 지정되어 있다. ㅠ.ㅠ
그런데 만약 background를 줘야하거나 위의 캡쳐처럼 border가 필요한 경우 <ul>이 함께 늘어나주지 않습니다. 제가 지금까지 마지막 <li>에 float 속성을 clear 해줘서 둘러싸고 있는 <ul>이 마지막 <li> 를 감싸게 하는 방법으로 이 문제를 해결했었습니다.

<li style="clear: both; float: none; font-size: 0; height: 0;"></li>
이렇게 처리하면 html에는 쓸데없는 <li> 가 하나 추가되어야 하기 때문에 권장할 수 있는 방법은 아닙니다. 저 역시도 html 코드를 줄이기 위해 노력하면서 이런 의미없는 태그가 추가되는 것에 마음이 무척 불편했었답니다.

현석님이 올린 clear 속성에 대한 글을 보시면 이에 대한 해결 방법이 나와 있습니다.

둘러싸고 있는 <ul>의 hasLayout을 true로 하고, overflow: auto; 를 넣어주면 됩니다. hasLayout을 true로 한다는 말은 width나 height 값을 넣어주라는 말이구요. IE를 제외하고는 overflow: auto; 만 넣어줘도 <ul>이 함께 늘어납니다.마지막으로 이건 현석님이 메신저로 알려주신건데, width나 height를 넣을 수 없는 경우면서 IE에서도 반드시 제대로 보이게 해야 한다면 zoom: 1; 속성을 넣어주면 된다고 합니다. 단, IE6 전용 속성이기 때문에 css validation은 포기해야하구요.

무지 고마운 현석님께는 레어아이템 배달됩니다~ 캄사합니다~
아래는 샘플 css 입니다. 다 아는 속성은 빼고 주요 속성만 담았습니다.
ul {
   background-color: orange;
   overflow: auto;
   /* IE6 Hack */ zoom: 1;
   }

li {
   float: left;
   background-color: yellow;
   margin-right: 5px;
   }


div.wrap {
   background-color: orange;
   overflow: auto;
   /* IE6 Hack */ zoom: 1;
   }

li.title {
   float: left;
   background-color: yellow;
   }

li.more {
   float: right;
   background-color: skyblue;
   }

tag: , ,


(추가) Methods for Containing Floats 를 보시면 float 속성을 싸고 있는 block 된 녀석들을 clear 해주는 방법을 더 많이 소개하고 있습니다.

핑백

  • blogger jely : 2016년 내 이글루 결산 2017-03-20 18:52:25 #

    ... 노트북 도색하기 1,395 2 집에 있는 프린터로 대형 포스터 인쇄하기 414 3 안드로이드 연락처의 위엄 266 4 overflow: auto; 242 5 LINE6 Floor POD Plus - 멀티이펙터 217 2016년에 조회수가 집계 된 포스트가 없습 ... more

덧글

  • nmind 2006/09/06 11:55 # 삭제

    어제도 다른 분 블로그에서 비슷한 내용을 봤는데..역시 float에 많은 분들이 어려움을 많이 느끼시는 것 같습니다. 저같은 경우는 clearfix:after방식으로 float의 height를 해결하고 있습니다 :-)

    http://www.positioniseverything.net/easyclearing.html
  • nmind 2006/09/06 14:35 # 삭제

    아! clearfix:after방식은 IE7(베타3)에서 적용되지 않는 문제가 있더군요. 역시 현석님이 알려주신 overflow: auto를 이용한 방식이 더 적절한 것 같습니다.
  • jely 2006/09/06 14:45 #

    아, 그렇군요.
    IE7까지 등장하니 정말 힘들어졌습니다. 하나의 PC에서 테스트를 할 수도 없으니 컴터 두 대로 IE6, IE7까지 테스트하고 있거든요. ㅠ.ㅠ
  • nmind 2006/09/06 20:31 # 삭제

    자꾸 도배해서 죄송합니다..;;

    벌써 IE7에서의 해결책이 나와있더군요! display: inline-table을 display:inline-block으로 바꿔주면 문제가 해결된다고 합니다:-)
  • 이태임 2008/03/07 15:46 # 삭제

    overflow:hidden;하고 차이가 있나요? 저는 보통 히든으로 처리하는데...
  • 소소 2013/04/16 18:16 # 삭제

    브라우저별로 맞추기 힘들었는데, 좋은 정보 감사합니다.
    퍼갑니다 ^^
※ 이 포스트는 더 이상 덧글을 남길 수 없습니다.


이글루스 로고