CSS 박스 모델의 구조와 box-sizing 속성의 차이를 설명해 주시겠어요?

이렇게 답해 보세요 (핵심 답변)

CSS 박스 모델은 안쪽부터 콘텐츠(content), 안쪽 여백(padding), 테두리(border), 바깥 간격(margin)의 네 영역으로 구성됩니다. 기본값인 box-sizing: content-box에서는 선언한 width와 height가 순수 콘텐츠 영역의 크기만 뜻하므로, padding과 border를 더하면 실제 박스 외곽 크기가 그보다 커집니다. 반면 box-sizing: border-box를 지정하면 선언한 width와 height 안에 콘텐츠뿐 아니라 padding과 border까지 함께 포함되어 레이아웃 크기를 직관적으로 계산할 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 너비를 100%로 준 입력창이나 카드에 padding과 border를 넣을 때 border-box를 쓰면 부모 너비를 넘어 가로 스크롤이 생기는 문제를 막기 쉽습니다.
2. border-box를 쓰더라도 바깥 간격인 margin은 여전히 지정한 width 바깥에 별도로 더해지므로 전체 배치 간격을 계산할 때 따로 챙겨야 합니다.

면접에서 자주 하는 실수

box-sizing: border-box가 테두리 바깥의 margin 영역까지 width 안에 포함해 준다고 잘못 설명하지 않도록 주의합니다.