박스 모델

1. 박스 모델이란

HTML의 모든 요소는 사각형 박스로 이루어져 있습니다. CSS는 이 박스의 4개 구성 레이어를 각각 제어합니다.

┌─────────────────── margin (바깥 여백) ───────────────────┐
│  ┌─────────────── border (테두리) ───────────────────┐   │
│  │  ┌─────────── padding (안쪽 여백) ─────────────┐  │   │
│  │  │                                              │  │   │
│  │  │           content (실제 내용)                │  │   │
│  │  │           width × height                    │  │   │
│  │  │                                              │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

레이어	역할	CSS 속성
content	글자·이미지 등 실제 내용이 들어가는 영역	width, height
padding	content와 border 사이의 내부 여백	padding, padding-top 등
border	요소의 테두리	border, border-radius
margin	요소 밖의 바깥 여백 — 다른 요소와의 간격	margin, margin-auto

2. padding과 margin 단축 표기법

/* 4방향 개별 지정 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* 단축 표기 — 시계방향 (top right bottom left) */
padding: 10px 20px 10px 20px;

/* 위아래 / 좌우 */
padding: 10px 20px;

/* 4방향 동일 */
padding: 16px;

/* margin도 동일 규칙 */
margin: 0 auto;  ← 위아래 0, 좌우 자동(가운데 정렬)

/* 개별 방향만 */
margin-top: 24px;
margin-bottom: 8px;

3. box-sizing: border-box — 가장 중요한 CSS 설정

기본값 content-box에서는 width가 content 영역만의 크기입니다. padding과 border를 더하면 실제 크기가 늘어납니다.

/* content-box (기본값 — 혼란 유발) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 실제 화면에 차지하는 너비: 200 + 20*2 + 2*2 = 244px */
}

/* border-box (권장 — 직관적) */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 실제 화면에 차지하는 너비: 정확히 200px */
}

/* 모든 요소에 border-box 적용 (프로젝트 최상단에 추가) */
*, *::before, *::after {
  box-sizing: border-box;
}

모든 프로젝트 CSS 파일 첫 줄에 *, *::before, *::after { box-sizing: border-box; }를 추가하는 것이 현대 웹 개발의 표준입니다.

4. border 스타일링

/* 단축 표기: 두께 스타일 색상 */
border: 1px solid #e5e7eb;
border: 2px dashed red;
border: 3px dotted blue;

/* 개별 방향 */
border-bottom: 2px solid #6366f1;  /* 하단만 */
border-top: none;                   /* 상단 없음 */

/* 둥근 모서리 */
border-radius: 8px;          /* 전체 동일 */
border-radius: 50%;          /* 원형 (정사각형에 적용 시) */
border-radius: 12px 0 12px 0; /* 대각선 패턴 */
border-top-left-radius: 20px; /* 개별 모서리 */

/* 그림자 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* 수평오프셋 수직오프셋 블러반경 확산반경 색상 */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* 내부 그림자 */

5. margin 겹침(Collapsing) 현상

블록 요소의 위아래 margin은 더해지지 않고 큰 값 하나만 적용되는 겹침 현상이 발생합니다.

/* 기대: p들 사이 20+16=36px 간격 */
/* 실제: max(20, 16) = 20px 간격 (겹침 발생!) */
p { margin-bottom: 20px; }
h2 { margin-top: 16px; }

/* 해결 방법: margin을 한 방향만 사용 */
p { margin-bottom: 20px; }
/* h2에는 margin-top 사용하지 않음 */

/* 또는 padding으로 대체 */
.section { padding-top: 32px; }

6. width, height, max-width, overflow

/* 중앙 정렬 컨테이너 패턴 */
.container {
  max-width: 1200px;   /* 최대 너비 제한 */
  margin: 0 auto;      /* 좌우 자동 여백 = 가운데 정렬 */
  padding: 0 20px;     /* 좌우 안쪽 여백 (모바일 여백) */
}

/* 이미지 반응형 */
img {
  max-width: 100%;     /* 부모 너비 초과 금지 */
  height: auto;        /* 비율 유지 */
}

/* 넘치는 내용 처리 */
.card {
  overflow: hidden;    /* 넘친 내용 숨김 */
  overflow: scroll;    /* 스크롤바 항상 표시 */
  overflow: auto;      /* 넘칠 때만 스크롤바 (권장) */
  overflow-x: hidden;  /* 가로만 숨김 */
}

/* 텍스트 줄임표 (...) */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

관련 검색어  ·  CSS박스모델, box-sizing borderbox, margin padding차이, border-radius, box-shadow, margin겹침, CSS중앙정렬