인터넷(Internet)/표준코딩 2009/10/28 11:04
CSS 에서 float 속성 사용할 경우 잘 나오던 배경이 사라지는 경우가 있습니다.
예를 들어
CSS 예제1
.wrap {width:500px; background-color:red;}
.left {float:left; width:250px;}
.right {float:right; width:250px;}
코딩 예제1
<div class="wrap">
.wrap {width:500px; background-color:red;}
.left {float:left; width:250px;}
.right {float:right; width:250px;}
코딩 예제1
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
<div class="right">오른쪽</div>
</div>
위와 같이 두개로 분리한 영역을 감싸는 영역의 배경이 사라지는 경우죠~
이런 현상은 class="wrap" 이 적용된 영역의 높이가 0px 로 인식도기 때문에 보이지 않는 경우인데..
이유는 float 란 녀석의 속성때문에 그렇습니다.
float란 속성은 div 뿐 아니라 대부분의 코드에 적용가능한 속성인데..
이 속성이 있는 코드들끼리 영향을 주고 받습니다.
즉 위 예제에서 본다면 wrap 과 left, right 는 서로 영향을 미치지 않기 때문에 wrap 속에 left, right가 있더라도 높이가 0이 되는 것이죠.
이 문제를 해결하려면 float 영향을 받아야 하는 코드에 float 속성을 함께 써 주면되겠죠.
불필요한 곳에 float 를 사용하면서 틀어질 수 있는 그리드는 clear:both; 속성으로 방지해 주면됩니다.
아래에 변경된 예제입니다.
CSS 예제2
.wrap {float:left; width:500px; background-color:red;}
.left {clear:both; float:left; width:250px;}
.right {float:right; width:250px;}
코딩 예제2
<div class="wrap">
.wrap {float:left; width:500px; background-color:red;}
.left {clear:both; float:left; width:250px;}
.right {float:right; width:250px;}
코딩 예제2
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
<div class="right">오른쪽</div>
</div>
asdas
2010/01/08 21:34 [ ADDR : EDIT/DEL : REPLY ]asdsaf
2010/01/08 21:34 [ ADDR : EDIT/DEL : REPLY ]남영훈
2010/01/08 21:48 [ ADDR : EDIT/DEL : REPLY ]