Step 3 - 가로 카드 만들기

🎯 학습 목표

flex를 활용하여 이미지와 텍스트를 가로로 배치하고 items-center로 정렬할 수 있다

📐 Flex 방향의 이해

flex (가로 배치)

A
B
C
flex gap-2

flex-col (세로 배치)

A
B
C
flex flex-col gap-2

💡 기본 flex = 가로 배치 (이게 더 자주 쓰임!)

1️⃣ 기본 가로 카드

사용자 이름

소프트웨어 개발자

flex gap-4

문제점: 텍스트가 위로 붙어있어요

2️⃣ Items-center로 중앙 정렬

사용자 이름

소프트웨어 개발자

flex gap-4 items-center

완벽! 세로 중앙 정렬되었어요 🎉

💡 Items 정렬 옵션 비교

items-start (위쪽 정렬)

제목

설명 텍스트

items-center (중앙 정렬) ⭐

제목

설명 텍스트

items-end (아래쪽 정렬)

제목

설명 텍스트

👤 실전 예제: 프로필 카드

김코딩

Frontend Developer

Seoul, Korea 🇰🇷

바깥은 flex items-center (가로 배치)
안쪽은 flex-col (세로 배치)

🔔 실전 예제: 알림 카드

💬

새 댓글

누군가 회원님의 게시물에 댓글을 남겼습니다

5분 전
❤️

좋아요

누군가 회원님의 게시물을 좋아합니다

1시간 전
👤

새 팔로워

누군가 회원님을 팔로우하기 시작했습니다

2일 전

🎨 직접 만들어보기

📝 미션

음악 플레이어 카드를 만들어보세요:

  • 왼쪽: 앨범 커버 (정사각형, 80x80)
  • 중앙: 곡 제목 + 아티스트명 (세로 배치)
  • items-center로 세로 중앙 정렬
  • 흰색 배경, 그림자, 둥근 모서리

✅ 핵심 정리

Flex 방향:
  • flex → 가로 배치 (기본값)
  • flex-col → 세로 배치
세로 정렬:
  • items-center → 세로 중앙 정렬 (가장 많이 씀!)
  • items-start → 위쪽 정렬
  • items-end → 아래쪽 정렬
크기 고정:
  • w-20 h-20 → 정사각형 (20 = 80px)

💡 패턴: 가로 카드 = flex + gap-4 + items-center

🚀 다음 단계

Step 4에서는 여러 카드를 가로로 나란히 배치하는 그리드를 만들어볼게요!