이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ Content / Padding / Border / Margin 4영역
• ▸✅ box-sizing: border-box 가 표준인 이유
• ▸✅ Margin Collapsing 해결 패턴

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

핵심 한 줄

HTML 의 모든 요소는 사각형 상자 로 그려집니다. 그 상자는 4 겹의 동심원 구조: content - padding - border - margin.

        ┌─────── margin ───────┐
        │   ┌─── border ────┐   │
        │   │  ┌─ padding ─┐ │   │
        │   │  │ content  │ │   │
        │   │  └──────────┘ │   │
        │   └────────────────┘   │
        └────────────────────────┘

각 영역의 의미

• ▸content — 실제 내용 (텍스트·이미지)
• ▸padding — content 와 border 사이 여백. 안쪽 공간
• ▸border — 테두리
• ▸margin — 다른 요소와의 간격. 바깥 공간

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid gray;
    margin: 10px;
}

가장 헷갈리는 — width 의 진짜 의미

기본 box-sizing 인 content-box 에서:

.card {
    width: 300px;      /* content 만 300 */
    padding: 20px;      /* 좌우 20씩 = 40 추가 */
    border: 2px;        /* 좌우 2씩 = 4 추가 */
}
/* 실제 차지하는 너비: 300 + 40 + 4 = 344px */

width: 300px 이라고 했는데 실제로는 344px 을 차지합니다. 직관과 다르죠.

border-box — 직관적인 방식

*, *::before, *::after {
    box-sizing: border-box;
}

.card {
    width: 300px;      /* border 포함 300 */
    padding: 20px;     /* 포함됨 */
    /* 실제 차지: 정확히 300px */
}

현대 CSS 의 표준 — 모든 프로젝트가 box-sizing: border-box 부터 시작합니다. width 가 진짜 width.

margin 의 함정 2가지

1. 세로 margin 병합 (collapsing):

<div style="margin-bottom: 30px;">A</div>
<div style="margin-top: 20px;">B</div>

세로 margin 은 큰 값으로 통합. A 와 B 사이 50px 아닌 30px.

2. 인라인 요소엔 세로 margin X:

span { margin: 20px; }   /* 좌우만 적용, 위아래는 무시 */

인라인 (<span>·<a>) 에 위아래 margin 안 됨. display: inline-block 으로 바꿔야.

한 번 정리

• ▸모든 요소 = 4겹 상자 (content·padding·border·margin)
• ▸box-sizing: border-box 가 모던 표준
• ▸margin 은 외부 간격, padding 은 내부 여백
• ▸세로 margin 병합·인라인 한계 주의

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 카드 컴포넌트의 padding/margin 을 box-sizing: border-box 기반으로 정리해줘"
• ▸"이 레이아웃의 collapsing margin 문제 해결해줘"
• ▸"이 요소들이 viewport 가득 차도록 height: 100vh + overflow 처리해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.