Tailwind CSS 수업 자료 🎨

Session 0: Tailwind Flexbox 레이아웃

기초

Tailwind CSS 시작하기 - Flexbox를 활용한 To-Do 리스트 만들기

⏱️ 2시간 🎯 Flexbox, 색상, 간격, 레이아웃

Session 1: 카드 UI 마스터

실전

핵심 클래스로 실전 카드 UI 만들기 - 프로필, 제품, 블로그, 대시보드 카드

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

Session 2: 인터랙션과 애니메이션

실전

hover, transition, transform, group으로 생동감 있는 UI 만들기

⏱️ 2시간 🎯 hover, transition, scale, group

Session 3: 반응형 Flex 레이아웃

고급

flex-wrap, flex-1, gap으로 화면 크기에 맞춰 자동 조절되는 레이아웃

⏱️ 2시간 🎯 flex-wrap, flex-1, gap, min-w

Session 4: JavaScript DOM 조작

핵심

querySelector, addEventListener로 웹페이지를 동적으로 만들기

⏱️ 2시간 🎯 DOM 선택, 이벤트, 동적 생성, 상태 관리

Session 5: React & Next.js 시작하기

React

컴포넌트, useState, useEffect로 React 방식의 UI 만들기

⏱️ 2시간 🎯 JSX, Component, Props, useState, useEffect

Session 6: GitHub + Vercel 배포

배포

Git 기초와 Vercel로 내 사이트를 전 세계에 공개하기 🌍

⏱️ 2시간 🎯 Git, GitHub, Vercel, 자동 배포

Session 7: 좋은 코드 작성법

코드 품질

읽기 쉬운 코드 = 좋은 코드 📖 함수와 변수에 좋은 이름 붙이기

⏱️ 2시간 🎯 네이밍 컨벤션, CRUD, 함수/변수 명명 규칙