크기를 자동계산해 주는 border-box 속성

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