Ch.17 Tailwind CSS — 클래스만으로 디자인

반응형과 상태 — 모바일 퍼스트

Tailwind의 반응형 접두사(sm, md, lg, xl)를 이해한다hover, focus 등 상태 접두사를 활용할 수 있다다크모드 접두사를 사용할 수 있다

PC에선 완벽한 디자인 모바일에서 깨진다?

데스크탑에서 만든 레이아웃이 모바일에서는 글자가 겹치고 버튼이 잘립니다. Tailwind은 이 문제를 접두사 한 단어로 해결합니다.

화면 크기별로 CSS를 따로 써야 할까?

반응형 접두사 — sm:, md:, lg: 만 붙이면 화면 크기별 스타일이 자동 적용됩니다.

article

핵심 내용

모바일 먼저, 큰 화면은 접두사로 덮어씁니다

기본: 접두사 없음 → 모든 화면 (모바일 포함)

sm:: 640px 이상 (큰 모바일/작은 태블릿)

md:: 768px 이상 (태블릿)

lg:: 1024px 이상 (노트북)

xl:: 1280px 이상 (데스크탑)

<!-- 모바일: 1열, 태블릿: 2열, 데스크탑: 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2
     lg:grid-cols-3 gap-4">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
</div>

<!-- 모바일: 세로 쌓기, 태블릿+: 가로 배치 -->
<div class="flex flex-col md:flex-row gap-4">
  <div>왼쪽</div>
  <div>오른쪽</div>
</div>

<!-- 모바일: 숨김, 데스크탑: 표시 -->
<nav class="hidden lg:flex">
  데스크탑 전용 메뉴
</nav>

모바일 퍼스트 원칙 접두사 없는 클래스가 모바일 기본값입니다. 큰 화면에서 바꿀 것만 접두사를 붙이세요. 예: text-sm md:text-base lg:text-lg

마우스를 올리면? 클릭하면? 상태별 스타일도 클래스로 끝

<!-- 호버 시 색상 변경 -->
<button class="bg-blue-500 hover:bg-blue-600
     text-white px-4 py-2 rounded
     transition duration-200">
  클릭하세요
</button>

<!-- 포커스 시 링 표시 -->
<input class="border rounded px-3 py-2
     focus:ring-2 focus:ring-blue-500
     focus:outline-none"
  placeholder="이메일 입력" />

<!-- 비활성화 스타일 -->
<button class="bg-gray-300 text-gray-500
     disabled:opacity-50
     disabled:cursor-not-allowed"
  disabled>
  전송 불가
</button>

transition 잊지 마세요! hover 효과에 transition을 함께 쓰면 부드러운 애니메이션이 됩니다. transition duration-200 → 0.2초 동안 변화

다크모드도 접두사 하나로 dark:만 붙이면 됩니다

<!-- 다크모드 카드 예시 -->
<div class="bg-white dark:bg-gray-800
     text-gray-900 dark:text-gray-100
     border border-gray-200 dark:border-gray-700
     rounded-lg shadow p-6">
  <h2 class="font-bold">제목</h2>
  <p class="text-gray-600 dark:text-gray-400">
    라이트/다크 모두 대응
  </p>
</div>

설정 방법 tailwind.config.js에서 darkMode: 'class' 또는 'media' 설정. 'media' = OS 설정 자동 따라감, 'class' = 수동 토글 가능

모바일에서 1열, 태블릿(768px+)에서 2열 그리드를 만드는 올바른 클래스는?

hover:bg-blue-600은 마우스를 올렸을 때 배경색을 바꾼다.

다크모드에서 배경을 어둡게, 글자를 밝게 만드는 클래스는?

key

핵심 용어

🖱️

hover:

마우스 올렸을 때

🎯

focus:

입력 필드에 포커스했을 때

👆

active:

클릭 중일 때

🚫

disabled:

비활성화 상태일 때

edit_note

정리 노트

반응형과 상태 — 모바일 퍼스트

핵심 개념

반응형 접두사: sm:, md:, lg: — 화면 크기별 스타일 분기
모바일 퍼스트: 기본 스타일 = 모바일, 큰 화면은 접두사로 오버라이드
상태 접두사: hover:, focus:, active: — 사용자 인터랙션 스타일
다크모드: dark: 접두사로 다크모드 스타일 간편 적용

★

모바일 스타일을 먼저 작성하고, 큰 화면은 접두사로 덮어씁니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작