숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length> 타입은 <number> 타입에 허용된 단위를 공백없이 붙여서 구성한다. 단, 0
의 경우에는 어떠한 단위에도 0
이므로 단위를 생략해도 무방하다.
〈length〉
단위 | 요약 |
---|---|
cm | 1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다. |
in | 1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다. |
mm | 1cm의 1/10 값을 나타낸다. |
pc | 1in의 1/16 값을 나타낸다. |
pt | 1in의 1/72 값을 나타낸다. |
px | 스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다. |
Q | 1cm의 1/40을 나타낸다. |
deg | 보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다. |
grad | 400grad(그라디안)은 완전한 원을 만든다. |
rad | 2π(라디안)이 완전한 원을 만든다. |
turn | 1turn(턴)이 완전한 원을 만든다. |
cap | 대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다. |
ch | 글꼴 크기에 대한 |
em | 대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다. |
ex | 대상 요소의 폰트의 x-height를 상대 기준으로 사용한다. |
ic | 한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다. |
lh | 요소의 |
rem | html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다. |
rlh | html 요소(:root)의 |
Hz | 1초당 발생한 진동수를 나타낸다. |
kHz | 1000Hz를 나타낸다. |
fr | 그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다. |
vb | html 요소의 블록축 방향으로 뷰포트 길이의 |
vh | 뷰포트 높이를 상대적으로 |
vi | html 요소의 인라인 축 방향으로 뷰포트 길이의 |
vmax | vw 또는 vh 중 큰 값을 나타낸다. |
vmin | vw 또는 vh 중 작은 값을 나타낸다. |
vw | 뷰포트 너비를 상대적으로 1% 폭을 갖는다. |
dpcm | 1cm당 점(dot)의 수를 나타낸다. |
dpi | 1in당 점(dot)의 수를 나타낸다. |
dppx | 1픽셀(pixel)당 점(dot)의 수를 나타낸다. |
ms |
|
s | 초를 나타낸다. |
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Values and Units Module Level 4 | 초안 작업 | CSS 속성이 허용하는 공통 값, 단위와 CSS 속성 정의에서 이를 설명하는 데 사용되는 구문을 설명한다. Last review date: 2022-5-28 |
CSS Values and Units Module Level 3 | 편집자 초안 | Last review date: 2022-6-4 |
CSS1.0 | 권장 | Last review date: 2022-6-4 |
CSS2.1 | 권장 | Last review date: 2022-6-4 |