CSS 단위 치트시트 (px·em·rem·vw 정리)

절대 단위

단위	기준	비고
px	화면 픽셀	고정 크기. 가장 직관적

상대 단위 (반응형의 핵심)

단위	기준	쓰임
rem	루트(html) 글꼴 크기	글꼴·여백 전반(권장)
em	부모 글꼴 크기	컴포넌트 내부 비례
%	부모 크기	너비·높이
vw / vh	뷰포트 너비/높이의 1%	풀스크린 요소
fr	그리드 남는 공간 비율	grid-template-columns

html { font-size: 16px; }     /* 1rem = 16px */
.title { font-size: 1.5rem; } /* = 24px, 루트 기준 */
.box   { padding: 1em; }      /* 그 요소 글꼴 크기 기준 */
.hero  { height: 100vh; }     /* 화면 높이 가득 */

em vs rem (가장 헷갈리는 부분)

/* em은 중첩되면 누적된다 */
.parent { font-size: 20px; }
.parent .child { font-size: 2em; }   /* 40px */
.parent .child .grand { font-size: 2em; } /* 80px! */

/* rem은 항상 루트 기준이라 누적되지 않음 */
.any { font-size: 2rem; } /* 어디서든 32px (루트 16px일 때) */

clamp() — 반응형 한 줄로

/* 최소 16px, 기본 4vw, 최대 28px 사이에서 유동 */
font-size: clamp(16px, 4vw, 28px);

일반적 권장: 글꼴·여백은 rem, 컴포넌트 내부 비례는 em, 레이아웃 너비는 %/fr, 풀스크린은 vw/vh. 접근성을 위해 글꼴에 px 고정은 피하는 편이 좋습니다.