vh / vw

📌 Viewport는 웹사이트에서 보여지는 영역을 뜻하며 vh, vw는 현재 실행중인 스크린 크기를 기준으로 상대적인 크기를 반환하는 단위이다.
예를들어 현재 스크린 높이가 1000px이라면 1vh=10px, 50vh=500px 이 된다.

• 특징 1) vh 는 width에서, vw는 height에서 사용 가능하다.
• 특징 2) 실제 보여지는 화면의 상대적 크기를 반환하기 때문에 스크롤바를 포함한 크기를 반환한다. 반면 %는 전체 화면이 아닌 부모 요소의 크기에 비례하기 때문에 스크롤바와 상관이 없다.

vh (Viewport height)

• 100vh = 전체화면 기준
• 1vh = Viewport 높이의 1%

div{ height: 20vh; }

vw (Viewport width)

• 100vw = 전체화면 기준
• 1vw = Viewport 너비의 1%

div{ width: 20vw; }

em / rem

📌 em, rem 은 모두 font-size값에 비례한 상대 단위이다.
예를 들어 font-size가 16px일 때, 1em=16 x 1=16px, 2em=16 x 2=32px 이다. 여기서 기준이 되는 font-size를 변경하면 그에 따른 상대단위 값들도 함께 변경된다.

em, rem 의 차이점은 어떤 font-size를 기준으로 하는가에 따라 발생한다.
em은 해당 요소의 font-size를 기준으로 하고, rem의 r은 root를 뜻하므로 최상위 요소(html)의 font-size를 기준으로 한다.

• em

div{ 
	font-size: 20px;
	width: 10em; /*200px*/
}

• rem

  -html의 font-size가 16px일 때

div{ 
	font-size: 20px;
	width: 10rem; /*160px*/
}