Tailwind CSS 튜토리얼

레벨 1: 텍스트 색상

Tailwind CSS에서 텍스트 색상을 변경하는 방법을 배워봅시다.

레벨 2: 배경 색상

배경 색상을 변경하는 방법을 배워봅시다.

레벨 3: 패딩 (Padding)

패딩 유틸리티를 사용하여 요소 내부의 간격을 조절해봅시다.

레벨 4: 마진 (Margins)

마진 유틸리티를 사용하여 요소 외부의 간격을 조절해봅시다.

레벨 5: Flexbox 기초

Flexbox를 사용하여 아이템들을 가로로 배치해봅시다.

레벨 6: Flexbox 정렬

플렉스 컨테이너 내에서 아이템들을 세로로 정렬해봅시다.

레벨 7: Grid 기초

CSS Grid를 사용하여 2열 레이아웃을 만들어봅시다.

레벨 8: 반응형 디자인

화면 크기에 따라 스타일을 변경해봅시다.

레벨 9: Hover 상태

요소 위에 마우스를 올렸을 때 스타일을 변경해봅시다.

레벨 10: 타이포그래피

글꼴 굵기와 크기를 스타일링해봅시다.

레벨 11: 글꼴 종류 (Font Family)

텍스트의 글꼴 종류를 변경해봅시다.

레벨 12: 이탤릭체 (Italic)

텍스트를 이탤릭체로 강조해봅시다.

레벨 13: 자간 (Letter Spacing)

글자 사이의 간격을 조절해봅시다.

레벨 14: 줄 간격 (Line Height)

줄 사이의 간격을 조절하여 가독성을 높여봅시다.

레벨 15: 텍스트 정렬

텍스트를 왼쪽, 가운데, 오른쪽으로 정렬해봅시다.

레벨 16: 텍스트 꾸밈 (Decoration)

밑줄이나 취소선을 추가해봅시다.

레벨 17: 대소문자 변환

텍스트의 대소문자를 스타일로 제어해봅시다.

레벨 18: 요소 사이 간격 (Space Between)

자식 요소들 사이에 균일한 간격을 추가해봅시다.

레벨 19: 말줄임표 (Truncate)

긴 텍스트를 한 줄로 줄이고 말줄임표(...)를 표시해봅시다.

레벨 20: 줄바꿈 금지 (Whitespace)

텍스트가 자동으로 줄바꿈되지 않도록 해봅시다.

레벨 21: 테두리 두께

요소의 테두리 두께를 조절해봅시다.

레벨 22: 테두리 색상

테두리의 색상을 변경해봅시다.

레벨 23: 테두리 스타일

점선이나 파선 등 테두리 스타일을 변경해봅시다.

레벨 24: 모서리 둥글게 (Border Radius)

요소의 모서리를 둥글게 만들어봅시다.

레벨 25: 원 만들기

요소를 완전한 원으로 만들어봅시다.

레벨 26: 그림자 (Box Shadow)

요소에 그림자를 추가하여 입체감을 줘봅시다.

레벨 27: 투명도 (Opacity)

요소의 투명도를 조절해봅시다.

레벨 28: 구분선 (Divide)

자식 요소들 사이에 구분선을 추가해봅시다.

레벨 29: 링 (Ring)

포커스 링과 같은 외곽선을 추가해봅시다. 그림자와 함께 사용할 수 있습니다.

레벨 30: 스크린 리더 전용 (Sr Only)

화면에는 보이지 않지만 스크린 리더에게는 읽히는 텍스트를 만들어봅시다.

레벨 31: Flex 방향 (Direction)

Flex 아이템의 배치 방향을 변경해봅시다.

레벨 32: Flex 줄바꿈 (Wrap)

Flex 아이템들이 한 줄을 넘어갈 때 줄바꿈되도록 해봅시다.

레벨 33: Flex 확장 (Grow)

Flex 아이템이 남은 공간을 채우도록 해봅시다.

레벨 34: Flex 축소 방지 (Shrink)

Flex 아이템이 공간이 부족해도 줄어들지 않도록 해봅시다.

