css · high priority
반응형 웹 디자인 실무
미디어 쿼리부터 Container Queries, 유동적 타이포그래피까지
basic 난이도3시간토스당근카카오네이버배민쿠팡라인
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“물”
물은 컵에 담으면 컵 모양이 되고, 병에 담으면 병 모양이 됩니다. 반응형 웹도 컨테이너(뷰포트, 부모 요소)에 맞게 자연스럽게 형태를 바꿉니다. 유동적 타이포그래피는 물의 수위가 그릇 크기에 따라 자연스럽게 조절되는 것과 같습니다.
핵심 개념
데스크톱 퍼스트 vs 모바일 퍼스트
❌ 데스크톱 퍼스트
- 데스크톱 스타일을 기본으로
- max-width로 작은 화면에서 오버라이드
- 모바일에서 불필요한 CSS 로드
- 성능상 불리
1.container {2 display: grid;3 grid-template-columns: 1fr 3fr; /* 기본: 데스크톱 */4}5@media (max-width: 768px) {6 .container { grid-template-columns: 1fr; }7}
✅ 모바일 퍼스트
- 모바일 스타일이 기본값
- min-width로 큰 화면에서 확장
- 모바일에서 최소 CSS만 로드
- 성능, 가독성 우수
1.container {2 display: grid;3 grid-template-columns: 1fr; /* 기본: 모바일 */4}5@media (min-width: 768px) {6 .container { grid-template-columns: 1fr 3fr; }7}
실무 적용
어떤 상황에서 사용하는가
뉴스 사이트 반응형 레이아웃 — 메인 콘텐츠 + 사이드바
어떻게 적용하는가
모바일 퍼스트로 작성. 기본(모바일): 단일 컬럼. md+: 8:4 grid. lg+: 사이드바에 고정 너비. 카드 컴포넌트에는 Container Query 적용 — 사이드바와 메인 콘텐츠에서 다른 레이아웃. clamp()로 미디어 쿼리 없는 유동적 폰트.
흔한 실수와 안티패턴
- px 대신 rem 사용 — 사용자 브라우저 폰트 설정 존중
- 미디어 쿼리 브레이크포인트를 특정 디바이스(iPhone X 등)에 맞추면 안 됨 — 컨텐츠 기준으로
- viewport meta 태그 누락 — 모바일에서 데스크톱처럼 렌더링
- Container Query 미지원 브라우저 폴백 설정 필요
면접 질문
중급토스당근카카오
답변 방향 힌트
컴포넌트 재사용성, 컨텍스트 독립성
반드시 언급할 키워드
- 미디어 쿼리: 뷰포트 기준
- Container Query: 컨테이너 기준
- 컴포넌트 재사용성
예상 꼬리 질문
- clamp()를 미디어 쿼리 없이 유동적 타이포그래피에 어떻게 사용하나요?
- Tailwind의 반응형 프리픽스는 어떤 브레이크포인트를 기준으로 하나요?