← Session 3 목차로

Session 3 연습문제 ✏️

flex-wrap, flex-1, gap을 활용한 6가지 반응형 레이아웃 문제

📌 학습 방법

각 문제는 실무에서 자주 사용하는 레이아웃 패턴입니다.
창 크기를 조절하면서 반응형이 잘 동작하는지 확인하세요!

문제 1 ⭐ 기초

상품 카드 그리드

flex-wrap과 gap을 사용해 반응형 상품 그리드 만들기

💡 힌트: flex flex-wrap gap-6

문제 2 ⭐ 기초

태그 목록

기술 스택 태그를 줄바꿈이 되도록 배치하기

💡 힌트: flex flex-wrap gap-2

문제 3 ⭐⭐ 중급

사이드바 레이아웃

고정 너비 사이드바 + 유연한 메인 영역

💡 힌트: 사이드바 w-64, 메인 flex-1

문제 4 ⭐⭐ 중급

대시보드 통계

3개의 통계 카드를 균등하게 배치하기

💡 힌트: flex-1 min-w-[200px]

문제 5 ⭐⭐⭐ 고급

반응형 폼

2열로 배치되다가 좁아지면 1열로 변경

💡 힌트: flex-wrap + flex-1 + min-w

문제 6 ⭐⭐⭐ 고급

블로그 레이아웃

카드가 자동으로 줄바꿈되며 최대 3열 유지

💡 힌트: flex-1 min-w-[280px] max-w-sm

💡 학습 팁

1. 창 크기 조절: 브라우저 창을 넓히고 좁히면서 테스트

2. 개발자 도구: F12로 요소 크기 확인

3. 실험: 숫자를 바꿔가며 동작 이해하기

4. 패턴 암기: 자주 쓰는 조합은 외우기

상세한 문제와 정답은 각 세션 폴더의 exercises 디렉토리에서 확인하세요!