Week 3 · 레이아웃과 컴포넌트 조립 Day 20 / 42

반응형 완성 — 3 Breakpoint

작은 화면부터 채우고, 큰 화면으로 넓혀갑니다

10초 핵심 요약

Mobile-First는 가장 좁은 화면 스타일을 기본값으로 쓰고, 화면이 넓어질 때만 min-width 미디어 쿼리로 스타일을 추가하는 방식입니다.
브레이크포인트는 보통 3단계(모바일/태블릿/데스크톱)로 충분합니다.
min-width와 max-width를 섞어 쓰면 겹치는 구간이 생기기 쉬우니, 한 프로젝트에서는 하나만 골라 일관되게 씁니다.

작은 방부터 채우기

이사할 때 큰 가구부터 넣으면 작은 방에 다 안 들어갈 수 있지만, 꼭 필요한 것부터 작은 공간에 채우고 남는 공간에 더 넣는 방식은 항상 안전합니다. Mobile-First도 같은 원리입니다 — 가장 좁은 화면에서도 작동하는 스타일을 기본으로 깔고, 화면이 넓어질수록 스타일을 추가합니다.

3 Breakpoint 구조

화면 너비가 커지다가 레이아웃이 확 바뀌는 지점을 Breakpoint라고 부릅니다. 이 사이트는 아래처럼 768px, 1024px 두 지점에서 스타일을 추가하는 3단계 구조를 씁니다.

    /* 기본값 = 모바일 (미디어 쿼리 없음) */

    .layout { display: block; }

    /* 태블릿 이상 (768px~) */

    @media (min-width: 768px) {

      .layout { display: grid; grid-template-columns: 1fr 1fr; }

    }

    /* 데스크톱 (1024px~) */

    @media (min-width: 1024px) {

      .layout { grid-template-columns: 1fr 280px; }

    }

Day 19에서 만든 grid-template-areas 레이아웃도 이 구조를 그대로 적용합니다 — 모바일에서는 sidebar가 main 아래로 내려가고, 데스크톱에서는 옆으로 나옵니다.

min-width와 max-width, 하나만 고르세요

일관성 경고 — 한 프로젝트에서 min-width(Mobile-First)와 max-width(Desktop-First)를 섞어 쓰면, 어느 브레이크포인트에서 어떤 스타일이 이기는지 파악하기 어려워집니다. 이 사이트는 min-width만 사용합니다.

Day 20 완료 체크리스트

Mobile-First가 무엇이고 왜 쓰는지 설명할 수 있다.

min-width 미디어 쿼리 3단계로 레이아웃을 만들었다.

min-width/max-width를 섞어 쓰지 않아야 하는 이유를 안다.

스스로 설명해보기 — min-width와 max-width를 한 프로젝트에서 섞어 쓰면 안 되는 이유를 설명할 수 있나요?

오늘의 용어

Mobile-First

좁은 화면 스타일을 기본값으로, 넓어질 때 스타일을 추가하는 방식

Breakpoint

레이아웃이 바뀌는 화면 너비 기준점