CSS CSS 단위

CSS 단위

가장 자주 사용되는 숫자 형식은 length 입니다. 예를 들면 10px (픽셀) 또는30em. CSS 에서 사용되는 길이는 상대 및 절대의 두 가지 유형이 있습니다.

절대 길이 단위

다음은 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.

단위 이름 다음과 동일함
cm 센티미터 1cm = 96px/2.54
mm 밀리미터 1mm = 1/10th of 1cm
Q 4분의 1 밀리미터 1Q = 1/40th of 1cm
in 인치 1in = 2.54cm = 96px
pc Picas 1pc = 1/16th of 1in
pt 포인트 1pt = 1/72th of 1in
px 픽셀 1px = 1/96th of 1in

이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 cm (센티미터) 를 사용하지 않습니다. 보통 사용하는 유일한 값은 px (픽셀) 입니다.

상대 길이 단위

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

단위 관련 사항
ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.
em 요소의 글꼴 크기. 부모 요소의 크기의 영향을 받아 크기가 변함
ex 요소 글꼴의 x-height.
lh 요소의 라인 높이.
rem 루트 요소의 글꼴 크기.부모 요소의 크기의 영향을 받아 크기가 변함
vh viewport 높이의 1%. view port height의 약자 / 80vh = "뷰포트 영역의 80%
vmax viewport 의 큰 치수의 1%. 뷰포트의 최대값 / 설정한 view port값에 따라 변함
vmin viewport 의 작은 치수의 1%. 뷰포트의 최소값 / 설정한 view port값에 따라 변함
vw viewport 너비의 1%. view port width의 약자 / 80vw = "뷰포트 영역의 80%
% 부모요소의 크기의 영향을 받아 크기가 변함