박스 모델

🎯 학습 목표

이 강을 마치면 여러분은 CSS 배치의 가장 중요한 개념인 박스 모델을 이해하고, 요소의 여백과 경계선을 자유롭게 다룰 수 있게 됩니다. 앞으로 배울 모든 레이아웃(배치)의 토대가 바로 이 박스 모델이므로, 이번 강은 특히 중요합니다. 처음엔 헷갈릴 수 있지만, 여기만 확실히 잡으면 이후 배치가 훨씬 쉬워집니다.

구체적으로는 세 가지를 배웁니다. 첫째, 모든 요소가 상자라는 박스 모델의 개념을 이해합니다. 둘째, 안쪽 여백 padding·경계선 border·바깥 여백 margin을 익힙니다. 셋째, 크기 계산 방식을 바꾸는 box-sizing을 배웁니다.

📦 모든 것은 상자다 — 박스 모델

이 섹션에서는 박스 모델의 핵심 개념부터 살펴보겠습니다.

CSS에서 화면의 모든 요소는 하나의 사각형 상자로 취급됩니다. 우리가 문단이나 이미지, 버튼으로 보는 것들이 사실은 모두 보이지 않는 네모 상자 안에 담겨 있는 것입니다. 그리고 이 상자는 안에서 바깥으로 네 겹의 층으로 이루어져 있습니다.

가장 안쪽부터 순서대로 봅시다. 첫째, 콘텐츠(content)는 실제 글자나 이미지가 들어가는 알맹이 영역입니다. 둘째, 패딩(padding)은 콘텐츠와 경계선 사이의 안쪽 여백입니다. 셋째, 보더(border)는 상자를 두르는 경계선(테두리)입니다. 넷째, 마진(margin)은 이 상자와 다른 상자 사이의 바깥 여백입니다.

비유하자면 액자에 걸린 그림과 같습니다. 그림 자체가 콘텐츠, 그림과 액자 틀 사이의 여백이 패딩, 액자 틀이 보더, 그리고 이 액자와 옆 액자 사이의 간격이 마진입니다. 이 네 겹의 구조를 박스 모델이라 부릅니다. 이 개념을 머릿속에 그릴 수 있으면, 요소 사이의 간격을 자유자재로 조절할 수 있습니다.

🧱 안쪽 여백과 경계선 — padding과 border

이 섹션에서는 상자의 안쪽을 다루는 padding과 border를 살펴보겠습니다.

패딩은 콘텐츠 주위에 안쪽 공간을 만듭니다. 예를 들어 버튼 안의 글자가 테두리에 딱 붙지 않고 여유를 갖게 하는 것이 패딩입니다. 보더는 상자에 테두리 선을 그립니다.

.box {
  padding: 20px;
  border: 2px solid black;
}

여기서 padding: 20px;은 네 방향(위·아래·왼쪽·오른쪽) 모두 20픽셀의 안쪽 여백을 준다는 뜻입니다. border: 2px solid black;은 '2픽셀 두께의, 실선(solid) 스타일의, 검은색' 테두리를 뜻합니다. 이렇게 border는 두께·스타일·색을 한 줄에 적습니다.

여백은 방향별로 다르게 줄 수도 있습니다. 값을 여러 개 적으면 방향이 나뉩니다. padding: 10px 20px;은 '위아래 10px, 좌우 20px'을 뜻하고, padding-top: 10px;처럼 특정 방향만 지정할 수도 있습니다. 마진도 같은 방식으로 씁니다. 이런 축약 표기는 매우 자주 쓰이니, '값 하나면 사방 모두, 값 둘이면 위아래·좌우'라고 기억해 두면 좋습니다.

↔️ 바깥 여백 — margin

이 섹션에서는 상자와 상자 사이를 벌리는 margin을 살펴보겠습니다.

마진은 상자의 바깥쪽 여백으로, 이 요소와 주변 요소 사이의 간격을 만듭니다. 패딩이 '상자 안쪽 공간'이라면, 마진은 '상자 바깥쪽 공간'입니다. 이 구분이 박스 모델의 핵심입니다.

.box {
  margin: 30px;
}

이 코드는 상자의 사방에 30픽셀의 바깥 여백을 주어, 주변 요소들과 30픽셀씩 떨어지게 합니다. 마진에는 유용한 활용법이 하나 있습니다. 좌우 마진을 auto로 주면 요소가 가로 가운데로 정렬됩니다.

