브라우저가 HTML 요소를 사각형 박스로 처리하는 원리인 박스 모델(Box Model)의 구조와 크기 계산 방식을 분석한다.
박스 모델의 4대 구성 요소
모든 HTML 요소는 내부에서 외부로 향하는 4개의 층으로 이루어져 있다.
- Content: 텍스트나 이미지가 표시되는 실제 영역.
- Padding: 콘텐츠와 테두리 사이의 안쪽 여백.
- Border: 패딩을 감싸는 테두리 선.
- Margin: 테두리 밖의 바깥쪽 여백으로, 타 요소와의 간격을 결정한다.
크기 계산의 함정: box-sizing
기본값인 content-box에서는 설정한 width에 패딩과 테두리가 더해져 전체 크기가 커지는 문제가 발생한다.
이를 해결하기 위해 border-box를 주로 사용한다.
/* 1. 기본 방식: 전체 너비 = 200 + (20*2) + (5*2) = 250px */
.box-standard {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}
/* 2. 현대적 방식: 전체 너비를 200px로 고정 (패딩/테두리 포함) */
.box-modern {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
마진 상쇄 (Margin Collapsing) 현상
인접한 두 블록 요소의 상하 마진이 만날 때, 더 큰 마진 값으로 합쳐지는 현상이다.
레이아웃 설계 시 의도치 않은 간격 오류를 방지하기 위해 반드시 이해해야 한다.
P.S
박스 모델은 웹 레이아웃 설계의 가장 기초적인 물리 법칙이다.
box-sizing: border-box를 전역에 설정하는 습관은 레이아웃의 예측 가능성을 높이는 데 큰 도움이 되는 것 같다.
