← 전체 목록으로

Session 1: 카드 UI 마스터 🎨

Tailwind CSS 핵심 클래스로 실전 카드 UI 만들기

⏱️ 2시간 🎯 flex, flex-col, items-center, justify-between

🎯 학습 목표

📚 단계별 학습

1

기본 카드 만들기

20분

카드 UI의 4가지 핵심 요소 이해하기

bg-white p-4 rounded shadow
2

카드에 내용 채우기

30분

세로 방향 배치와 간격 조절하기

flex-col gap-2 text-lg font-bold
3

가로 카드 만들기

30분

이미지와 텍스트를 가로로 배치하기

flex items-center gap-4 w-20 h-20
4

카드 그리드

30분

여러 카드를 가로로 나란히 배치하기

flex gap-4 flex-1 flex-col

🎯 연습 문제

실습 문제 풀기 🚀

난이도별 5개 문제로 실력 향상하기

💪

⭐

문제 1

⭐⭐

문제 2

⭐⭐

문제 3

⭐⭐

문제 4

⭐⭐⭐

문제 5

📖 참고 자료

📄

README.md

수업 개요, 학습 목표, 강의 내용 정리

문서 보기 →
👨‍🏫

강의노트.md

강사용 상세 가이드 - 시간 배분, 강의 팁, 예상 질문

문서 보기 →

✨ 이번 세션에서 배우는 핵심 클래스

레이아웃

flex flex-col gap-4

정렬

items-center justify-between flex-1

스타일

rounded shadow border

크기/간격

p-4 w-full h-40

💪 화이팅!

Step 1부터 순서대로 학습한 후, 연습 문제로 실력을 다져보세요!