box-sizing: border-box는 무엇을 하나요?

Question

Accepted Answer

`box-sizing`은 **`width`와 `height` 속성이 실제로 무엇을 측정하는지**를 제어합니다. 기본값(`content-box`)은 content만 측정하고, `border-box`는 padding과 border를 포함하게 만듭니다.

## 기본값(content-box)의 문제

```css
.box {
  box-sizing: content-box; /* 기본값 */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* 렌더링된 너비 = 200 + 2×20 + 2×5 = 250px  ← 요청한 것보다 큼! */
```

`content-box`에서는 padding과 border가 `width` **위에 더해지므로**, 요소가 설정한 숫자보다 넓어집니다. 이는 레이아웃을 깨뜨립니다: padding이 있는 `width: 50%` 박스는 50%를 넘쳐 흐릅니다.

## 해결책: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* 렌더링된 너비 = 전체 200px. content가 150px로 줄어들어 공간을 만듦. */
```

`border-box`에서는 `width`가 **최종** 렌더링 너비입니다 — padding과 border가 안쪽에서 차감됩니다. 설정한 숫자가 곧 얻는 크기여서 훨씬 직관적입니다.

## 보편적인 리셋

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

거의 모든 최신 스타일시트, 프레임워크, 리셋이 이를 전역으로 적용합니다. 크기 조절을 예측 가능하게 만듭니다: `width: 50%` + padding이 정확히 50% 너비를 유지하고, 두 개의 `width: 50%` 박스가 넘침 없이 나란히 놓이는 식입니다.

## 왜 중요한가

`border-box`는 모든 너비에 padding과 border를 머릿속으로 더해야 하는, 가장 흔한 레이아웃 계산 골칫거리를 제거합니다.

전역으로 설정하는 것은 모범 사례 기본값으로 여겨지는데, "설정한 너비가 곧 얻는 너비"가 크기 조절이 자연스럽게 작동하기를 기대하는 방식이기 때문입니다.