CSS 단위

width / length / font-size

 

단위변환 사이트

http://pxtoem.com/

절대길이

cm	센치미터
mm	밀리리터
in	인치(1in = 96px = 2.54cm)
px *	픽셀(1px = 1/96th of 1in)
pt	포인트 (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

* 픽셀(px)은 시청 장치를 기준으로 합니다. 낮은 dpi 장치의 경우 1px는 디스플레이의 하나의 장치 픽셀(점)입니다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미합니다.

상대길이

단위에 상대적

em	와 같은 활자체 속성의 경우 부모의 font-size글꼴 크기, 와 같은 다른 속성의 경우 요소 자체의 글꼴 크기 width.
ex	요소 글꼴의 x 높이입니다.
ch	요소 글꼴의 상형 문자 "0"의 사전 측정값(너비)입니다.
rem	루트 요소의 글꼴 크기입니다.
lh	요소의 줄 높이입니다.
rlh	루트 요소의 줄 높이입니다. font-size루트 요소의 또는 속성에 사용할 line-height경우 속성의 초기 값을 나타냅니다.
vw	뷰포트 너비의 1%입니다. viewport width / 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환
vh	뷰포트 높이의 1%입니다. viewport height / 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환
vmin	뷰포트의 작은 치수의 1%입니다.
vmax	뷰포트의 더 큰 치수의 1%입니다.
vb	루트 요소의 블록 축 방향으로 초기 포함 블록 크기의 1%입니다 .
vi	루트 요소의 인라인 축 방향으로 초기 포함 블록 크기의 1%입니다 .
svw, svh	작은 뷰포트 의 너비와 높이의 각각 1% .
lvw, lvh	큰 뷰포트 의 너비와 높이의 각각 1% .
dvw, dvh	동적 뷰포트 너비 및 높이의 각각 1%입니다 .

* 뷰포트 = 브라우저 창 크기. 뷰포트 너비가 50cm인 경우 1vw = 0.5cm입니다.

 

vh, vw    /    %   차이

100% 과 100vh 설정하는 것이 무엇이 다르냐

1. vh 는 width 에서도 사용이 가능, vw 도 height에서 사용이 가능

- width: 100% 와 / width: 100vh 는 다른 차이

2. vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환

- 반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환

vmin 과 vmax

viewport 의 길이 중 더 긴 길이를 기준으로 삼으면 vmax

더 짧은 길이를 기준으로 삼는 것은 vmin

 

출처 및 참고자료

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

CSS Units

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

CSS values and units - Learn web development | MDN

[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이 (tistory.com)

[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이