외워 쓸 내용이 아니라는 사실, 알고 있지만 그냥 암기됐으면 좋겠다. 하나하나 더듬더듬 타이핑/수정하는 내가 답답스러워욥

차라리 영어 단어 100개를 외우라면 외우겠..

🪸 font-weight로 보는 CSS 속성, Tailwind 유틸리티 혼동 포인트

🖥️ globals.css
@theme {
  --color-mint-500: #d1ffff;
  --color-myColor: #c71eff;
  --font-weight-chubby: bold; // 숫자로 넣는 게 더 안전하대. 처비 귀엽지..?
  ➡️ --font-weight-chubby: 600;
}

.my-dark-element {
  background: black;
  color: white;
  font: semi-bold; ❌ // 내가 만든 끔찍한 혼종
  ➡️ font-weight: 400; ✅
  @variant dark {
    @variant hover {
      background: red;
      color: purple;
      font: extra-bold; ❌ // 내가 만든 끔찍한 혼종
      ➡️ font-weight: 800; ✅
    }
  }
}

✅ 올바른 문법

font-weight: 600;      /* 숫자 값 */
font-weight: bold;     /* 키워드 */
font-weight: var(--font-weight-chubby); /* theme 변수 */

---

CSS 속성, Tailwind 유틸리티 표

🔹 레이아웃 (Layout)

CSS 속성	Tailwind 유틸리티	예시
display	block, inline-block, flex, grid, hidden	display: flex → flex
position	static, relative, absolute, fixed, sticky	position: relative → relative
top, right, bottom, left	top-0, right-4, bottom-auto, left-1/2	top: 0 → top-0
z-index	z-0, z-10, z-50	z-index: 10 → z-10
overflow	overflow-hidden, overflow-auto, overflow-scroll	overflow: hidden → overflow-hidden
overflow-x, overflow-y	overflow-x-auto, overflow-y-scroll	overflow-x: auto → overflow-x-auto

🔹 Flexbox

CSS 속성	Tailwind 유틸리티	예시
flex-direction	flex-row, flex-col, flex-row-reverse	flex-direction: column → flex-col
flex-wrap	flex-wrap, flex-nowrap, flex-wrap-reverse	flex-wrap: wrap → flex-wrap
justify-content	justify-start, justify-center, justify-between, justify-around	justify-content: center → justify-center
align-items	items-start, items-center, items-end, items-stretch	align-items: center → items-center
align-content	content-start, content-center, content-between	align-content: center → content-center
align-self	self-auto, self-start, self-center, self-end	align-self: center → self-center
flex-grow	grow, grow-0	flex-grow: 1 → grow
flex-shrink	shrink, shrink-0	flex-shrink: 0 → shrink-0
flex	flex-1, flex-auto, flex-initial, flex-none	flex: 1 → flex-1
order	order-1, order-first, order-last	order: 1 → order-1
gap	gap-4, gap-x-2, gap-y-4	gap: 1rem → gap-4

🔹 Grid

CSS 속성	Tailwind 유틸리티	예시
grid-template-columns	grid-cols-3, grid-cols-12	grid-template-columns: repeat(3, 1fr) → grid-cols-3
grid-template-rows	grid-rows-3, grid-rows-none	grid-template-rows: repeat(3, 1fr) → grid-rows-3
grid-column	col-span-2, col-start-1, col-end-3	grid-column: span 2 → col-span-2
grid-row	row-span-2, row-start-1, row-end-3	grid-row: span 2 → row-span-2
grid-auto-flow	grid-flow-row, grid-flow-col, grid-flow-dense	grid-auto-flow: column → grid-flow-col

🔹 간격 (Spacing)

CSS 속성	Tailwind 유틸리티	예시
padding	p-4, px-2, py-4, pt-2, pr-2, pb-2, pl-2	padding: 1rem → p-4
margin	m-4, mx-2, my-4, mt-2, mr-2, mb-2, ml-2, -m-4	margin: 1rem → m-4
space-between	space-x-4, space-y-4	(자식 요소 간격)

