박스 모델 (Box Model)
📦 웹의 모든 것은 박스입니다!
브라우저는 모든 HTML 요소를 사각형 박스로 처리합니다. 이를 박스 모델이라고 합니다.
Margin (바깥 여백)
Border (테두리)
Padding (안쪽 여백)
Content (실제 내용)
💡 실무 필수: box-sizing
기본적으로 박스의 width는 Content만의 넓이입니다. 여기에 Padding과 Border를 추가하면 박스가 지정한 너비보다 뚱뚱해져서 레이아웃이 깨지기 쉽습니다.
그래서 실무에서는 항상 box-sizing: border-box;를 적용하여 지정한 너비 안에 Padding과 Border가 모두 포함되도록 설정합니다!
<div class="box-model-demo">
박스 모델 영역
</div>