.box {
  width: 300px;
  margin: 0 auto;
}

여기서 margin: 0 auto;는 '위아래 마진 0, 좌우 마진 auto'라는 뜻입니다. 좌우를 auto로 두면 남는 공간이 양옆에 똑같이 배분되어, 정해진 너비의 상자가 화면 가운데로 옵니다. 요소를 가운데 놓는 고전적이고 유용한 방법이니 기억해 두세요. 정리하면, 안쪽 간격은 padding, 바깥쪽 간격은 margin입니다.

📐 크기 계산의 함정 — box-sizing

이 섹션에서는 초보자를 가장 혼란스럽게 하는 크기 계산 문제와 그 해결책 box-sizing을 살펴보겠습니다.

여기 함정이 있습니다. 상자에 width: 300px;을 주고 패딩과 보더를 더하면, 상자의 실제 너비는 어떻게 될까요? 기본 설정에서는 놀랍게도 300px보다 커집니다. 왜냐하면 기본값(content-box)에서 width는 콘텐츠 영역만의 너비를 뜻하고, 여기에 패딩과 보더가 바깥으로 더해지기 때문입니다. 예를 들어 width 300px에 좌우 패딩 20px, 좌우 보더 2px이면 실제 너비는 300+40+4=344px이 됩니다. 이 때문에 '분명히 300으로 줬는데 왜 더 크지?'라며 혼란에 빠지기 쉽습니다.

이 문제를 해결하는 것이 box-sizing 속성입니다. 값을 border-box로 바꾸면, width가 패딩과 보더를 포함한 전체 너비를 뜻하게 됩니다.

* {
  box-sizing: border-box;
}

이렇게 하면 width: 300px이 곧 보이는 상자의 최종 너비 300px이 되어, 패딩·보더를 넣어도 크기가 그대로 유지됩니다. 훨씬 직관적이지요. 그래서 실무에서는 위 코드처럼 모든 요소(*)에 border-box를 적용하는 것을 거의 기본으로 삼습니다. 여기서 *는 '모든 요소'를 뜻하는 전체 선택자입니다. 이 한 줄을 CSS 맨 위에 넣어 두면 크기 계산이 예측 가능해져, 레이아웃이 한결 수월해집니다.

⚠️ 자주 하는 실수

이 섹션에서는 박스 모델을 다룰 때 흔한 실수를 정리하겠습니다.

첫 번째, padding과 margin을 혼동하는 것입니다. 안쪽 여백은 padding, 바깥쪽 여백은 margin입니다. 간격이 생각과 다르게 나온다면 둘을 바꿔 쓴 것은 아닌지 확인하세요.

두 번째, box-sizing을 설정하지 않아 크기가 어긋나는 것입니다. 너비를 정확히 줬는데 자꾸 커진다면, 십중팔구 기본값 content-box 때문입니다. CSS 맨 위에 * { box-sizing: border-box; }를 넣는 습관을 들이세요.

세 번째, margin의 auto를 세로 가운데로 착각하는 것입니다. margin: 0 auto;는 가로 가운데 정렬만 됩니다. 세로 가운데 정렬은 다른 방법(뒤에 배울 Flexbox 등)이 필요하니 혼동하지 마세요.

📝 핵심 요약

이번 강에서는 박스 모델을 배웠습니다.

• 박스 모델 — 모든 요소는 상자이며, 안에서 밖으로 콘텐츠 → 패딩 → 보더 → 마진의 네 겹으로 이루어집니다.
• padding과 border — 패딩은 안쪽 여백, 보더는 테두리(두께·스타일·색)입니다. 여백은 값 개수로 방향을 조절합니다.
• margin — 바깥 여백으로 요소 간 간격을 만들며, margin: 0 auto로 가로 가운데 정렬을 합니다.
• box-sizing — border-box로 바꾸면 width가 패딩·보더를 포함해 크기 계산이 직관적이 되며, 보통 모든 요소에 적용합니다.

이제 요소의 여백과 크기를 이해했습니다. 다음 강에서는 요소들이 화면에 어떻게 배치되는지를 결정하는 display 속성과 기본 배치 원리를 배워, 본격적인 레이아웃의 문을 열겠습니다. 다음 강 「display와 배치」에서 이어가겠습니다.

📚 참고 자료

• 박스 모델 — MDN Web Docs
• box-sizing — MDN Web Docs
• margin — MDN Web Docs