🔹 크기 (Sizing)

CSS 속성	Tailwind 유틸리티	예시
width	w-full, w-1/2, w-64, w-auto, w-screen	width: 100% → w-full
min-width	min-w-0, min-w-full, min-w-min	min-width: 100% → min-w-full
max-width	max-w-xs, max-w-md, max-w-full, max-w-screen-xl	max-width: 100% → max-w-full
height	h-full, h-screen, h-64, h-auto	height: 100% → h-full
min-height	min-h-0, min-h-full, min-h-screen	min-height: 100vh → min-h-screen
max-height	max-h-full, max-h-screen	max-height: 100% → max-h-full

🔹 타이포그래피 (Typography)

CSS 속성	Tailwind 유틸리티	예시
font-family	font-sans, font-serif, font-mono	font-family: sans-serif → font-sans
font-size	text-xs, text-sm, text-base, text-lg, text-xl, text-2xl	font-size: 1rem → text-base
font-weight	font-thin, font-normal, font-medium, font-bold, font-black	font-weight: bold → font-bold
font-style	italic, not-italic	font-style: italic → italic
line-height	leading-none, leading-tight, leading-normal, leading-loose	line-height: 1.5 → leading-normal
letter-spacing	tracking-tighter, tracking-tight, tracking-normal, tracking-wide	letter-spacing: 0.05em → tracking-wide
text-align	text-left, text-center, text-right, text-justify	text-align: center → text-center
text-decoration	underline, line-through, no-underline	text-decoration: underline → underline
text-transform	uppercase, lowercase, capitalize, normal-case	text-transform: uppercase → uppercase
text-overflow	truncate, text-ellipsis, text-clip	text-overflow: ellipsis → truncate
white-space	whitespace-normal, whitespace-nowrap, whitespace-pre	white-space: nowrap → whitespace-nowrap
word-break	break-normal, break-words, break-all	word-break: break-all → break-all
vertical-align	align-baseline, align-top, align-middle, align-bottom	vertical-align: middle → align-middle

🔹 색상 (Colors)

CSS 속성	Tailwind 유틸리티	예시
color	text-black, text-white, text-red-500, text-blue-700	color: #000 → text-black
background-color	bg-black, bg-white, bg-red-500, bg-transparent	background-color: white → bg-white
border-color	border-black, border-red-500, border-transparent	border-color: black → border-black
opacity	opacity-0, opacity-50, opacity-100	opacity: 0.5 → opacity-50

🔹 테두리 (Borders)

CSS 속성	Tailwind 유틸리티	예시
border-width	border, border-0, border-2, border-t-2, border-r-2	border-width: 1px → border
border-style	border-solid, border-dashed, border-dotted, border-none	border-style: solid → border-solid
border-radius	rounded, rounded-none, rounded-sm, rounded-lg, rounded-full	border-radius: 0.25rem → rounded
border-radius (개별)	rounded-t-lg, rounded-r-lg, rounded-tl-lg	border-top-left-radius: 0.5rem → rounded-tl-lg
outline	outline-none, outline, outline-2	outline: none → outline-none
outline-offset	outline-offset-0, outline-offset-2	outline-offset: 2px → outline-offset-2
ring-width	ring, ring-0, ring-2, ring-inset	(Tailwind 전용)
ring-color	ring-black, ring-blue-500	(Tailwind 전용)

🔹 효과 (Effects)

CSS 속성	Tailwind 유틸리티	예시
box-shadow	shadow, shadow-sm, shadow-md, shadow-lg, shadow-none	box-shadow: ... → shadow
opacity	opacity-0, opacity-25, opacity-50, opacity-100	opacity: 0.5 → opacity-50
mix-blend-mode	mix-blend-normal, mix-blend-multiply, mix-blend-overlay	mix-blend-mode: multiply → mix-blend-multiply
background-blend-mode	bg-blend-normal, bg-blend-multiply	background-blend-mode: multiply → bg-blend-multiply

🔹 필터 (Filters)

