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

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

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

핵심 한 줄

Flexbox = 한 방향 (가로 또는 세로) 으로 유연하게 정렬 하는 CSS 도구. 2015 년 표준화 이후 현대 CSS 레이아웃의 주류. 옛 float·table 시대 끝.

기본 사용

.container {
    display: flex;           /* flex 시작 */
    gap: 16px;               /* 자식 사이 간격 */
}

<div class="container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

A·B·C 가 가로로 일렬 정렬됩니다. 직관적이고 깔끔.

두 축 — main vs cross

                 main axis →
              ┌────────────────┐
       cross  │  ┌─┐ ┌─┐ ┌─┐  │
        axis  │  │A│ │B│ │C│  │
          ↓   │  └─┘ └─┘ └─┘  │
              └────────────────┘

• ▸main axis — 주 방향 (기본 가로)
• ▸cross axis — 수직 방향

flex-direction: column 으로 세로 로 바꿀 수도 있습니다.

정렬 — 2가지만 외우면 끝

.container {
    display: flex;
    justify-content: center;    /* main 축 정렬 (가로) */
    align-items: center;        /* cross 축 정렬 (세로) */
}

값 5가지 (justify-content):

• ▸flex-start — 시작
• ▸center — 중앙
• ▸flex-end — 끝
• ▸space-between — 양끝 + 사이 균등
• ▸space-around / space-evenly — 양옆 + 사이

가장 흔한 패턴 3가지

1. 헤더 — 로고 왼쪽, 메뉴 오른쪽:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

2. 중앙 정렬 (가로·세로 모두):

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

CSS 의 영원한 숙제 "중앙 정렬" 이 두 줄로 끝.

3. 자식 비율 — flex 속성:

.main { flex: 3; }       /* 3배 */
.sidebar { flex: 1; }    /* 1배 */
/* main 이 sidebar 보다 3배 큼 */

flex 속성 단축

.item {
    flex: 1 1 200px;
    /* flex-grow flex-shrink flex-basis */
    /* 늘어남 비율 / 줄어듦 비율 / 기본 크기 */
}

자주 쓰는 단축:

• ▸flex: 1 — 가능한 한 공평하게 차지
• ▸flex: 0 0 200px — 고정 200px, 안 늘어남·안 줄어듦

한 번 정리

• ▸display: flex + gap + justify-content + align-items = 99% 의 레이아웃
• ▸한 방향 정렬에 최적화
• ▸2차원 (행+열) 은 Grid 사용
• ▸옛 float·table 은 완전 폐기 — Flexbox 가 표준

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

• ▸"이 헤더를 Flexbox 로 좌(로고) + 중(메뉴) + 우(버튼) 정렬해줘"
• ▸"이 카드 그리드를 flex-wrap 으로 모바일 1열, 데스크탑 3열 만들어줘"
• ▸"이 align-items 와 justify-content 헷갈리는데 명확하게 교정해줘"

왜 이게 토큰을 줄이나

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