모든 HTML 요소는 '박스'다#
웹 페이지를 만들다 보면 "왜 이 요소가 저기 있지?", "왜 간격이 이상하지?" 같은 문제를 자주 겪습니다. 이 문제의 80%는 박스 모델(Box Model) 을 이해하면 해결됩니다.
CSS에서 모든 HTML 요소는 사각형 박스로 취급됩니다.
박스 모델의 4개 층#
Text
┌─────────────────────────────────┐
│ margin (바깥 여백) │
│ ┌───────────────────────────┐ │
│ │ border (테두리) │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding (안 여백) │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ (실제 내용) │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
| 층 | 역할 |
|---|---|
| content | 텍스트, 이미지 등 실제 내용 |
| padding | 내용과 테두리 사이 안쪽 여백 |
| border | 테두리 선 |
| margin | 이 요소와 다른 요소 사이 바깥 여백 |
padding — 안쪽 여백#
CSS
.box {
padding: 20px; /* 네 방향 모두 20px */
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
padding: 10px 20px 15px 5px; /* 위 오른쪽 아래 왼쪽 (시계 방향) */
}
/* 방향별로 따로 설정 */
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}padding은 배경색이 적용됩니다. 텍스트와 테두리 사이에 숨 쉴 공간을 만들어줍니다.
CSS
/* 버튼에 padding을 주면 클릭 영역이 넓어집니다 */
button {
padding: 10px 24px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 6px;
}margin — 바깥 여백#
CSS
.card {
margin: 20px; /* 네 방향 모두 20px */
margin: 0 auto; /* 위아래 0, 좌우 자동 → 가운데 정렬! */
margin-bottom: 32px; /* 아래쪽만 32px */
}margin: 0 auto — 블록 요소 가운데 정렬#
CSS
.container {
width: 800px;
margin: 0 auto; /* 남은 좌우 공간을 반반 나눠 가운데 정렬 */
}이 패턴은 페이지 콘텐츠를 가운데 정렬할 때 매우 자주 씁니다.
마진 겹침 (Margin Collapsing)#
세로 방향으로 인접한 두 요소의 margin은 겹칩니다.
CSS
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 실제 간격: 50px이 아니라 30px (더 큰 쪽만 적용) */border — 테두리#
CSS
.box {
border: 2px solid #333; /* 굵기 스타일 색상 */
border: 1px dashed #ccc; /* 점선 */
border: 3px dotted red; /* 도트 선 */
}
/* 방향별 테두리 */
.underline-only {
border-bottom: 2px solid #0070f3;
}
/* 둥근 테두리 */
.card {
border: 1px solid #e0e0e0;
border-radius: 8px; /* 모서리 둥글게 */
}
.circle {
border-radius: 50%; /* 완전 원형 */
}box-sizing — 크기 계산 방식#
박스 모델에서 가장 헷갈리는 부분입니다.
CSS
/* 기본값: content-box */
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
/* 실제 차지하는 너비: 200 + 20*2 + 2*2 = 244px */
}width: 200px을 줬는데 실제로는 244px을 차지합니다. 계산이 복잡하죠.
border-box로 해결#
CSS
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
/* 실제 차지하는 너비: 정확히 200px! */
/* content 너비가 자동으로 줄어듦 */
}border-box는 padding과 border를 width 안에 포함시킵니다. 훨씬 직관적입니다.
모든 요소에 적용하기 (권장)#
CSS
* {
box-sizing: border-box;
}거의 모든 프로젝트에서 이 한 줄을 가장 먼저 씁니다.
실전 예시: 카드 컴포넌트#
CSS
* {
box-sizing: border-box;
}
.card {
width: 300px;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden; /* 둥근 모서리 밖으로 삐져나오지 않게 */
margin-bottom: 24px;
}
.card-image {
width: 100%;
height: 160px;
object-fit: cover;
}
.card-body {
padding: 16px 20px 20px;
}
.card-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
}
.card-text {
margin: 0;
color: #666;
line-height: 1.6;
}개발자 도구로 박스 모델 확인하기#
브라우저에서 요소를 우클릭 → 검사(Inspect) → Elements 탭 아래쪽에 박스 모델 시각화가 나타납니다.
- 주황색: margin
- 녹색: padding
- 파란색: content
실제 개발에서 레이아웃이 이상할 때 여기서 확인하면 바로 원인을 찾을 수 있습니다.
직접 해보기 ✏️#
HTML
<div class="container">
<div class="card">
<h2>카드 제목</h2>
<p>카드 설명 텍스트입니다.</p>
<button>자세히 보기</button>
</div>
<div class="card">
<h2>두 번째 카드</h2>
<p>두 번째 카드 내용입니다.</p>
<button>자세히 보기</button>
</div>
</div>목표:
* { box-sizing: border-box; }를 가장 먼저 적용.container는 너비 800px, 가운데 정렬.card는 padding 20px, border 1px, border-radius 8px, margin-bottom 20pxbutton은 padding 8px 16px, 배경색, 둥근 모서리
정리#
| 속성 | 역할 |
|---|---|
padding | 내용과 테두리 사이 안쪽 여백 |
margin | 요소 바깥쪽 여백 |
margin: 0 auto | 블록 요소 가운데 정렬 |
border | 테두리 선 |
border-radius | 모서리 둥글게 |
box-sizing: border-box | width에 padding·border 포함 |
다음 편에서는 현대 웹 레이아웃의 핵심인 Flexbox 를 배웁니다.
