CSS에서 사용하는 값과 단위

데이터 형식	설명	예시
<integer>	정수	-1,0,1
<number>	십진수	0.1, -0.1, 10, 11
<dimension>	number에 단위가 있는 것	100px, 90deg,
<percentage>	상대적인 값	100%

 

<length>

• <number>에 있는 단위 중 하나
• css에서 길이 값을 나타낸다.

 

글꼴(font) 기반 상대 길이

단위	설명
cap	요소의 대문자 높이
em	font-size에 의한 글꼴 크기
ex	font의 x-height를 나타냄. 일반적으로 소문자 높이
rem	루트 요소의 font-size에 의한 글꼴 크기
ch	글꼴에서 "0"의 사전적인 너비 측정값
lh	요소 줄 높이
rlh	루트 요소 줄 높이

 

뷰포트(viewport) 기반 상대 길이

뷰포트의 종류에는 4가지가 있다.

• Small - sv
• Large - lv
• Dynamic - dv
• Default 

단위	설명
vh (vh, svh, lvh, dvh)	뷰포트 높이를 백분율로 표시
vw (vw, svw, lvw, dvw)	뷰포트 너비를 백분율로 표시
vmax	vw 와 vh 중 더 큰 것을 백분율로 표시
vmin	vw 와 vh 중 더 작은 것을 백분율로 표시
vb	루트 요소의 블록 축 방향 크기 백분율
vi	루트 요소의 인라인 축 방향 크기 백분율

 

절대 길이 단위

• 물리적 측정 단위

이름	단위	설명
Pixels	px	1px = 1/96 of 1in
Centimeters	cm	1cm = 96px / 2.54
Millimeters	mm	1mm = 1/10 of 1cm
Quarter-millimeters	Q	1Q = 1/40 of 1cm
Inchs	in	1in = 2.54cm = 96px
Picas	pc	1pc = 12pt = 1/6 of 1in
Points	pt	1/72 of 1in