CSS 단위

CSS 단위

[참고] [length 참고]

절대 길이 단위

다음은 모두 절대 길이 단위이며 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다. 이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다

단위	이름	설명
cm센티미터1cm = 96px/2.54
mm밀리미터1mm = 1/10th of 1cm
Q4분의 1 밀리미터1Q = 1/40th of 1cm
in인치1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
pt포인트1pt = 1/72th of 1in
px픽셀1px = 1/96th of 1in

상대 길이 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다(반응형 웹페이지를 만들 수 있다). 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.

단위	설명
em	요소의 글꼴 크기. -[참고]
rem	루트 요소의 글꼴 크기.- [참고]
ex	요소 글꼴의 x-height.
ex	요소 글꼴의 x-height.
ch	요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
lh	요소의 라인 높이.
vw	viewport 너비의 1%.- [참고]
vh	viewport 높이의 1%.
vmin	viewport 의 작은 치수의 1%.
vmax	viewport 의 큰 치수의 1%.
%	em 같이 상대적으로 설정된다