3. 📦 박스 모델(Box Model)과 레이아웃의 기본 — margin, padding, border 완벽 정리

 

---

CSS의 본질은 박스를 다루는 기술이다.
텍스트, 이미지, 버튼, 섹션 — 전부 하나의 ‘박스’로 구성되어 있다.

이번 글에서는 박스 모델(Box Model) 의 개념부터
margin, padding, border의 관계, 그리고 실무에서의 레이아웃 활용법까지
한눈에 이해할 수 있도록 정리했다.

---

💡 1. 박스 모델(Box Model)이란?

“모든 HTML 요소는 눈에 보이지 않아도 하나의 상자(Box)다.”

브라우저는 HTML 요소를 박스 형태의 레이어로 렌더링한다.
이 박스는 네 부분으로 구성된다 👇

┌─────────────────────────────┐  ← margin (바깥 여백) 
│ ┌─────────────────────────┐ │ 
│ │  border (테두리)       │ │ 
│ │ ┌─────────────────────┐ │ │ 
│ │ │  padding (내부 여백)│ │ │ 
│ │ │ ┌─────────────────┐ │ │ │ 
│ │ │ │ content (내용)  │ │ │ │ 
│ │ │ └─────────────────┘ │ │ │ 
│ │ └─────────────────────┘ │ │ 
│ └─────────────────────────┘ │ 
└─────────────────────────────┘ 

구성 요소 설명 예시 속성

content	실제 콘텐츠 (텍스트, 이미지 등)	width, height
padding	콘텐츠와 테두리 사이 여백	padding: 10px;
border	요소의 테두리 영역	border: 1px solid black;
margin	요소와 이웃 요소 사이의 여백	margin: 20px;

---

🧩 2. 실제 코드로 보는 박스 구조

<div class="box">박스 모델 예제</div> 

.box { 
  width: 200px; 
  height: 100px; 
  padding: 20px; 
  border: 5px solid royalblue; 
  margin: 30px; 
  background-color: skyblue; 
} 

✅ 총 박스 크기 계산:
width(200) + padding(20*2) + border(5*2) = 250px

💡 즉, CSS의 width는 content만의 크기를 의미한다.

---

⚙️ 3. box-sizing 속성 — 실무의 핵심

“box-sizing은 박스 크기를 계산하는 방식을 결정한다.”

값 설명

content-box (기본값)	width에 padding, border 미포함
border-box	width에 padding, border 포함

/* 기본값 (content-box) */ 
.box1 { 
  width: 200px; 
  padding: 20px; 
  border: 5px solid; 
} 
 
/* border-box 적용 */ 
.box2 { 
  box-sizing: border-box; 
  width: 200px; 
  padding: 20px; 
  border: 5px solid; 
} 

💬 border-box는 실무 표준이다.
레이아웃이 깨지지 않고, 총 박스 크기를 계산하기 쉬워진다.

👉 대부분의 개발자는 아래처럼 기본 설정을 추가한다.

* { 
  box-sizing: border-box; 
} 

---

🧱 4. margin (바깥 여백)

요소와 요소 사이의 간격을 조절한다.

.box { 
  margin: 20px; 
} 

속성 의미

margin-top	위쪽 여백
margin-right	오른쪽 여백
margin-bottom	아래 여백
margin-left	왼쪽 여백

💡 단축 속성:

margin: 10px 20px 30px 40px; 
/* 위 → 오른쪽 → 아래 → 왼쪽 순서 */ 

---

📌 margin 겹침(Margin Collapse) 현상

인접한 두 블록 요소의 margin이 겹칠 경우,
둘 중 더 큰 값만 적용된다.

h1 { margin-bottom: 30px; } 
p { margin-top: 20px; } 
/* 실제 간격은 50px이 아니라 30px */ 

💬 해결법:
1️⃣ 부모에 padding 또는 border 추가
2️⃣ overflow: hidden; 적용

---

🧩 5. padding (내부 여백)

요소의 내용(content) 과 테두리(border) 사이의 공간을 만든다.

.box { 
  padding: 20px; 
} 

속성 의미

padding-top	위 여백
padding-right	오른쪽 여백
padding-bottom	아래 여백
padding-left	왼쪽 여백

💡 padding은 배경색(background-color)이 적용되는 영역까지 포함된다.

---

🧱 6. border (테두리)

요소의 경계를 표시하며, 세 가지 속성을 함께 쓴다.

.box { 
  border: 3px solid crimson; 
} 

속성 설명 예시

border-width	두께	2px
border-style	스타일	solid, dashed, dotted
border-color	색상	#000, red

---

🎨 border 개별 설정

border-top: 2px solid red; 
border-right: none; 
border-bottom: 2px dashed gray; 

✅ 테두리를 부분적으로 다르게 적용 가능.

---

🧮 7. width / height 이해하기

속성 설명

width	콘텐츠 영역의 가로 길이
height	콘텐츠 영역의 세로 길이
max-width / max-height	최대 크기 제한
min-width / min-height	최소 크기 제한

💡 반응형에서는 width: 100%; 대신
max-width: 1200px; margin: 0 auto; 패턴을 자주 사용한다.

---

🧠 8. display 속성으로 박스 성격 정의

“모든 HTML 요소는 display에 따라 다르게 배치된다.”

값 설명

block	줄바꿈 발생, width 100%
inline	줄바꿈 없음, width 지정 불가
inline-block	줄바꿈 없음 + 크기 지정 가능
none	화면에서 숨김

💬 display는 박스의 배치 성격을 결정하는 핵심 속성이다.

---

📐 9. margin, padding, border 실전 예제

<div class="card"> 
  <h3>HTML & CSS 강의</h3> 
  <p>박스 모델을 이해하면 레이아웃이 쉬워집니다.</p> 
</div> 

.card { 
  background: white; 
  border: 1px solid #ddd; 
  padding: 20px; 
  margin: 30px auto; 
  width: 300px; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
} 

💡 실무에서 카드형 UI는 전부 박스 모델 기반 디자인이다.

---

⚡ 10. 실무 팁 요약

상황 추천 설정

전체 페이지 기본값 통일	* { box-sizing: border-box; }
카드형, 섹션 여백 조정	margin 대신 padding으로 내부 공간 확보
반응형 폭 제한	max-width + margin: 0 auto
요소 간 정렬	display: inline-block or Flexbox 사용

---

🏁 11. 마무리 — “박스를 이해하면 CSS가 단순해진다”

HTML 요소는 모두 상자다.
이 단순한 사실을 이해하면
복잡한 CSS 레이아웃도 결국 margin, padding, border의 조합으로 풀린다.

💬 “CSS의 시작과 끝은 박스 모델이다.”

다음 편에서는
✅ 4. Flexbox 완전 이해하기 — 가로·세로 정렬 스트레스 탈출
을 통해 레이아웃의 핵심인 유연한 정렬 시스템을 배워보자.

---