![IMGWizard[이미지위자드]](/layouts/wizard/images/default/zeroBoardXE.png)
CSS에서 디자인을 하다가 float된 요소를 자식으로 품고 있는 부모가 같이 float되지 않은 경우 자식이 부모 밖으로 튀어나가는 경우를 볼 수 있다. 아래처럼 말이다.
이런 경우 가장 깔금한 해결책(가상 선택자 :after와 zoom:1)을 담은 글을 발견해서 ... 펐다;; 아래 접었다 폈다를 펼치면 볼 수 있다.
원문은 http://naradesign.net/open_content/lecture/wp/ 에서 볼 수 있다. 원문에는 모든 해결책의 유형을 제시하고 있다.
접어두기..
.container:after { content:""; clear:both; display:block; }
가
상 선택자란 실제로는 존재하지 않는 요소나 특수한 상황에서만 발생하는 동적인 요소를 CSS 명령으로 제어하는 기법 입니다. 가상
선택자는 다시 '가상 클래스 선택자'와 '가상 요소 선택자'로 구분할 수 있는데요. 가상 클래스 선택자(:link, :visited, :hover, :active, :focus, :first-child)는 특정 요소에 마치 동적으로 class를 부여한 것과 같은 이치로 이용할 수 있습니다. 가상 요소 선택자(:first-line, :first-letter, :before, :after)는 실제로 존재하지 않는 요소를 마치 존재하는 것처럼 이용하는 기법 입니다. :after 라는 가상 요소 선택자는 content 라는 속성을 이용해서 .container 블럭이 끝나기 직전 content 속성의 값 "*" 을 화면에 출력할 수 있습니다. 이렇게 생성된 요소에 clear:both 속성을 부여하면 자식의 높이를 부모에게 전달할 수 있는데 실제로 HTML 코드에는 빈 요소가 존재하지 않기 때문에 가장 이상적인 방법이라고 할 수 있습니다. 그러나 IE 6~7 브라우저는 가상 요소 선택자를 지원하지 않습니다.
.container { *zoom:1; }
IE 6~7 브라우저는 가상 요소 선택자 :after를 지원하지 않습니다. 그러나 CSS hack을 이용하여 자식의 높이를 부모에게 전달 할 수 있습니다. zoom:1 속
성은 IE 전용 확장 속성으로써 본래의 존재 목적은 IE 브라우저에서 웹 문서를 자유롭게 'zoom in / zoom out'
하는 것 입니다. 이 속성을 부여하게 되면 요소는 IE 브라우저에서만 존재하는 hasLayout 이라는 개념의 속성을 갖게
되는데 이 속성이 IE 브라우저에서 float 문제를 해결하는 trigger로 작용을 하고 다른 브라우저에는 영향을 미치지 않습니다. zoom 속성 앞에 '*'을 붙이는 이유는 현재는 존재하지 않지만 향후 zoom과 동일한 이름을 지닌 속성이 표준으로 등장하거나 다른 웹 브라우저에서 CSS 확장 속성으로 등장하더라도 이 코드를 무시하도록 만드는 'hack'을 사용한 것입니다. 속성 앞에 공백 없이 '*'을 붙이면 해당 속성은 IE 6~7 브라우저에서만 작용하게 됩니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float</title>
<style type="text/css">
.wrap { background:#CCCCCC; width:600px;}
.wrap:after { content:""; clear:both; display:block; *zoom:1;}
.left { float:left; width:200px; height:200px; background:#FF3333; }
.right { float:right; width:400px; height:100px; background:#0066FF }
</style>
</head>
<body>
<div class="wrap">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div style="background:#00CC00; width:600px; height:30px;">kimkee@naver.com</div>
</body>
</html>
안녕하세요!
이미지위자드 김기현입니다.
