Module 2
색상과 타이포그래피
색상 팔레트, 폰트, 텍스트 스타일링을 Tailwind로 다루는 방법을 배워요.
유틸리티 우선 개념 이해하기
유틸리티 우선 개념
색상 팔레트, 폰트, 텍스트 스타일링을 Tailwind로 다루는 방법을 배워요.
핵심 포인트
- 미리 정의된 클래스를 조합해서 스타일을 만드는 방식이에요
- CSS 파일을 따로 만들 필요 없이 HTML에서 바로 스타일링해요
- p-4, text-lg, bg-blue-500 같은 직관적인 클래스명을 사용해요
- 커스텀 CSS를 작성하는 대신 유틸리티 클래스를 조합해요
💡 관련 키워드: utility, classes, inline-styling, design, philosophy
유틸리티 우선 개념 코드로 보기
Tailwind CSS에서 유틸리티 우선 개념이(가) 실제로 어떻게 사용되는지 아래 코드를 읽어보세요.
// 유틸리티 우선 개념 예시 (Tailwind CSS)
// 미리 정의된 클래스를 조합해서 스타일을 만드는 방식이에요
// 💡 실제 프로젝트에서 이 패턴을 찾아보세요!Quiz
퀴즈: 유틸리티 퍼스트의 장단점
유틸리티 퍼스트의 장단점
다음 중 올바른 설명은 무엇일까요?
A미리 정의된 클래스를 조합해서 스타일을 만드는 방식이에요
B위 설명과 반대되는 내용이에요
C이것은 유틸리티 우선 개념와(과) 관련 없는 설명이에요
Log in to take the quiz and check your score
Quiz
퀴즈: 기존 CSS 방식과의 비교
기존 CSS 방식과의 비교
다음 중 맞는 것을 고르세요.
A이것은 유틸리티 우선 개념와(과) 관련 없어요
BCSS 파일을 따로 만들 필요 없이 HTML에서 바로 스타일링해요
C이건 다른 개념에 대한 설명이에요
Log in to take the quiz and check your score
Challenge
도전! 색상과 타이포그래피 실습하기
실습 과제
이번 모듈에서 배운 내용을 직접 코드로 작성해보세요.
- 새 파일을 만들어서 배운 개념을 적용해보세요
- 기존 프로젝트에서 비슷한 패턴을 찾아 수정해보세요
- 콘솔에서 결과를 확인하세요
💪 직접 코드를 작성하는 것이 가장 효과적인 학습 방법이에요!
Log in to write code and check the answer
내 프로젝트에서 찾아보기 🔍
프로젝트 탐색
색상과 타이포그래피 개념이 여러분의 프로젝트에서 어떻게 사용되는지 찾아보세요.
- 프로젝트 파일에서 관련 코드를 검색해보세요
- AI가 생성한 코드 중 이 패턴이 적용된 부분을 찾아보세요
- "왜 이렇게 작성했을까?" 생각하며 읽어보세요
🎯 내 코드에서 배운 개념을 발견하면 진짜 이해한 거예요!
That's the end of the preview!
Start the remaining modules with AI tutor, quizzes, and code challenges for free.
Get Started Free