CSS Units

CSS는 길이를 표현하기 위한 여러 단위를 갖고 있다.

CSS 속성들은 너비, 마진, 패딩, 글자 크기, 테두리 너비같은 "길이" 값들을 가진다.

숫자와 단위 사이에 공백이 있어선 안된다. 값이 0이라면 단위는 생략될 수 있다.

몇 속성 중 음수 길이가 허용된다.

길이 단위의 두 타입이 있다 absolute, relative

Absolute Lengths

절대 길이 단위는 고정되어 있고 어떤 값으로 표현되던지 똑같은 크기로 표시된다.

절대 길이 단위는 스크린 상에서의 사용이 추천되지 않는다. 왜냐하면 스크린 사이즈들은 매우 다르기 때문이다.

단위	설명
cm	센티미터
mm	밀리미터
in	인치 (1in = 96px = 2.54cm)
px *	pixels (1px = 1/96th of 1in)
pt	point (1pt = 1/72 of 1in)
pc	picas (1pc = 12pt)

Relative Lengths

상대 길이 단위는 다른 길이 속성에 상대적으로 길이를 지정한다. 

단위	설명
em	요소의 글자 크기에 상대적 (2em은 현재 글자 크기의 2배를 의미)
ex	현 글자의 "x" 높이에 상대적 (드물게 쓰임)
ch	"0" (zero)의 너비에 상대적
rem	루트 요소의 글자 크기에 상대적
vw	viewport의 너비의 1%
vh	viewport의 높이의 1%
vmin	viewport의 더 작은 치수의 1%
vmax	viewport의 더 큰 치수의 1%
%	부모 요소에 상대적

em과 rem 단위는 확장성 있는 레이아웃을 생성하는 데에 유용하다.

viewport는 브라우저 창의 크기이다. viewport가 50cm이면 1vw는 0.5cm이다.

https://www.w3schools.com/css/css_units.asp