반응형 웹 —
모든 화면에 맞추다

미디어 쿼리와 모바일 퍼스트로 유연하게

이 세션에서
배우는 것

왜 반응형이
필요한가?

사람들은 폰, 태블릿, 노트북, TV로 같은 웹을 본다.
한 벌의 코드로 모든 기기를 지원하지 않으면, 사용자는 떠난다.

오늘날 모바일 트래픽은 전체의 절반 이상.
반응형은 선택이 아닌 기본이다.

주요 브레이크포인트

업계 관행상 자주 쓰이는 화면 크기 기준점.

/* 기본: 모바일 스타일 */
.container { padding: 1rem; }

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

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

미디어 쿼리 —
더 깊게 이해하기

min-width와 max-width의 차이를 알면 반응형 CSS가 훨씬 명확해진다.

모바일 퍼스트 설계

작은 화면을 기본으로 잡고, 큰 화면에서 확장하는 방식.

모바일 퍼스트 —
실제로는 어떻게?

작은 화면에서 출발해 단계적으로 레이아웃을 확장하는 과정을 보자.

핵심: 모바일은 기본값, 큰 화면은 min-width로 덧붙인다. 코드 충돌 없이 점진 확장.

Tailwind CSS — 유틸리티 퍼스트

클래스 이름으로 반응형 스타일을 바로 적용.

<!-- 모바일: 세로 / 태블릿 이상: 가로 -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">왼쪽</div>
  <div class="w-full md:w-1/2">오른쪽</div>
</div>

<!-- 반응형 글자 크기 -->
<h1 class="text-lg md:text-2xl lg:text-4xl">
  제목
</h1>

sm:, md:, lg:, xl: 접두어로 브레이크포인트별 스타일을 지정한다.

실생활에서
이렇게 쓰여요

우리가 매일 사용하는 앱과 서비스 속에 이 개념이 녹아 있다.

💡 이 개념이 없다면 모바일 사용자에게 PC 화면을 그대로 축소해 보여줄 수밖에 없다.

자주 하는
오해 바로잡기

이렇게 생각하기 쉽지만, 실제로는 조금 다릅니다.

반응형은 물이다

담기는 그릇에 따라 자연스럽게 모양을 바꾼다.

이걸 알면
AI와 이렇게 대화해요

이 개념을 이해하면 Claude나 ChatGPT를 훨씬 잘 활용할 수 있다.

이렇게
이해하셨나요?

💪 반응형의 핵심은 규칙이 아닌 유연함 — 물처럼 흐르는 레이아웃을 만들어보세요!

핵심 정리

다음 세션
Session 25 · React 기초

반복되는 UI를 체계적으로 관리하는 법 —
React, Vue, Svelte 프런트엔드 프레임워크의 세계로 들어간다.

💡 기억할 것: 한 벌의 코드로 모든 화면을 지원한다.