← 목차로

Step 3: 실전 반응형 레이아웃 🎯

지금까지 배운 것을 종합해서 완벽한 반응형 만들기

1. 블로그 카드 그리드

창 크기를 조절하면 자동으로 개수가 조절됩니다.

개발

유틸리티 클래스로 빠르게 UI 만들기

👤 김개발 • 2024.01.15

디자인

모바일부터 데스크톱까지 대응

👤 이디자인 • 2024.01.14

마케팅

작은 디테일이 만드는 큰 차이

👤 박마케터 • 2024.01.13

<div class="flex flex-wrap gap-6">
  <div class="flex-1 min-w-[280px] max-w-sm">
    카드
  </div>
</div>

로고

<div class="flex flex-wrap items-center gap-4">
  <div>로고</div>
  <div class="flex-1"></div> <!-- 공간 채우기 -->
  <div>버튼들</div>
</div>

이름

이메일

비밀번호

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px]">이름 필드</div>
  <div class="flex-1 min-w-[200px]">이메일 필드</div>
</div>

1. 카드 그리드

flex flex-wrap gap-6 → 자식: flex-1 min-w-[280px] max-w-sm

2. 헤더

flex flex-wrap items-center gap-4 → 중간: flex-1

3. 폼

flex flex-wrap gap-4 → 필드: flex-1 min-w-[200px]

flex-wrap, flex-1, gap으로 반응형 레이아웃을 마스터했습니다!
이제 연습문제로 실력을 다져보세요.