반응형 브레이크포인트상태 (Variants)간격 (Spacing)크기 (Sizing)디스플레이 (Display)플렉스박스 (Flexbox)정렬 (Alignment)그리드 (Grid)위치 (Position)타이포그래피 (Typography)텍스트 정렬 및 장식색상 (Colors)테두리 (Borders)효과 (Effects)전환 및 애니메이션변환 (Transforms)오버플로우 및 기타색상 팔레트
#반응형 브레이크포인트
| 클래스 | CSS | 설명 | |
|---|---|---|---|
sm: | @media (min-width: 640px) | 작은 화면 이상 | |
md: | @media (min-width: 768px) | 중간 화면 이상 | |
lg: | @media (min-width: 1024px) | 큰 화면 이상 | |
xl: | @media (min-width: 1280px) | 특대 화면 이상 | |
2xl: | @media (min-width: 1536px) | 초특대 화면 이상 |
#상태 (Variants)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
hover: | :hover | 마우스 오버 시 | |
focus: | :focus | 포커스 시 | |
active: | :active | 클릭/탭 중 | |
disabled: | :disabled | 비활성화 시 | |
first: | :first-child | 첫 번째 자식 | |
last: | :last-child | 마지막 자식 | |
odd: | :nth-child(odd) | 홀수 번째 자식 | |
even: | :nth-child(even) | 짝수 번째 자식 | |
group-hover: | .group:hover & | 부모 그룹 호버 시 | |
dark: | @media (prefers-color-scheme: dark) | 다크 모드 시 |
#간격 (Spacing)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
p-{size} | padding | 전체 패딩 | |
px-{size} | padding-left/right | 좌우 패딩 | |
py-{size} | padding-top/bottom | 상하 패딩 | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | 개별 방향 패딩 | |
m-{size} | margin | 전체 마진 | |
mx-{size} | margin-left/right | 좌우 마진 | |
my-{size} | margin-top/bottom | 상하 마진 | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | 개별 방향 마진 | |
mx-auto | margin: 0 auto | 수평 중앙 정렬 | |
gap-{size} | gap | Flex/Grid 간격 | |
gap-x-{size} | column-gap | 가로 간격 | |
gap-y-{size} | row-gap | 세로 간격 | |
space-x-{size} | > * + * { margin-left } | 자식 요소 가로 간격 | |
space-y-{size} | > * + * { margin-top } | 자식 요소 세로 간격 |
#크기 (Sizing)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
w-{size} | width | 너비 | |
w-full | width: 100% | 전체 너비 | |
w-screen | width: 100vw | 화면 너비 | |
w-auto | width: auto | 자동 너비 | |
w-fit | width: fit-content | 콘텐츠에 맞춤 | |
min-w-0 | min-width: 0 | 최소 너비 0 | |
min-w-full | min-width: 100% | 최소 너비 100% | |
max-w-{size} | max-width | 최대 너비 | |
max-w-screen-{bp} | max-width: breakpoint | 브레이크포인트 최대 너비 | |
h-{size} | height | 높이 | |
h-full | height: 100% | 전체 높이 | |
h-screen | height: 100vh | 화면 높이 | |
min-h-screen | min-height: 100vh | 최소 화면 높이 | |
max-h-{size} | max-height | 최대 높이 | |
size-{size} | width + height | 너비와 높이 동시 설정 |
#디스플레이 (Display)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
block | display: block | 블록 요소 | |
inline-block | display: inline-block | 인라인 블록 | |
inline | display: inline | 인라인 요소 | |
flex | display: flex | 플렉스 컨테이너 | |
inline-flex | display: inline-flex | 인라인 플렉스 | |
grid | display: grid | 그리드 컨테이너 | |
inline-grid | display: inline-grid | 인라인 그리드 | |
hidden | display: none | 숨김 | |
contents | display: contents | 컨테이너 없이 콘텐츠만 |
#플렉스박스 (Flexbox)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
flex-row | flex-direction: row | 가로 방향 | |
flex-col | flex-direction: column | 세로 방향 | |
flex-row-reverse | flex-direction: row-reverse | 가로 역방향 | |
flex-col-reverse | flex-direction: column-reverse | 세로 역방향 | |
flex-wrap | flex-wrap: wrap | 줄바꿈 허용 | |
flex-nowrap | flex-wrap: nowrap | 줄바꿈 없음 | |
flex-1 | flex: 1 1 0% | 남은 공간 채움 | |
flex-auto | flex: 1 1 auto | 자동 크기 | |
flex-none | flex: none | 고정 크기 | |
grow | flex-grow: 1 | 늘어남 | |
grow-0 | flex-grow: 0 | 늘어나지 않음 | |
shrink | flex-shrink: 1 | 줄어듦 | |
shrink-0 | flex-shrink: 0 | 줄어들지 않음 |
#정렬 (Alignment)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
justify-start | justify-content: flex-start | 메인 축 시작 | |
justify-center | justify-content: center | 메인 축 중앙 | |
justify-end | justify-content: flex-end | 메인 축 끝 | |
justify-between | justify-content: space-between | 메인 축 양끝 정렬 | |
justify-around | justify-content: space-around | 메인 축 균등 분배 | |
justify-evenly | justify-content: space-evenly | 메인 축 동일 간격 | |
items-start | align-items: flex-start | 교차 축 시작 | |
items-center | align-items: center | 교차 축 중앙 | |
items-end | align-items: flex-end | 교차 축 끝 | |
items-baseline | align-items: baseline | 교차 축 베이스라인 | |
items-stretch | align-items: stretch | 교차 축 늘림 | |
self-auto | align-self: auto | 개별 정렬 자동 | |
self-start | align-self: flex-start | 개별 정렬 시작 | |
self-center | align-self: center | 개별 정렬 중앙 | |
self-end | align-self: flex-end | 개별 정렬 끝 |
#그리드 (Grid)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n개 컬럼 | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n개 행 | |
col-span-{n} | grid-column: span n | n개 컬럼 차지 | |
col-start-{n} | grid-column-start: n | n번째 컬럼부터 | |
col-end-{n} | grid-column-end: n | n번째 컬럼까지 | |
row-span-{n} | grid-row: span n | n개 행 차지 | |
row-start-{n} | grid-row-start: n | n번째 행부터 | |
row-end-{n} | grid-row-end: n | n번째 행까지 | |
auto-cols-auto | grid-auto-columns: auto | 자동 컬럼 크기 | |
auto-cols-fr | grid-auto-columns: 1fr | 자동 컬럼 1fr | |
auto-rows-auto | grid-auto-rows: auto | 자동 행 크기 |
#위치 (Position)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
static | position: static | 기본 위치 | |
relative | position: relative | 상대 위치 | |
absolute | position: absolute | 절대 위치 | |
fixed | position: fixed | 고정 위치 | |
sticky | position: sticky | 스티키 위치 | |
top-{size} | top | 상단 거리 | |
right-{size} | right | 우측 거리 | |
bottom-{size} | bottom | 하단 거리 | |
left-{size} | left | 좌측 거리 | |
inset-{size} | top/right/bottom/left | 전체 방향 거리 | |
inset-x-{size} | left/right | 좌우 거리 | |
inset-y-{size} | top/bottom | 상하 거리 | |
z-{n} | z-index | Z축 순서 | |
z-auto | z-index: auto | Z축 자동 |
#타이포그래피 (Typography)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
font-sans | font-family: sans-serif | 산세리프 폰트 | |
font-serif | font-family: serif | 세리프 폰트 | |
font-mono | font-family: monospace | 모노스페이스 폰트 | |
text-xs | font-size: 0.75rem | 아주 작은 글자 | |
text-sm | font-size: 0.875rem | 작은 글자 | |
text-base | font-size: 1rem | 기본 글자 | |
text-lg | font-size: 1.125rem | 큰 글자 | |
text-xl | font-size: 1.25rem | 아주 큰 글자 | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | 더 큰 글자들 | |
font-thin | font-weight: 100 | 가장 얇은 굵기 | |
font-light | font-weight: 300 | 얇은 굵기 | |
font-normal | font-weight: 400 | 보통 굵기 | |
font-medium | font-weight: 500 | 중간 굵기 | |
font-semibold | font-weight: 600 | 세미볼드 | |
font-bold | font-weight: 700 | 볼드 | |
italic | font-style: italic | 이탤릭체 | |
not-italic | font-style: normal | 이탤릭 해제 | |
leading-{size} | line-height | 줄 높이 | |
tracking-{size} | letter-spacing | 자간 |
#텍스트 정렬 및 장식
| 클래스 | CSS | 설명 | |
|---|---|---|---|
text-left | text-align: left | 왼쪽 정렬 | |
text-center | text-align: center | 중앙 정렬 | |
text-right | text-align: right | 오른쪽 정렬 | |
text-justify | text-align: justify | 양쪽 정렬 | |
underline | text-decoration: underline | 밑줄 | |
line-through | text-decoration: line-through | 취소선 | |
no-underline | text-decoration: none | 장식 없음 | |
uppercase | text-transform: uppercase | 대문자 | |
lowercase | text-transform: lowercase | 소문자 | |
capitalize | text-transform: capitalize | 첫글자 대문자 | |
truncate | overflow: hidden; text-overflow: ellipsis | 말줄임 (한 줄) | |
line-clamp-{n} | -webkit-line-clamp: n | n줄 말줄임 | |
whitespace-nowrap | white-space: nowrap | 줄바꿈 없음 | |
break-words | word-wrap: break-word | 단어 줄바꿈 |
#색상 (Colors)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
text-{color}-{shade} | color | 텍스트 색상 | |
bg-{color}-{shade} | background-color | 배경 색상 | |
bg-gradient-to-{dir} | background-image: linear-gradient | 그라디언트 방향 | |
from-{color} | from color | 그라디언트 시작 색 | |
via-{color} | via color | 그라디언트 중간 색 | |
to-{color} | to color | 그라디언트 끝 색 | |
text-transparent | color: transparent | 투명 텍스트 | |
bg-transparent | background-color: transparent | 투명 배경 | |
text-current | color: currentColor | 현재 색상 상속 |
#테두리 (Borders)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
border | border-width: 1px | 1px 테두리 | |
border-{n} | border-width: npx | n픽셀 테두리 | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | 방향별 테두리 | |
border-{color} | border-color | 테두리 색상 | |
border-solid | border-style: solid | 실선 | |
border-dashed | border-style: dashed | 점선 | |
border-dotted | border-style: dotted | 점 | |
border-none | border-style: none | 테두리 없음 | |
rounded | border-radius: 0.25rem | 약간 둥글게 | |
rounded-md | border-radius: 0.375rem | 중간 둥글게 | |
rounded-lg | border-radius: 0.5rem | 많이 둥글게 | |
rounded-xl | border-radius: 0.75rem | 아주 둥글게 | |
rounded-full | border-radius: 9999px | 완전 둥글게 (원형) | |
rounded-none | border-radius: 0 | 둥글기 없음 | |
rounded-t/r/b/l-{size} | border-radius (corners) | 특정 모서리만 |
#효과 (Effects)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
shadow-sm | box-shadow: small | 작은 그림자 | |
shadow | box-shadow: default | 기본 그림자 | |
shadow-md | box-shadow: medium | 중간 그림자 | |
shadow-lg | box-shadow: large | 큰 그림자 | |
shadow-xl | box-shadow: extra large | 아주 큰 그림자 | |
shadow-2xl | box-shadow: 2x large | 최대 그림자 | |
shadow-inner | box-shadow: inset | 내부 그림자 | |
shadow-none | box-shadow: none | 그림자 없음 | |
opacity-{n} | opacity: n% | 투명도 (0-100) | |
blur | filter: blur(8px) | 흐림 | |
blur-{size} | filter: blur(size) | 흐림 정도 | |
brightness-{n} | filter: brightness(n%) | 밝기 | |
contrast-{n} | filter: contrast(n%) | 대비 | |
grayscale | filter: grayscale(100%) | 흑백 | |
invert | filter: invert(100%) | 반전 |
#전환 및 애니메이션
| 클래스 | CSS | 설명 | |
|---|---|---|---|
transition | transition-property: all | 기본 전환 | |
transition-all | transition-property: all | 모든 속성 전환 | |
transition-colors | transition-property: colors | 색상 전환 | |
transition-opacity | transition-property: opacity | 투명도 전환 | |
transition-transform | transition-property: transform | 변환 전환 | |
duration-{ms} | transition-duration: ms | 전환 시간 | |
ease-linear | transition-timing: linear | 선형 이징 | |
ease-in | transition-timing: ease-in | Ease-in | |
ease-out | transition-timing: ease-out | Ease-out | |
ease-in-out | transition-timing: ease-in-out | Ease-in-out | |
delay-{ms} | transition-delay: ms | 전환 지연 | |
animate-spin | animation: spin | 회전 애니메이션 | |
animate-ping | animation: ping | 핑 애니메이션 | |
animate-pulse | animation: pulse | 펄스 애니메이션 | |
animate-bounce | animation: bounce | 바운스 애니메이션 |
#변환 (Transforms)
| 클래스 | CSS | 설명 | |
|---|---|---|---|
scale-{n} | transform: scale(n) | 크기 조절 | |
scale-x-{n} | transform: scaleX(n) | 가로 크기 | |
scale-y-{n} | transform: scaleY(n) | 세로 크기 | |
rotate-{deg} | transform: rotate(deg) | 회전 | |
translate-x-{size} | transform: translateX | 가로 이동 | |
translate-y-{size} | transform: translateY | 세로 이동 | |
skew-x-{deg} | transform: skewX(deg) | 가로 기울임 | |
skew-y-{deg} | transform: skewY(deg) | 세로 기울임 | |
origin-center | transform-origin: center | 변환 기준점 중앙 | |
origin-top | transform-origin: top | 변환 기준점 상단 | |
origin-bottom | transform-origin: bottom | 변환 기준점 하단 |
#오버플로우 및 기타
| 클래스 | CSS | 설명 | |
|---|---|---|---|
overflow-auto | overflow: auto | 필요시 스크롤 | |
overflow-hidden | overflow: hidden | 넘침 숨김 | |
overflow-scroll | overflow: scroll | 항상 스크롤 | |
overflow-visible | overflow: visible | 넘침 표시 | |
overflow-x-{value} | overflow-x | 가로 오버플로우 | |
overflow-y-{value} | overflow-y | 세로 오버플로우 | |
cursor-pointer | cursor: pointer | 포인터 커서 | |
cursor-not-allowed | cursor: not-allowed | 금지 커서 | |
pointer-events-none | pointer-events: none | 클릭 불가 | |
select-none | user-select: none | 선택 불가 | |
select-text | user-select: text | 텍스트 선택 가능 | |
select-all | user-select: all | 클릭시 전체 선택 | |
sr-only | screen reader only | 스크린리더 전용 |
#색상 팔레트
slate
gray
zinc
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
💡 색상 블록을 클릭하면 클래스명이 복사됩니다 (예: blue-500)
사용법: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}
#크기 단위 참고
| 클래스 | 값 | 클래스 | 값 |
|---|---|---|---|
| 0 | 0px | px | 1px |
| 0.5 | 0.125rem (2px) | 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) | 3 | 0.75rem (12px) |
| 4 | 1rem (16px) | 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) | 8 | 2rem (32px) |
| 10 | 2.5rem (40px) | 12 | 3rem (48px) |
| 16 | 4rem (64px) | 20 | 5rem (80px) |
| 24 | 6rem (96px) | 32 | 8rem (128px) |
#자주 묻는 질문 (FAQ)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.