Tailwind CSS Academy 학습 경로의 모든 코스를 학습 순서대로 확인하세요. 첫 코스는 무료입니다.
Tailwind CSS의 유틸리티 우선 철학을 알아보고 Bootstrap과 같은 전통적인 CSS 프레임워크와 어떻게 다른지 이해합니다. 프로젝트에서 Tailwind를 설정하고 유틸리티 클래스를 사용해 처음으로 스타일이 적용된 요소를 작성하는 방법을 배웁니다.
Tailwind의 풍부한 타이포그래피 유틸리티를 익혀 글꼴 크기, 굵기, 줄 높이, 글자 간격, 텍스트 정렬을 제어합니다. 사용자 지정 CSS를 전혀 작성하지 않고도 읽기 쉽고 시각적으로 매력적인 텍스트를 만드는 방법을 배웁니다.
Tailwind의 폭넓은 색상 팔레트를 살펴보고 배경색, 그라데이션, 배경 이미지를 적용하는 방법을 배웁니다. 불투명도 수정자를 사용하고 시각적으로 풍부한 표면을 만드는 방법을 이해합니다.
Tailwind의 일관된 간격 척도를 사용해 어떤 요소에든 바깥 여백과 안쪽 여백을 추가합니다. 방향별 단축 문법과 음수 여백을 이해해 레이아웃을 정밀하게 제어합니다.
사용자 지정 CSS를 한 줄도 작성하지 않고 Tailwind의 플렉스 유틸리티로 CSS Flexbox 레이아웃을 적용합니다. 가로 및 세로 레이아웃을 만들고 정렬을 제어하며 줄바꿈을 손쉽게 관리합니다.
Tailwind의 그리드 유틸리티를 통해 CSS Grid를 활용해 복잡한 2차원 레이아웃을 만듭니다. 간단한 클래스 이름으로 열, 행, 영역을 정의하고 항목 배치를 정밀하게 제어합니다.
Tailwind의 너비, 높이, 최소·최대 제약 조건, 종횡비 유틸리티를 사용해 요소의 크기를 제어합니다. 반응형 구성 요소와 고정 크기 구성 요소를 자신 있게 만듭니다.
Tailwind의 테두리 및 그림자 유틸리티로 요소의 가장자리와 깊이감을 표현합니다. 둥근 모서리를 추가하고 테두리의 너비와 색상을 제어하며 상자 그림자를 적용해 깊이감을 만드는 방법을 배웁니다.
호버, 포커스, 활성화, 비활성화 및 기타 의사 상태에 따라 조건부로 스타일을 적용해 UI에 상호작용을 추가합니다. 모든 상호작용 상태를 제어하는 Tailwind의 변형 접두사 체계를 배웁니다.
Tailwind의 모바일 우선 반응형 중단점을 사용해 모든 화면 크기에 맞게 변하는 레이아웃을 만듭니다. 특정 뷰포트 너비에서 서로 다른 유틸리티 클래스를 적용해 진정한 반응형 디자인을 구현합니다.
Tailwind에 내장된 다크 변형을 사용해 웹 앱에 다크 모드를 구현합니다. 클래스 전략과 미디어 전략의 차이를 배우고 밝은 테마와 어두운 테마 모두에서 보기 좋은 UI 구성 요소를 만듭니다.
tailwind.config.js 파일을 능숙하게 다뤄 Tailwind의 모든 기능을 활용합니다. 기본 테마를 확장하고 사용자 지정 값을 추가하며 콘텐츠 경로를 구성하고 플러그인을 관리하는 방법을 배웁니다.
사용자 지정 색상을 추가하고 Google Fonts를 통합하며 사용자 지정 간격 척도를 정의해 Tailwind를 브랜드에 맞게 조정합니다. Tailwind의 모든 유틸리티를 계속 활용하면서 프로젝트에 맞는 디자인 언어를 구축합니다.
반복되는 유틸리티 패턴을 재사용 가능한 CSS 클래스로 추출할 때 Tailwind의 @apply 지시문을 언제 어떻게 사용하는지 배웁니다. 유틸리티 우선 접근 방식과 유지 관리 가능한 구성 요소 추상화의 필요성 사이에서 균형을 잡습니다.
Tailwind에 내장된 전환 및 애니메이션 유틸리티로 UI에 부드러운 움직임을 더합니다. 지속 시간, 가속 함수, 지연을 제어하고 키프레임 애니메이션을 적용해 매력적인 사용자 경험을 만드는 방법을 배웁니다.
Tailwind 유틸리티 클래스를 사용해 완성도 높고 재사용 가능한 UI 기본 요소를 만듭니다. 변형이 있는 버튼, 머리글과 바닥글이 있는 카드, 작은 정보 배지의 표준 패턴을 배웁니다.
Tailwind 유틸리티를 사용해 반응형 내비게이션 바와 접을 수 있는 사이드바를 만듭니다. 모바일 햄버거 메뉴를 처리하고 사용자가 스크롤할 때도 유지되는 고정 내비게이션을 만드는 방법을 배웁니다.
Tailwind 유틸리티를 사용해 접근성이 높고 매력적인 양식 요소를 스타일링합니다. 텍스트 입력란, 선택 상자, 체크 상자, 라디오 버튼, 유효성 검사 상태가 포함된 완전한 양식 레이아웃을 만드는 방법을 배웁니다.
Tailwind와 최소한의 JavaScript를 사용해 모달, 대화 상자, 드롭다운 메뉴와 같은 오버레이 UI 패턴을 만듭니다. 위치 지정, z-index 쌓임, 부드러운 열기·닫기 전환을 배웁니다.
Tailwind의 Just-In-Time 엔진과 사용한 CSS만 생성하는 방식을 이해합니다. 프로덕션 번들을 최적화하고 출력 크기를 분석하며 JIT 엔진이 감지할 수 있는 클래스를 작성하는 방법을 배웁니다.
Tailwind 구성 안에 견고한 디자인 토큰 체계를 구축해 여러 브랜드에서 일관된 테마를 사용할 수 있도록 합니다. 원시 토큰을 의미 토큰에 매핑하고 대규모 프로젝트를 위한 확장 가능한 디자인 언어를 만듭니다.
공식 설정 방식을 사용해 React와 Next.js 애플리케이션에 Tailwind CSS를 통합합니다. JSX에서 유틸리티를 적용하는 모범 사례, 조건부 클래스 관리, 구성 요소 기반 아키텍처에서 스타일을 구성하는 방법을 배웁니다.
Tailwind CSS와 Headless UI를 결합해 완전히 접근성이 높은 무스타일 구성 요소를 만듭니다. 기본 제공되는 견고한 접근성은 유지하면서 메뉴, 대화 상자, 콤보 상자, 전환에 직접 Tailwind 클래스를 적용합니다.
새로운 유틸리티, 구성 요소, 변형을 추가하는 사용자 지정 플러그인을 작성해 Tailwind의 기능을 확장합니다. 재사용 가능한 스타일 로직을 캡슐화하고 여러 프로젝트에서 공유할 수 있도록 플러그인 API를 배웁니다.
Tailwind 유틸리티를 사용해 색상 대비, 포커스 관리, 화면 낭독기 지원에 관한 WCAG 접근성 표준을 충족하는 UI 구성 요소를 만듭니다. 모든 사람이 사용할 수 있는 HTML 구조와 Tailwind 스타일을 작성합니다.
프로덕션 애플리케이션에 Tailwind CSS를 배포하기 위한 전문적인 모범 사례를 적용합니다. 대규모 팀에서 사용하는 번들 감사, 클래스 구성 전략, 린트, 성능 최적화 기법을 배웁니다.
지금까지 배운 모든 내용을 적용해 Tailwind CSS만으로 처음부터 완전한 반응형 마케팅 랜딩 페이지를 만듭니다. 첫 화면, 기능 소개, 사용자 추천, 가격, 바닥글 섹션을 다룹니다.
Tailwind CSS를 사용해 기능이 풍부한 관리자 대시보드 인터페이스를 구축합니다. 일관되고 반응형인 레이아웃에 사이드바, 상단 바, 통계 카드, 데이터 표, 차트 자리 표시 위젯을 만듭니다.
대규모 프로젝트에서 사용하는 더 넓은 CSS 아키텍처 전략에 Tailwind가 어떻게 들어맞는지 살펴봅니다. 파일을 구성하고 구성 요소 계층을 구조화하며 기존 CSS 또는 다른 스타일링 도구와 함께 사용하는 방법을 배웁니다.
이 트랙에서 익힌 모든 기술을 모아 완전한 Tailwind 기반 디자인 시스템을 구축합니다. 토큰을 정의하고 구성 요소 라이브러리를 만들며 플러그인을 작성하고 팀에서 사용할 수 있도록 시스템을 문서화합니다.
AI 튜터, 자격증 시험 및 수료증을 이용할 수 있습니다. 웹, iOS 및 Android에서 작동합니다.
모든 플랜 보기OpenAI, Vercel, Shopify가 신뢰하는 유틸리티 중심의 CSS 프레임워크를 마스터하세요. 모든 유틸리티, 반응형 디자인, 다크 모드, 애니메이션, 프로덕션 최적화를 학습합니다. 이 트랙은 초급자(A1)부터 고급(B2)까지 30개의 점진적 미니 코스를 다루며, 짧고 집중된 수업과 빠른 퀴즈로 각 개념을 확실히 습득합니다.
기초부터 시작하여 중급과 고급 주제까지 단계적으로 빌드업하며, 각 코스는 이전 코스를 기반으로 합니다. 모든 수업은 실용적이며 실제 예제와 필요할 때 도움을 받을 수 있는 AI 튜터가 함께합니다.
각 코스는 네 개의 집중된 수업으로 나뉩니다. 매일 몇 개의 수업을 완료하면 수개월이 아닌 몇 주 만에 전체 트랙을 마스터할 수 있습니다.
AI 기반 도구와 기능으로 학습을 강화하세요
실시간 피드백을 받으며 직접 코딩 연습하기
막힐 때마다 AI 튜터에게 즉시 도움받기
브라우저에서 바로 코드 작성 & 실행하기
과정을 완료하면 수료증 취득하기
Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.
Web Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…
Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.
Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.
Sveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.
HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.네, Tailwind CSS Academy 강의를 무료로 시작하고 인터랙티브 레슨을 모두 무료로 완료할 수 있습니다. 선택적 PRO 구독을 통해 고급 AI 도구와 공유 가능한 수료증을 잠금 해제할 수 있습니다.
아니요. 강의는 기초부터 시작하여 점차 더 심화된 주제로 나아가므로 HTML 경험이 없어도 시작할 수 있습니다.
직접 해보면서 배웁니다. 짧은 인터랙티브 레슨은 명확한 설명과 실시간으로 실행되는 실습 코딩 연습을 함께 제공하며, 24시간 AI 튜터가 막힐 때마다 맞춤형 도움을 줍니다.
네, PRO 학습자는 시험을 응시하고 Tailwind CSS Academy 강의의 검증 코드가 포함된 공유 가능한 수료증을 취득할 수 있습니다.
네, CoddyKit은 웹과 iOS, Android 네이티브 앱으로 이용 가능하므로 어느 기기에서나 HTML을(를) 배우고 진행 상황이 모든 기기에서 동기화됩니다.
Tailwind CSS Academy의 첫 코스는 무료입니다. CoddyKit PRO를 이용하면 모든 코스를 잠금 해제할 수 있습니다. 요금은 주 $5.90, 월 $7.90, 연 $29.90이며, 갱신 없이 평생 이용하려면 $69.99을 한 번 결제하면 됩니다.
Tailwind CSS Academy에는 코스 30개와 레슨 120개가 있습니다. 대부분의 레슨은 5~10분 정도 걸리므로, 자신의 속도에 맞춰 전체 학습 경로를 약 14시간 동안 실습할 수 있습니다.
