CSS Reference

CSS 단위

CSS에는 크기를 나타내는 단위가 있습니다. 많이 사용하는 대표적인 크기 단위는 px, em, %이 있습니다.

px(픽셀)단위는 화소 1개의 크기를 의미합니다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식합니다.

em은 배수 단위로 상대 단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적인 사이즈를 설정합니다.

%는 백분율 단위의 상대단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다.

단위	관련 사항
em	em은 상위 요소의 font-size를 정의합니다. ex)1.5em 이런 식으로 정의합니다.
rem	Root em를 뜻합니다."r"은 바로 "root(최상위)"를 뜻하며 html요소의 크기를 기준으로 합니다.
vh와vw	vh 요소는 뷰포트 높이값의 100분의 1의 단위이고 vw는 뷰포트 너비값의 100분의 1 단위입니다.
vmin과 vmax	뷰포트의 너비값과 높이값에 최대, 최소값을 지정할 수 있습니다.
ex	요소 font의 x-height값을 지정합니다.ex는 em(너비)의 높이 버전이라고 생각하면 됩니다.
ch	요소 font의 글꼴 단위는 제로 문자인 0의 너비값의 척도로 정의됩니다.
lh	요소의 라인 높이를 지정합니다.
%	%는 백분율 단위의 상대단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다.
절대 단위
px	px(픽셀)단위는 화소 1개의 크기를 의미합니다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다.
cm	센티미터 입니다. 표시됩니다. 1cm = 96px/2.54
mm	밀리미터 입니다. 1mm = 1/10th of 1cm
Q	mm의 4분의 1 입니다. 1Q = 1/40th of 1cm
in	인치 입니다. 1in = 2.54cm = 96px
pc	Picas(파이카)입니다. 1pc = 1/16th of 1in
pt	pt(포인트)입니다. 1pt = 1/72th of 1in