박스 모델
웹의 모든 것은 박스입니다!
브라우저는 화면에 존재하는 모든 HTML 요소를 '사각형의 박스(Box)'로 인식하고 렌더링합니다. 이것이 바로 박스 모델(Box Model)입니다.
가운데의 실제 내용물(Content)을 중심으로 그 주위를 감싸는 안쪽 여백(Padding), 테두리 선(Border), 그리고 다른 요소들과의 간격을 띄워주는 바깥 여백(Margin)의 4가지 계층으로 이루어져 있습니다. 웹 레이아웃을 마음대로 주무르기 위해 가장 먼저 완벽히 이해해야 하는 핵심 개념입니다.
가운데의 실제 내용물(Content)을 중심으로 그 주위를 감싸는 안쪽 여백(Padding), 테두리 선(Border), 그리고 다른 요소들과의 간격을 띄워주는 바깥 여백(Margin)의 4가지 계층으로 이루어져 있습니다. 웹 레이아웃을 마음대로 주무르기 위해 가장 먼저 완벽히 이해해야 하는 핵심 개념입니다.
1. CSS 박스 모델의 4가지 영역
안쪽부터 바깥쪽으로 향하는 박스 모델의 계층 구조 다이어그램입니다.
| 영역 구분 | 역할 및 특징 |
|---|---|
| Content (콘텐츠) | 텍스트, 이미지, 비디오 등 실제 내용물이 들어가는 가장 핵심적인 안쪽 영역입니다. |
| Padding (패딩) | 콘텐츠와 테두리(Border) 사이의 안쪽 여백입니다. 요소에 적용된 배경색(Background)이 패딩 영역까지 채워집니다. |
| Border (테두리) | 패딩 밖을 감싸는 경계선입니다. 선의 두께, 스타일(실선, 점선 등), 색상을 지정할 수 있습니다. |
| Margin (마진) | 테두리 바깥에 존재하는 완전히 투명한 바깥 여백입니다. 나와 다른 요소 사이의 거리(간격)를 밀어내어 벌릴 때 사용합니다. (배경색이 적용되지 않습니다) |
실무 필수: box-sizing 설정
기본적으로 CSS에서 width: 100px;를 주면, 이는 오직 Content만의 너비를 의미합니다. 여기에 나중에 Padding(20px)이나 Border(5px)를 추가하면 전체 박스의 크기는 100 + 40(양쪽) + 10(양쪽) = 150px로 뚱뚱해져서 레이아웃이 박살 나게 됩니다!
따라서 실무에서는 항상 지정한 너비(width) 안에 Padding과 Border가 모두 포함되도록 강제하는 속성인 box-sizing: border-box;를 모든 요소 *에 전역으로 걸어두고 시작하는 것이 절대적인 불문율입니다.