CSS의 box-sizing : content-box와 border-box - padding과 border와 width

조영규의 블로그

2014.03.02 01:51 from Develop


이전 세대, 즉 box-sizing이라는 프로퍼티가 있기 전까지의 제 고통을 먼저 느껴보죠.

이 프로퍼티가 얼마나 큰 행복을 가져다 주었고, 삶의 질의 향상(ㅋㅋㅋ)에 기여 하였는지!


1
2
3
4
5
6
7
<div style="width: 200px; margin: 10px auto;border:1px solid black;">
 1번 박스입니다.
</div>
 
<div style="width: 200px; margin: 20px auto; padding: 50px; border-width: 10px;border:solid black;">
 2번 박스입니다.
</div>


이 코드를 실행해보게 되면, 


1번 박스입니다.
2번 박스입니다.


이런 박스가 나오게 됩니다.

이럴 때! 엄청난 멘붕이 찾아옵니다.

분명히 나는 width를 200px로 했는데 말입니다! 왜 이게 이렇지?

그 이유는 바로 다들 아시겠지만.. width외의 프로퍼티들이 실제의 width값을 만드는데 기여하기 때문이지요.

이것을 해결 하기 위해 IE8+ 이후 브라우저들은 box-sizing : border-box를 만들어내게 되요.

CSS를 사용하는 개발자 혹은 디자이너 입장에서 width는 매우 자연스럽게도 실제로 랜더링되는 width를 의미한다고 생각하고 사용하는 경우가 많은데, 이 자연스러움을 지켜주는 방법이죠.

원래는 매우 오랜 기간 동안, 너비값을 정하기 위해 padding과 border등을 고려하여 계산하곤 했어요.

그러나 이젠 그렇게 안해도 된다는 것이죠.


1번 박스입니다.
2번 박스입니다.


이전 예제와 같은 상자지만 크기가 같죠?

아래 코드를 보세요.


1
2
3
4
5
6
7
<div style="width: 200px; margin: 10px auto;border:1px solid black;box-sizing: border-box;">
 1번 박스입니다.
</div>
 
<div style="width: 200px; margin: 20px auto; padding: 50px; border-width: 10px;border:solid black;box-sizing: border-box;">
 2번 박스입니다.
</div>


다른건 이전 예제와 똑같지만, box-sizing: border-box라는 프로퍼티가 추가되었습니다.

box-sizing에는 border-box외에 content-box도 존재합니다.

이는 기존의 box-sizing과 동일한 방식으로 랜더링을 합니다.


CSS선택자 중 *를 사용해 모든 앨리먼트에 box-sizing을 border-box로 하신다면, 조금 더 직관적인 코딩이 가능해집니다.

comments powered by Disqus
태그, 트랙백, 검색 상자 토글
    1   ···   12   13   14   15   16     >>