레벨 35: Flex 기본 크기 (Basis)

Flex 아이템의 초기 크기를 설정해봅시다.

레벨 36: 순서 변경 (Order)

Flex 아이템의 시각적 순서를 변경해봅시다.

레벨 37: 양끝 정렬 (Justify Between)

아이템들을 양쪽 끝으로 붙이고 균등하게 배치해봅시다.

레벨 38: 개별 정렬 (Align Self)

특정 아이템만 다르게 세로 정렬해봅시다.

레벨 39: Grid 열 개수

Grid의 열 개수를 지정해봅시다.

레벨 40: Grid 열 병합 (Col Span)

Grid 아이템이 여러 열을 차지하도록 해봅시다.

레벨 41: Grid 행 병합 (Row Span)

Grid 아이템이 여러 행을 차지하도록 해봅시다.

레벨 42: Grid 흐름 (Flow)

Grid 아이템이 채워지는 방향을 변경해봅시다.

레벨 43: Grid 간격 세부 조정

가로와 세로 간격을 다르게 설정해봅시다.

레벨 44: Grid 아이템 가로 정렬

Grid 셀 내에서 아이템들을 가로로 정렬해봅시다.

레벨 45: Grid 아이템 세로 정렬

Grid 셀 내에서 아이템들을 세로로 정렬해봅시다.

레벨 46: Grid 아이템 중앙 정렬 (Place)

가로와 세로 모두 중앙 정렬해봅시다.

레벨 47: Grid 콘텐츠 배치 (Place Content)

Grid 전체 콘텐츠를 컨테이너 내에서 정렬해봅시다.

레벨 48: 자동 열 크기 (Auto Cols)

암시적으로 생성된 Grid 열의 크기를 제어해봅시다.

레벨 49: Grid 시작/끝 위치

아이템의 시작과 끝 라인을 직접 지정해봅시다.

레벨 50: Flex와 Grid 복습

Flexbox와 Grid를 함께 사용해봅시다.

레벨 51: 모바일 우선 (Mobile First)

기본 스타일을 모바일용으로 작성하고, 큰 화면을 위한 스타일을 추가해봅시다.

레벨 52: Small 브레이크포인트 (sm)

작은 화면(640px 이상)에서의 스타일을 지정해봅시다.

레벨 53: Medium 브레이크포인트 (md)

중간 화면(768px 이상)에서의 스타일을 지정해봅시다.

레벨 54: Large 브레이크포인트 (lg)

큰 화면(1024px 이상)에서의 스타일을 지정해봅시다.

레벨 55: Extra Large 브레이크포인트 (xl)

아주 큰 화면(1280px 이상)에서의 스타일을 지정해봅시다.

레벨 56: 2XL 브레이크포인트 (2xl)

초대형 화면(1536px 이상)에서의 스타일을 지정해봅시다.

레벨 57: 반응형 타이포그래피

화면 크기에 따라 글자 크기를 단계적으로 변경해봅시다.

레벨 58: 반응형 레이아웃

화면 크기에 따라 그리드 컬럼 수를 변경해봅시다.

레벨 59: 반응형 숨김 (Hidden)

특정 화면 크기에서만 요소를 보여주거나 숨겨봅시다.

레벨 60: Max-Width 브레이크포인트

특정 크기 이하에서만 스타일을 적용해봅시다.

레벨 61: 포지션 (Relative)

요소의 위치를 상대적으로 배치할 준비를 합니다.

레벨 62: 포지션 (Absolute)

요소를 문서 흐름에서 제거하고 절대적인 위치에 배치해봅시다.

레벨 63: 위치 좌표 (Top/Right...)

Absolute 요소의 정확한 위치를 지정해봅시다.

레벨 64: 전체 채우기 (Inset)

요소를 부모 요소에 꽉 차게 배치해봅시다.

레벨 65: 포지션 (Fixed)

요소를 화면 뷰포트에 고정해봅시다.

레벨 66: 포지션 (Sticky)

