[CSS] 박스 모델(box model)이란?

박스 모델(Box Model)은 웹 페이지에서 HTML 요소가 어떻게 구조화되고 표시되는지를 설명하는 개념으로, 웹 디자인에서 핵심적인 역할을 합니다. 박스 모델은 각 요소가 상자 형태로 구성된다고 가정하며, 이 상자는 다음과 같은 네 가지 주요 부분으로 이루어져 있습니다.

• Content (내용)
  실제 요소의 콘텐츠가 표시되는 영역입니다. 텍스트, 이미지, 비디오 등 다양한 형태의 데이터가 포함됩니다.

• Padding (패딩)
  콘텐츠와 요소의 테두리 사이의 공간입니다. 패딩은 요소의 배경색을 가지며, 이 공간은 콘텐츠 주위에 여유를 두어 요소가 더 넓어 보이게 하는 역할을 합니다.

• Border (테두리)
  패딩과 마진을 감싸고 있는 경계입니다. 테두리는 두께, 스타일(실선, 점선 등), 색상으로 설정할 수 있습니다.

• Margin (마진)
  요소와 다른 요소 사이의 공간으로, 외부 여백을 제공합니다. 마진은 투명하며, 다른 요소들과의 간격을 조절하는 데 사용됩니다.

브라우저에서의 동작

• 크기 계산
  기본적으로 브라우저는 width와 height 속성을 콘텐츠 영역의 크기로 해석합니다. 하지만 box-sizing 속성이 border-box로 설정되면 width와 height 속성이 패딩과 테두리를 포함하여 계산됩니다.

• 렌더링
  브라우저는 DOM(Document Object Model) 트리를 사용하여 각 요소의 크기와 위치를 계산하고, 이를 화면에 렌더링합니다. 이 과정에서 박스 모델의 각 부분이 반영되어 최종 레이아웃이 결정됩니다.

• 스타일 적용
  CSS 스타일이 적용될 때, 박스 모델의 요소는 스타일 규칙에 따라 다르게 보일 수 있습니다. 예를 들어, 패딩을 추가하면 요소의 전체 크기가 증가하지 않고, box-sizing: border-box가 적용된 경우 설정한 너비와 높이는 유지됩니다.

box-sizing: border-box

box-sizing: border-box는 CSS 속성 중 하나로, 요소의 크기를 계산하는 방법을 정의합니다. 기본적으로 CSS의 박스 모델에서 width와 height는 요소의 콘텐츠 영역만을 기준으로 설정되며, 패딩과 테두리는 별도로 추가됩니다. 이로 인해 요소의 최종 크기가 예상과 다를 수 있습니다.

box-sizing: border-box를 사용하면 요소의 width와 height 속성이 콘텐츠, 패딩, 그리고 테두리를 모두 포함합니다. 즉, 설정한 크기가 요소의 실제 시각적 크기와 일치하게 됩니다.

.box {
    box-sizing: border-box;
    width: 300px; /* 최종 너비 */
    height: 200px; /* 최종 높이 */
    padding: 20px; /* 내부 여백 */
    border: 5px solid black; /* 테두리 */
}

이 경우, .box 요소의 최종 크기는 300px 너비와 200px 높이를 유지합니다. 따라서 내부 패딩(20px)과 테두리(5px)가 포함되더라도 설정한 크기가 변하지 않습니다.

장점

• 예측 가능한 크기
  요소의 크기를 설정할 때, 패딩과 테두리가 포함되므로 더 직관적입니다.

• 레이아웃 안정성
  요소의 크기가 변하지 않으므로 레이아웃이 깨지지 않습니다.

• 반응형 디자인
  다양한 화면 크기에서 레이아웃을 쉽게 조정할 수 있습니다.

이러한 이유로 box-sizing: border-box는 웹 개발에서 널리 사용됩니다. 일반적으로 CSS 스타일 시트의 최상단에 다음과 같이 설정하여 모든 요소에 적용하는 것이 좋습니다.

* {
    box-sizing: border-box;
}

박스 실제 크기 계산 예시

.box {
    width: 200px;        /* 콘텐츠 너비 */
    padding: 10px;       /* 패딩 */
    border: 5px solid;   /* 테두리 */
    margin: 20px;        /* 마진 */
}

Width (width): 200px
Padding (패딩): 10px (좌우 각각 10px, 총 20px 추가)
Border (테두리): 5px (좌우 각각 5px, 총 10px 추가)
그래서 최종적으로 요소의 실제 너비는 230px입니다. (200px + 20px + 10px)

Margin 20px은 다른 요소와의 간격을 조정할 뿐, 위의 계산에 포함되지 않습니다.