CSS 의 float 속성으로 html 레이아웃 코딩하다보면 미치고 환장할때가 있습니다
바로 border 나 margin, padding 등을 주려고 하면 1, 2 픽셀 차이 때문에 밑으로 떨어지곤 하는 짜증 솟구치는 현상때문이죠.
#ads_1
사실 이게 저한텐 너무나 큰 스트레스였습니다.
예전 table 태그로 레이아웃 잡을때는 레이아웃에 대한 스트레스는 없었는데
웹표준코딩으로 넘어오면서 레이아웃때문에 정말 엄청나게 스트레스를 받았습니다.
1px, 2px 때문에 얼마나 열이 받았던지 웹프로그램을 때려치우기로 맘 먹은적도 있었습니다. 실제로 1년넘게 쳐다보지도 않았죠 ㅋㅋㅋ
암튼 마음 가다듬고 픽셀과의 싸움하면서 그냥 팔자려니 했는데....
간단하게 해결하는 방법이 있었네요 ㅠㅠ
바로 box-sizing 속성에서 border-box 로 지정해 주기만 하면 됩니다.
브라우저별로 속성명에 차이가 좀 있어서 아래 처럼 세가지를 모두 기입해주는게 좋습니다.
border-box 를 사용하지 않았을때
<style type="text/css">
#container1{border:4px solid #f00; overflow:hidden}
#container1 .child{float:left;width:33.3333%;padding:10px; border:4px solid #00f}
</style>
<div id="container1">
<div class="child">사과</div>
<div class="child">배</div>
<div class="child">원숭이</div>
</div>
#ads_2
border-box를 사용했을때
<style type="text/css">
#container2{border:4px solid #f00; overflow:hidden}
#container2 .child{float:left;width:33.3333%;padding:10px; border:4px solid #00f}
#container2 *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<div id="container2">
<div class="child">사과</div>
<div class="child">배</div>
<div class="child">원숭이</div>
</div>
#ads_3
