| 단위 | px, em, rem, vw, vh, fr 등 모든 CSS 단위를 비교합니다. 각 단위에 대한 예제, 브라우저 지원 및 사용 시기를 포함합니다. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| 단위 | px, em, rem, vw, vh, fr 등 모든 CSS 단위를 비교합니다. 각 단위에 대한 예제, 브라우저 지원 및 사용 시기를 포함합니다. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| 단위 | px, em, rem, vw, vh, fr 등 모든 CSS 단위를 비교합니다. 각 단위에 대한 예제, 브라우저 지원 및 사용 시기를 포함합니다. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| 단위 | px, em, rem, vw, vh, fr 등 모든 CSS 단위를 비교합니다. 각 단위에 대한 예제, 브라우저 지원 및 사용 시기를 포함합니다. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| 단위 | px, em, rem, vw, vh, fr 등 모든 CSS 단위를 비교합니다. 각 단위에 대한 예제, 브라우저 지원 및 사용 시기를 포함합니다. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
:root 글꼴 크기에 맞게 확장, 사용자 브라우저 설정 존중, 컴포넌트 전반에 걸쳐 일관성
px 사용 금지 — 사용자 글꼴 기본 설정을 존중하지 않음
rem: 일관된 전역 간격; em: 컴포넌트 글꼴 크기에 상대적인 간격
확장되는 컴포넌트에는 px 사용 금지
% : 유동적 컨테이너; ch (45–75ch) : 최적 산문 줄 길이
메인 콘텐츠 너비에 고정 px 사용 금지
dvh: 모바일 브라우저 크롬 겹침 방지; vh: 데스크톱 전용에 적합
모바일에서 100vh 단독 사용 금지 — URL 바가 콘텐츠를 잘라냄
남은 공간을 비례적으로 분배; 그리드에서 %보다 깔끔함
fr와 고정 px 열을 무분별하게 결합하지 말 것
픽셀 정밀 렌더링; 텍스트와 함께 확장할 필요 없음
여기서는 상대 단위가 필요 없음
글꼴 크기에는 rem을 사용하세요. rem은 루트 요소 글꼴 크기(보통 16px)에 상대적이어서 루트 글꼴 크기를 변경하여 전체 UI를 쉽게 확장할 수 있습니다. 이는 사용자의 브라우저 글꼴 크기 기본 설정도 존중하여 접근성을 향상시킵니다. px는 테두리, 그림자, 확장되지 않아야 하는 요소에만 사용하세요.
em은 부모 요소의 글꼴 크기에 상대적이어서 중첩된 요소에서 누적될 수 있습니다. rem은 루트('<'html>) 요소의 글꼴 크기에 상대적이어서 더 예측 가능합니다. 글꼴 크기에는 일반적으로 rem이 선호됩니다. em은 컴포넌트 자체 글꼴 크기에 맞게 확장되어야 하는 패딩과 마진에 유용합니다.
브라우저 뷰포트에 상대적으로 크기를 지정해야 하는 요소(예: 전체 화면 히어로 섹션, 모달)에는 vw/vh를 사용하세요. 부모 컨테이너에 상대적으로 크기를 지정해야 하는 요소에는 퍼센트를 사용하세요. 주소 표시줄이 높이에 영향을 미치는 모바일에서는 dvh(동적 뷰포트 높이)가 vh보다 선호됩니다.
컨테이너 쿼리 단위(cqw, cqh, cqi, cqb)는 뷰포트가 아닌 컨테이너 요소의 크기에 상대적입니다. 컨테이너 컨텍스트(container-type: inline-size)가 필요합니다. 뷰포트 크기에 관계없이 컨테이너 크기에 적응해야 하는 진정으로 반응형인 컴포넌트에 이상적입니다.