스크롤에 따라 움직이다가 특정 위치에 고정되게 해봅시다.

레벨 67: Z-Index (쌓임 순서)

요소의 앞뒤 순서를 제어해봅시다.

레벨 68: 음수 Z-Index

요소를 다른 요소들 뒤로 보내봅시다.

레벨 69: 가시성 (Visibility)

요소를 보이지 않게 하되 공간은 차지하게 해봅시다.

레벨 70: 넘침 제어 (Overflow)

콘텐츠가 요소 크기를 넘어갈 때 처리 방법을 배워봅시다.

레벨 71: 포커스 상태 (Focus)

입력 필드 등을 선택했을 때 스타일을 변경해봅시다.

레벨 72: 활성 상태 (Active)

버튼 등을 클릭하고 있을 때 스타일을 변경해봅시다.

레벨 73: 그룹 호버 (Group Hover)

부모 요소에 마우스를 올렸을 때 자식 요소의 스타일을 변경해봅시다.

레벨 74: 형제 호버 (Peer Hover)

이전 형제 요소의 상태에 따라 스타일을 변경해봅시다.

레벨 75: 내부 포커스 (Focus Within)

자식 요소 중 하나라도 포커스를 받으면 부모 요소의 스타일을 변경해봅시다.

레벨 76: 비활성 상태 (Disabled)

요소가 비활성화되었을 때 스타일을 변경해봅시다.

레벨 77: 플레이스홀더 색상

입력 필드의 안내 텍스트 색상을 변경해봅시다.

레벨 78: 커서 모양 (Cursor)

마우스 커서의 모양을 변경해봅시다.

레벨 79: 텍스트 선택 방지 (User Select)

사용자가 텍스트를 드래그하여 선택하지 못하게 해봅시다.

레벨 80: 부드러운 스크롤 (Smooth Scroll)

페이지 내 이동 시 부드럽게 스크롤되도록 해봅시다.

레벨 81: 크기 변환 (Scale)

요소의 크기를 확대하거나 축소해봅시다.

레벨 82: 회전 (Rotate)

요소를 회전시켜봅시다.

레벨 83: 이동 (Translate)

요소를 X축이나 Y축으로 이동시켜봅시다.

레벨 84: 비틀기 (Skew)

요소를 비틀어봅시다.

레벨 85: 변환 기준점 (Origin)

변환의 기준점을 변경해봅시다.

레벨 86: 트랜지션 기초

상태 변화를 부드럽게 만들어봅시다.

레벨 87: 지속 시간 (Duration)

트랜지션이 일어나는 시간을 조절해봅시다.

레벨 88: 타이밍 함수 (Ease)

트랜지션의 속도 곡선을 변경해봅시다.

레벨 89: 지연 시간 (Delay)

트랜지션 시작을 지연시켜봅시다.

레벨 90: 애니메이션 (Animation)

반복되는 애니메이션을 추가해봅시다.

레벨 91: 카드 컴포넌트

일반적인 카드 UI를 만들어봅시다.

레벨 92: 버튼 그룹

여러 버튼을 연결된 그룹으로 만들어봅시다.

레벨 93: 폼 입력 그룹

라벨과 입력 필드를 예쁘게 배치해봅시다.

레벨 94: 네비게이션 바

로고와 메뉴가 있는 상단 바를 만들어봅시다.

레벨 95: 배지 (Badge)

작은 상태 표시 배지를 만들어봅시다.

레벨 96: 알림 (Alert)

사용자에게 메시지를 전달하는 알림 박스를 만들어봅시다.

레벨 97: 아바타 (Avatar)

사용자 프로필 이미지를 원형으로 만들어봅시다.

레벨 98: 드롭다운 메뉴

클릭 시 나타나는 메뉴의 스타일을 잡아봅시다 (동작은 제외).

레벨 99: 모달 오버레이

모달 창 뒤의 배경을 어둡게 처리해봅시다.

레벨 100: 최종 도전: 대시보드 위젯

지금까지 배운 내용을 종합하여 대시보드 위젯을 만들어봅시다.