CSS에서 요소의 박스 모델은 기본적으로 content-box가 기본값입니다. 이는 요소의 width와 height 속성이 콘텐츠 영역에만 적용되고, 패딩(padding), 테두리(border), 그리고 마진(margin)은 이 값에 포함되지 않는다는 것을 의미합니다. 즉, content-box를 사용할 때, 요소의 실제 크기는 설정한 width와 height에 패딩과 테두리가 추가된 값이 됩니다.
CSS3에서는 box-sizing 속성을 도입하여 이 기본 동작을 변경할 수 있게 되었습니다. box-sizing 속성에 border-box 값을 설정하면, 요소의 width와 height가 테두리와 패딩을 포함한 크기를 지정하게 됩니다. 이 경우, 콘텐츠 영역의 크기는 전체 크기에서 테두리와 패딩을 제외한 값이 됩니다.
/* content-box가 기본값입니다. */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
}
/* box-sizing을 사용해 border-box로 변경할 수 있습니다. */
.border-box {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
}
content-box가 기본값이지만, 많은 개발자들은 페이지 전체의 박스 모델을 border-box로 설정하여 레이아웃을 더 쉽게 계산하고, 예상대로 동작하도록 합니다. 이는 특히 반응형 디자인을 구현할 때 유용합니다.
/* 모든 요소에 대해 box-sizing을 border-box로 설정 */
*, *::before, *::after {
box-sizing: border-box;
}
이렇게 설정하면, 요소에 지정된 너비와 높이가 패딩과 테두리를 포함한 총 크기를 나타내게 되어 레이아웃을 계산하기가 더 직관적이 됩니다.