css3 box-sizing 박스코딩의 기본

디자인을 다 해놓고 나면 코딩에 앞서 다음과 같은 일들이 많이 벌어져 

고민을 항상 많이 했었던 부분이죠.

내용물

내용물

내용물

각 박스가 200px이고 패딩이 10px 보더가 있다면 다음과 같이 되는데요

실질적으로 사이즈는 1+10+200+10+1 = 223이 됩니다.

div {width:200px; height:50px; padding:10px; border:1px solid #ccc}

그래서 200에서 22를 뺀 178을 width 값을 줘야 실질적으로 디자인된 200px에 맞게 코딩이 됐었죠..

그래서 이 부분을 보완하기 위한 css3 새로운 속성이 있는데요.

바로 박스사이징입니다.

box-sizing:border-box

padding과 border를 width에 포함하여 계산해서 웹에 적용시켜줍니다.

내용물

box-sizing:border-box 적용

내용물

적용하지 않은 코딩

차이를 아시겠나요?

박스사이징 하나에 코딩하면서 따로 계산 안해도 되고 정말 편한 방법입니다.

퍼블리셔분들은 당연히 다 아시겠지만 디자이너분들은 꼭 필수로 알고있어야 하는 부분 같네요

저는 이 속성하나에 정말 편함을 느끼고 있거든요 !