📦
EPISODE 03
content · padding · border · margin · box-sizing
박스 모델
CSS의 모든 요소가 박스 형태로 렌더링되는 원리(content/padding/border/margin), box-sizing의 차이, display 속성과 margin 겹침 현상을 익힙니다.
CSSbox modelpaddingmargin
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 css-02
결과물
정확한 크기 계산으로 깔끔하게 정렬된 카드 컴포넌트
이 강의에서 배우는 것
- 1박스 모델 4단계(content/padding/border/margin)를 구별한다
- 2box-sizing: border-box를 적용해 크기 계산을 단순화한다
- 3width/max-width/min-height의 차이를 안다
- 4overflow와 display 속성을 적절히 사용한다
- 5margin 겹침 현상의 원인과 해결을 안다
1. 박스 모델 4단계
text
┌─────────────────────────────────┐
│ margin (바깥 여백) │
│ ┌───────────────────────────┐ │
│ │ border (테두리) │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding (안쪽 여백) │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ content (내용) │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘css
div {
width: 200px;
height: 100px;
padding: 10px 20px; /* 상하 10, 좌우 20 */
border: 2px solid #333;
border-radius: 8px;
margin: 20px auto; /* 상하 20, 좌우 auto(중앙) */
}2. box-sizing
css
/* content-box (기본): width = content만 */
.default {
width: 200px;
padding: 20px;
border: 2px solid;
/* 실제 크기 = 200 + 40 + 4 = 244px */
}
/* border-box: width = content + padding + border */
.better {
width: 200px;
padding: 20px;
border: 2px solid;
box-sizing: border-box;
/* 실제 크기 = 항상 200px */
}💡
실무에서는 * { box-sizing: border-box; }로 전체에 적용하는 게 표준입니다.
3. width / max-width
css
.container {
width: 100%;
max-width: 1200px; /* 반응형 필수 */
height: auto;
min-height: 100vh;
}4. overflow
css
.box {
overflow: visible; /* 기본: 밖으로 튀어나옴 */
overflow: hidden; /* 잘라냄 */
overflow: scroll; /* 항상 스크롤바 */
overflow: auto; /* 필요할 때만 (권장) */
}5. display
css
display: block; /* div, p, h1~h6 기본 */
display: inline; /* span, a, strong 기본 */
display: inline-block; /* img, button 기본 */
display: none; /* 화면에서 완전히 제거 */6. margin 겹침 현상
css
.first { margin-bottom: 30px; }
.second { margin-top: 20px; }
/* 실제 간격: 30px (50px가 아님!) */세로 방향 인접 두 요소의 margin은 더해지지 않고 큰 쪽만 적용됩니다. padding 사용 / 부모에 overflow:hidden / Flexbox·Grid 사용 등으로 회피.