스타일 zoom

코바코 관리자 포탈에 투입되서 다른 사람이 해 놓은 작업물을 수정하다 스타일 zoom을  발견했다. *를 보아하니 핵같긴 한데 뭐하는 놈인가 해서 찾아보았다.

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>

<style type="text/css">
.left { float:left;}
.right { float:right;}
</style>

 

위와같이 코딩하면 out 클래스의 division 태그가 높이가 잡히지 않습니다.
.out { *zoom:1; } /* 안의 float 요소까지 높이를 잡아주지만 이것은 ie5~7에서만 가능합니다. */
.out:after { content:""; clear:both; display:block; } /* 높이를 잡아주지만 ie5~7에서 지원하지 않습니다. */
*zoom:1 이 사용되는 영역은 위 두가지 스타일이 모두 적용되어 있을 것입니다.

 

 

>>출처 : XE 묻고답하기

위 방법은 zoom 을 이용한 방법이고....아래는 내가 쓰던 방법이다.

 

<style type="text/css">
.left { float:left;}
.right { float:right;}
.clear{clear:both;}
</style>

 

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
<div class="clear"></div>
</div>