CSS 박스 모델(Box Model) 완벽 이해하기

CSS를 제대로 배우기 위해 가장 먼저 이해해야 할 개념 중 하나가 바로 **박스 모델(Box Model)**입니다. 웹페이지의 모든 요소는 기본적으로 사각형 박스로 구성되며, 이 박스는 몇 가지 구성 요소로 이루어져 있어요. 이 글에서는 CSS 박스 모델이 무엇이고, 어떻게 동작하는지 쉽게 설명해드릴게요!

---

🧱 박스 모델이란?

CSS 박스 모델은 웹 요소가 화면에 어떻게 표시되고 크기가 어떻게 결정되는지를 정의하는 개념입니다. 모든 요소는 다음과 같은 구조를 가진 하나의 "박스"로 이해할 수 있어요:

1. Content (콘텐츠)
   텍스트, 이미지, 비디오 등 실제 콘텐츠가 들어가는 부분입니다. width와 height 속성으로 이 영역의 크기를 조정할 수 있어요.
2. Padding (패딩)
   콘텐츠와 테두리(border) 사이의 내부 여백입니다. 패딩은 요소 내부에 있는 공간으로, 눈에는 보이지 않지만 중요한 역할을 해요.
3. Border (테두리)
   요소를 감싸는 경계선입니다. border 속성으로 색상, 두께 등을 조절할 수 있어요. 패딩 다음에 오는 구조입니다.
4. Margin (마진)
   요소 바깥의 여백입니다. 다른 요소들과의 간격을 만들 때 사용돼요. 마진은 요소 외부 공간이기 때문에 크기 계산에 포함되지 않습니다.

---

🎨 시각적 이해를 돕는 예시

실생활의 액자(프레임)로 비유해보면:

• 그림 = 콘텐츠
• 그림과 액자 사이 흰 여백 = 패딩
• 액자 테두리 = 보더
• 벽에 걸린 액자 간 거리 = 마진

이렇게 비유하면, 각 구성 요소의 역할이 더 명확하게 느껴질 거예요.

---

🧮 실제 크기는 어떻게 계산될까?

박스 모델의 기본 설정에서는, 요소의 실제 너비는 다음과 같이 계산됩니다:

복사편집

실제 너비 = 왼쪽 border + 왼쪽 padding + 콘텐츠 너비 + 오른쪽 padding + 오른쪽 border

높이도 동일한 방식으로 계산돼요. 마진은 여기에 포함되지 않습니다.

---

🔧 기본 동작은 바꿀 수 있다!

기본 박스 모델은 위와 같은 방식으로 크기를 계산하지만, box-sizing: border-box 속성을 사용하면 border와 padding을 포함한 전체 너비를 지정할 수도 있어요. 이 방식은 더 직관적이라 많은 개발자들이 선호합니다. 나중에 배우게 될 테니, 우선은 기본 개념만 잘 익혀두세요!