class="flex gap-4"
💡 flex만 쓰면 자동으로 가로 배치! gap-4로 간격 추가
class="flex flex-col gap-4"
💡 flex-col을 추가하면 세로 배치!
class="flex justify-center"
💡 justify-center: 가로 방향 중앙 정렬
class="flex items-center"
💡 items-center: 세로 방향 중앙 정렬
class="flex justify-center items-center"
💡 두 개를 함께 쓰면 완전 중앙!
class="flex justify-between"
💡 justify-between: 양쪽 끝으로 밀어내기
class="flex-1"
💡 flex-1: 남은 공간을 모두 차지 (input에 많이 사용)
class="flex gap-2"
💡 input에 flex-1, 버튼은 고정 크기!
문제 1: 네비게이션 바 만들기
로고(왼쪽) | 메뉴3개(오른쪽) 형태로 만들어보세요
문제 2: 카드 3개 가로 배치
동일한 크기의 카드 3개를 가로로 배치해보세요