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

• ▸✅ 모바일 퍼스트 vs 데스크탑 퍼스트 선택
• ▸✅ 768/1024/1440 브레이크포인트 의미
• ▸✅ clamp() 와 vw/vh/rem/em 단위 선택

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

핵심 한 줄

반응형 디자인 (Responsive Design) = 화면 크기에 따라 다른 레이아웃·스타일을 적용하는 방식. 모바일·태블릿·데스크탑 하나의 코드 로.

Media Query 기본

.container { width: 100%; padding: 16px; }

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* 1024px 이상 (데스크탑) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; padding: 32px; }
}

화면 너비에 따라 다른 스타일 적용. 작은 화면이 기본, 큰 화면에서 추가 스타일을 덮어쓰는 방식.

Mobile First — 모던 표준

/* 1. 모바일 기본 (작은 화면) */
.card { display: block; padding: 12px; }

/* 2. 태블릿 추가 */
@media (min-width: 768px) {
    .card { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 3. 데스크탑 추가 */
@media (min-width: 1024px) {
    .card { grid-template-columns: 1fr 1fr 1fr; }
}

왜 모바일 먼저?

• ▸모바일 트래픽 60%+
• ▸작은 화면이 더 제약 많음 → 거기서 시작
• ▸큰 화면은 공간이 남으니 추가만

브레이크포인트 — 어디서 바꿀까

이건 대략적 가이드. 실제론 콘텐츠가 부서지는 지점 을 브레이크포인트로 잡는 게 정답.

viewport 메타 — 필수 한 줄

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이게 없으면 모바일 브라우저가 데스크탑 너비로 가정 하고 축소 표시. 반응형 디자인이 작동 안 함. 모든 HTML 페이지에 필수.

모바일 최적화 체크리스트

1. 터치 영역 ≥ 44 × 44 px — 손가락 사이즈 (애플 가이드라인)
2. 글자 ≥ 16 px — 모바일 줌 방지
3. 간격 충분히 — 손가락이 누르기 쉽게
4. 가로 스크롤 없게 — overflow-x: hidden
5. 테스트 — Chrome DevTools 의 모바일 시뮬레이터

Container Query — 2023+

.card {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card-title { font-size: 24px; }
}

미디어 쿼리는 화면 크기 기준, 컨테이너 쿼리 는 부모 요소 크기 기준. 컴포넌트 단위 반응형이 가능합니다. 모든 모던 브라우저 지원.

한 번 정리

• ▸모바일 먼저 + min-width 로 큰 화면 추가
• ▸브레이크포인트: 768·1024 가 가장 흔함
• ▸<meta viewport> 필수
• ▸컨테이너 쿼리는 컴포넌트 단위 반응형

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

• ▸"이 HTML/CSS 에 Media Query — 모바일·태블릿·데스크탑 개념을 적용해 리팩토링해줘"
• ▸"Media Query — 모바일·태블릿·데스크탑 와 관련한 접근성·SEO 점검해줘"
• ▸"Tailwind 클래스로 같은 결과 만들어줘"

왜 이게 토큰을 줄이나

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