← 목록으로

문제 4: 입력 폼 ⭐

⏱️ 10-15분 🎯 flex-col 세로 배치, gap 간격, 전체 너비

이름 입력

📝 코드 보기
<div class="flex flex-col gap-4">
  <h2 class="text-2xl font-bold">이름 입력</h2>
  <input type="text" placeholder="이름을 입력하세요" 
         class="border rounded-lg px-4 py-2">
  <input type="email" placeholder="이메일을 입력하세요"
         class="border rounded-lg px-4 py-2">
  <button class="bg-blue-500 text-white w-full">제출</button>
</div>
💡 핵심 포인트
  • flex-col gap-4 - 세로 배치 + 간격
  • w-full - 버튼 전체 너비
  • focus:border-blue-500 - 입력 시 테두리 변경
← 이전 다음 →