연이은 div 고민 (가변적 자식엘리먼트를 부모영역 안으로)

연이은 div 고민 (가변적 자식엘리먼트를 부모영역 안으로) 정보

연이은 div 고민 (가변적 자식엘리먼트를 부모영역 안으로)

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물 (211.♡.♡.141)
2010.03.12 17:30:33
3,368

본문

/** 아래 스타일은 모두 div **/

.guide_section li .sec_content { height:auto; margin-top:2px; padding-left:10px; background-color:#888; border:1px solid #FFF; } /*container*/

.guide_section li .sec_content .sec_contl { float:left; width:340px; height:auto; padding-right:20px; background-color:#FFF;} /*자식엘리먼트 좌측, height 가변적*/

.guide_section li .sec_content .sec_contr { float:left; width:260px; height:auto; background-color:#EEE;} /*자식엘리먼트 우측, height 가변적*/

.guide_section li .sec_content .sec_clear { clear:both; } /*클리어해 줄 엘리먼트*/

위에서처럼,
container(sec_content) 영역 안에 들어가는 자식엘리먼트의 길이가 가변적인 상황이 발생해서 급조해 만들어 보았습니다.

즉, 좌 우측 자식엘리먼트(sec_contl, sec_contr)의 길이가 가변적이기 때문에
container(sec_content) 영역 안에 포함하기 위해서
클리어해 줄, 비어있는 엘리먼트(sec_clear)를 넣었거든요.

<그림으로 나타내자면...>
  sec_content
        sec_contl          sec_contr
         sec_clear(빈 엘리먼트)

sec_clear(빈 엘리먼트)를 넣은 이유는,
sec_contl 과 sec_contr 이 sec_content 영역 안에 들어가야 하므로.....

위에서처럼 빈 엘리먼트를 넣지 않는 방법은 없을까요?
* after처럼 핵 쓰는 거 말구요.
* overflow:hidden은 웹표준에서만 작동하므로 패쓰~하구요...
* 위 스타일을 여러 곳에 적용해야 하므로, container에 height 값을 줄 수 없음~입니다.

무식하면 질문하는 용기라도 필요할 듯해서... 고수님들께 달려듭니다. (__)

댓글 5개

웃는하루 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(180.♡.♡.43)

10.03.12 22:14:10

header와 footer에 clear: both;만 확실하게 해줘도 필요는 없습니다.

clear 엘리먼트의 이용과 overflow: hidden;의 차이는 어느 브라우저나 마찬가지입니다.
clear 쪽이 다른 엘리먼트에 대해서 배려심이 더 많다고 해야할까요? ㅎㅎ
그리고 ie6에서는 clear를 이용해 height를 주지 않아도 원하는 구실을 합니다.

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(121.♡.♡.252)

10.03.12 23:58:32

__(__)__ 무지한 하수에게 개념을 잡아수져서 감사합니다, 웃는하루님
곁눈질로 주워들은 개념들로 탑(?)을 쌓아가려니 돌 하나 올려놓고도 그 개념이 생경한 경우가 태반입니다. 헤더와 풋터에서 잡아주는 거... 음, 요놈도 공부해 보겠습니다. 고맙습니다. ^^

에그당 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(112.♡.♡.234)

10.03.13 01:00:59

:after 핵아닌데;;

.sec_content:after{content:"";clear:both;display:block;}

물한모금 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(121.♡.♡.252)

10.03.13 01:07:45

아... 그런가요?
죄송합니다. 제가 개념이 없어서...
익스에서는 안되길래... 핵인 줄 알았습니다.

엑스엠엘 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

(211.♡.♡.209)

10.03.13 19:31:32

both:clear는
previous sibling이 float인 경우
previous sibling이 container안에 안 들어 가기 때문에
clear:both;가 꼭 필요합니다.

CSS MASTERY: advanced web standards solutions: p40

연이은 div 고민 (가변적 자식엘리먼트를 부모영역 안으로) > 자유게시판

자유게시판