[CSS] Unit 단위, 길이 - rem, vh, vw, vmin, vmax

em - 부모의 크기를 기준으로 상대크기가 정해짐.

body { font-size: 14px; } 

div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px }

rem (root em) - root 크기를 기준으로 정해짐.

html { font-size: 14px; } 

div { font-size: 1.2rem; }

좀더 편리하게 사용하기 위해서는 rem 을 사용하는게 편리하다.

 

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모니터, 타블렛, 모바일 화면의 가로 넓비를 기준으로 하겠다는 의미이다.

 

vw (Viewport Width)

vh (Viewport Height)

넓이와 높이를 기기화면의 넓이와 높이로 정하겠다는 뜻이다.

90vw 는 기기 화면 넓이의 90%로 넓이를 하겠다는 뜻이다.

90vh 는 기기 화면 높이의 90%로 높이를 하겠다는 뜻이다.

 

vmin (Viewport Minimum)

vmax (Viewport Maximum)

 

 

 

참조

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch