box-sizing ???

이전부터 해오던 스타일도 있고, 크로스브라우징 때문에 사용하지 못했던 css가 바로 box-sizing 입니다.

보통 width값을 정해놓아도 padding이나 border값에 의해 너비값이 변경되는 구조였다면,

box-sizing을 지정하면 padding과 border의 영향을 받지 않고 너비를 고정시킬 수 있습니다.

해당 css는 IE8 이상부터 지원됩니다.

1 2 3 4 5 6 7 8

<div id="wrap"> <div class="cnt cnt1"> designsharp.tistory.com </div> <div class="cnt cnt2"> designsharp.tistory.com </div> </div>

1 2 3

* {padding:0;margin:0} .cnt {width:400px;padding:30px;margin:20px;background:#f5f5f5;border:1px solid #d1d1d1} .cnt1 {padding:50px;}

위의 코드는 box-sizing을 사용하고 않고 작성한 코드입니다. 위쪽 박스에 padding값을 늘려주었더니 width값이 같이 늘어났습니다. 

box-sizing을 추가해주면 아래와 같은 결과물을 얻을 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12

* {padding:0;margin:0} .cnt { width:400px; padding:30px; margin:20px; background:#f5f5f5; border:1px solid #d1d1d1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .cnt1 {padding:50px;}

padding과 border가 있음에도 불구하고 width값이 고정되는걸 볼 수 있습니다.