CSS 속성	Tailwind 유틸리티	예시
filter: blur()	blur-none, blur-sm, blur, blur-lg	filter: blur(4px) → blur
filter: brightness()	brightness-0, brightness-50, brightness-100	filter: brightness(0.5) → brightness-50
filter: contrast()	contrast-0, contrast-50, contrast-100	filter: contrast(1.5) → contrast-150
filter: grayscale()	grayscale-0, grayscale	filter: grayscale(1) → grayscale
filter: invert()	invert-0, invert	filter: invert(1) → invert
filter: saturate()	saturate-0, saturate-50, saturate-100	filter: saturate(1.5) → saturate-150
filter: sepia()	sepia-0, sepia	filter: sepia(1) → sepia
backdrop-filter	backdrop-blur, backdrop-brightness-50	(backdrop 버전들)

🔹 전환 & 애니메이션 (Transitions & Animation)

CSS 속성	Tailwind 유틸리티	예시
transition-property	transition, transition-none, transition-all, transition-colors	transition: all → transition-all
transition-duration	duration-75, duration-100, duration-300, duration-1000	transition-duration: 300ms → duration-300
transition-timing-function	ease-linear, ease-in, ease-out, ease-in-out	transition-timing-function: ease-in → ease-in
transition-delay	delay-75, delay-100, delay-300	transition-delay: 300ms → delay-300
animation	animate-none, animate-spin, animate-ping, animate-pulse, animate-bounce	(미리 정의된 애니메이션)

🔹 Transform

CSS 속성	Tailwind 유틸리티	예시
transform: scale()	scale-0, scale-50, scale-100, scale-150	transform: scale(1.5) → scale-150
transform: rotate()	rotate-0, rotate-45, rotate-90, rotate-180, -rotate-45	transform: rotate(45deg) → rotate-45
transform: translate()	translate-x-4, translate-y-4, -translate-x-1/2	transform: translateX(1rem) → translate-x-4
transform: skew()	skew-x-3, skew-y-3, -skew-x-6	transform: skewX(3deg) → skew-x-3
transform-origin	origin-center, origin-top, origin-top-right	transform-origin: center → origin-center

🔹 상호작용 (Interactivity)

CSS 속성	Tailwind 유틸리티	예시
cursor	cursor-auto, cursor-pointer, cursor-not-allowed, cursor-wait	cursor: pointer → cursor-pointer
pointer-events	pointer-events-none, pointer-events-auto	pointer-events: none → pointer-events-none
resize	resize-none, resize, resize-x, resize-y	resize: none → resize-none
user-select	select-none, select-text, select-all, select-auto	user-select: none → select-none
scroll-behavior	scroll-auto, scroll-smooth	scroll-behavior: smooth → scroll-smooth
touch-action	touch-auto, touch-none, touch-pan-x, touch-pan-y	touch-action: none → touch-none

🔹 기타 (Miscellaneous)

CSS 속성	Tailwind 유틸리티	예시
visibility	visible, invisible	visibility: hidden → invisible
list-style-type	list-none, list-disc, list-decimal	list-style-type: disc → list-disc
list-style-position	list-inside, list-outside	list-style-position: inside → list-inside
appearance	appearance-none	appearance: none → appearance-none
object-fit	object-contain, object-cover, object-fill, object-none	object-fit: cover → object-cover
object-position	object-center, object-top, object-bottom	object-position: center → object-center
aspect-ratio	aspect-auto, aspect-square, aspect-video	aspect-ratio: 16/9 → aspect-video
content	content-none	content: "" → (사용 제한적)

🔹 @variant에서 사용 가능한 주요 변형(Variants)

• hover - 마우스 오버 시
• focus - 포커스 시
• active - 활성화 시
• disabled - 비활성화 시
• visited - 방문한 링크
• first - 첫 번째 자식
• last - 마지막 자식
• odd - 홀수 번째
• even - 짝수 번째
• dark - 다크 모드
• sm, md, lg, xl, 2xl - 반응형 브레이크포인트
• group-hover - 그룹 호버
• peer-focus - 피어 포커스