box-sizing과 box model
box의 크기를 어떤 기준으로 계산 할 것인가?
HTML은 Box로 이루어져 있으며 문서의 레이아웃을 계산 할 때 박스 모델에 따라 박스의 사이즈가 달라지게 됨
box의 크기는 어떤 요소들로 이루어 지는가?
box의 크기에 영향을 주는 요소는 box의 width, height, border, padding, margin이 됨
각 요소의 값이 동일 할 때 box의 크기는 달라지는가?
1 | <div class="div content">content-box</div> |
1 | .div{ |
다음과 같은 html과 css가 있을 때 두 div는 .div의 스타일을 적용받아 동일한 size가 됨
그러나 두 div는 box-sizing이 각각 content-box와 border-box로 box-sizing의 값이 다름
그 결과 두 div는 전혀 다른 크기를 갖게 됨
왜 두 div는 다른 크기가 되었는가?
위는 content, 아래는 border의 사이즈
content-box는 100x100의 사이즈에 추가적으로 10px의 padding, 10px의 border와 20px의 margin을 추가적으로 갖게 되어 총 140x140의 사이즈를 갖게 됨
border-box는 100x100의 사이즈를 10px의 border와 padding이 함께 갖게 됨
즉 content-box에서 height와 width는 box의 content의 크기이며 그 외 padding과 margin, border의 크기를 추가로 갖음
border-box는 border까지는 크기를 함게 갖고 margin의 크기를 추가로 갖게 됨