box-sizing: border-box를 써야 하는 이유

box-sizing: border-box를 써야 하는 이유에서 먼저 볼 부분

box-sizing은 요소의 너비 계산 방식을 정합니다. border-box를 쓰면 width 안에 padding과 border가 포함되어 레이아웃을 예측하기 쉬워집니다.

초보자가 CSS에서 자주 겪는 문제 중 하나는 width를 100%로 줬는데도 화면 밖으로 요소가 튀어나가는 현상입니다. 기본 계산 방식에서는 width에 padding과 border가 더해질 수 있기 때문에 실제 박스가 생각보다 커집니다.

border-box는 지정한 width 안에 content, padding, border를 함께 포함합니다. 그래서 카드 너비를 320px로 정했다면 padding을 넣어도 전체 박스는 320px 안에서 유지됩니다.

웹사이트 전체에 * { box-sizing: border-box; }를 적용하는 경우가 많은 이유도 이 때문입니다. 모든 요소가 같은 방식으로 크기를 계산하면 그리드, 카드, 입력창, 버튼의 크기 예측이 쉬워집니다.

다만 margin은 border-box 계산에 포함되지 않습니다. 요소 바깥 간격은 여전히 따로 계산되므로 가로 스크롤이 생긴다면 width, padding, border뿐 아니라 margin도 함께 확인해야 합니다.

같은 너비에서 padding을 넣는 예

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #d8e0e8;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

box-sizing: border-box를 써야 하는 이유 비교 기준

잘못 작성했을 때 나타나는 흐름

CSS 글은 속성 하나만 외우기보다 부모 요소와 자식 요소의 관계를 같이 확인하는 방식으로 읽는 것이 좋습니다.

스타일이 적용되지 않을 때는 개발자 도구에서 어떤 규칙이 취소선 처리되는지 먼저 보면 원인을 빠르게 좁힐 수 있습니다.

모바일 화면에서는 고정 너비, 긴 코드, margin 조합이 문제를 만들기 쉬우므로 작은 화면 기준까지 함께 확인해야 합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• width 100% 요소에 padding이 함께 있는지 확인하기
• 공통 CSS에 box-sizing 설정이 있는지 확인하기
• 가로 스크롤이 생기면 margin까지 함께 보기
• 컴포넌트 단위보다 전체 기본값으로 적용하기