웹 개발할 때 width와 padding을 설정하면 예상과 다르게 레이아웃이 깨지는 경우가 많다.
예를 들어, 다음과 같이 스타일을 지정했다고 가정해보자.

.box {
  width: 200px;
  padding: 50px;
  border: 10px solid black;
}

이 경우 .box의 실제 너비는 얼마일까?
보통 200px - 50px(좌) - 50px(우) = 100px이 될 거라고 생각할 수도 있지만,
실제로는 width가 컨텐츠 영역(content box)만을 의미하기 때문에 아래처럼 계산된다.

200px (content) + 50px (left padding) + 50px (right padding)
+ 10px (left border) + 10px (right border)
= 320px

즉, padding과 border가 width에 포함되지 않기 때문에 원하는 크기보다 커지는 문제가 발생한다.

box-sizing: border-box;로 해결!

이 문제를 해결하려면 box-sizing: border-box;를 적용하면 된다.

.box {
  width: 200px;
  padding: 50px;
  border: 10px solid black;
  box-sizing: border-box;
}

이렇게 설정하면 width: 200px;이 padding과 border까지 포함한 크기가 된다.
즉, 전체 너비가 200px을 유지하면서 내부 content 크기가 자동으로 조절된다.
계산 방식은 다음과 같다.

200px (전체 박스 크기) - 10px (left border) - 10px (right border)
- 50px (left padding) - 50px (right padding)
= 80px (content 영역 크기)

즉, box-sizing: border-box;를 적용하면 요소의 총 크기가 예상한 대로 정확하게 유지된다.

모든 요소에 border-box 적용하기

웹사이트 전체에 box-sizing: border-box;를 적용하면
레이아웃을 훨씬 더 쉽게 다룰 수 있다

* {
  box-sizing: border-box;
}

이렇게 하면 모든 요소의 width가 padding과 border를 포함한 크기로 설정된다.
즉, 요소 크기를 계산할 때 더 이상 padding과 border를 따로 신경 쓸 필요가 없다.

border-box를 사용하면 좋은 점

1. 레이아웃이 예측 가능

• width를 설정할 때 padding과 border까지 포함해서 크기를 조절할 수 있음.
• 요소가 원하지 않게 커지는 문제를 방지할 수 있음.

2. 디자인할 때 편리함

• padding을 변경해도 전체 크기가 유지되므로, UI를 정리하기 쉬움.

3. 반응형 디자인에 유리함

• 요소의 크기를 일정하게 유지하면서 padding을 조정할 수 있음.
• 다양한 화면 크기에서도 디자인이 쉽게 깨지지 않음.

정리

결론: box-sizing: border-box;를 사용하면 예상한 크기를 유지할 수 있다!
앞으로 box-sizing: border-box;를 적용해서 더 직관적인 CSS 레이아웃을 만들어보자! 🚀