문제 7: 이미지 갤러리 ⭐⭐

⏱️ 15-20분 🎯 고정 크기 요소 배치, 그라디언트 활용

이미지 1

이미지 2

이미지 3

이미지 4

📝 코드 보기

<div class="flex gap-4">
  <div class="w-48 h-48 bg-blue-500 rounded-lg"></div>
  <div class="w-48 h-48 bg-green-500 rounded-lg"></div>
  <div class="w-48 h-48 bg-purple-500 rounded-lg"></div>
  <div class="w-48 h-48 bg-pink-500 rounded-lg"></div>
</div>

💡 핵심 포인트

• flex gap-4 - 가로 배치 + 간격
• w-48 h-48 - 정사각형 크기
• 각 박스에 다른 색상 적용

← 이전 다음 →