통합 요약노트
Ch.17 Tailwind CSS — 클래스만으로 디자인
유틸리티 퍼스트, 반응형, 다크모드, 실전 UI 조립
이 챕터의 내용
1
유틸리티 퍼스트 CSS
Tailwind CSS — HTML 태그에 유틸리티 클래스를 직접 써서 디자인하는 방식입니다.
CSS 파일 없이 클래스 이름만으로 디자인합니다
Tailwind의 세 기둥 간격, 크기, 색상을 익힙시다
글자 크기, 굵기, 둥근 모서리 자주 쓰는 클래스를 정리합니다
2
반응형과 상태 — 모바일 퍼스트
반응형 접두사 — sm:, md:, lg: 만 붙이면 화면 크기별 스타일이 자동 적용됩니다.
모바일 먼저, 큰 화면은 접두사로 덮어씁니다
마우스를 올리면? 클릭하면? 상태별 스타일도 클래스로 끝
다크모드도 접두사 하나로 dark:만 붙이면 됩니다
3
실전 UI 조립 — 카드, 버튼, 네비게이션
실전 조립 — 버튼, 카드, 네비게이션을 직접 만들며 클래스 조합법을 익힙니다.
버튼 하나에 담긴 7가지 클래스를 해부합니다
카드 = 컨테이너 + 내용물 shadow + rounded + overflow
네비게이션 = flex + justify-between + items-center
key
핵심 용어 모음
⚡
파일 왔다갔다 없음
HTML에서 바로 스타일 적용
🎯
클래스 이름 고민 없음
card-wrapper-inner 같은 작명 불필요
🤖
AI와 궁합 최고
AI가 생성한 Tailwind 코드를 바로 읽고 수정 가능
📐
일관된 디자인
미리 정의된 간격·색상 시스템으로 통일감 유지
🔤
text-sm / text-lg / text-2xl
글자 크기 (작은 → 큰)
✏️
font-bold / font-semibold
글자 굵기
📄
text-center / text-right
텍스트 정렬
📏
leading-relaxed
줄 간격 넓힘 (가독성 향상)
border
1px 테두리 추가
rounded-lg / rounded-xl
둥근 모서리 (lg=8px, xl=12px)
shadow / shadow-md
그림자 (md가 더 진함)
ring-2 ring-blue-500
포커스 링 (입력 필드에 유용)
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기