rem, vw, vh

rem

• CSS의 단위 중 하나

• rem = 'root' em
  rem을 사용하면 최상위 태그(보통 html 태그)에서 정의한 폰트 사이즈를 기준으로 사이즈를 지정할 수 있다.

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}
.container {
	width: 70rem; //14px*70=980px
}

1.2rem은 최상위 태그에 정의된 폰트 사이즈 14px*1.2=16.8px가 된다.
글자 뿐 아니라 컴포넌트의 사이즈를 지정할 때에도 폰트 사이즈를 기준으로 설정할 수 있다.

vw, vh

• 뷰포트(view port)를 기준으로 하는 길이 값
  문서 또는 모바일 기기에서 볼 수 있는 부분의 크기를 기준으로 크기를 설정

vw(Viewport Width): 뷰포트 너비의 1% 길이와 동일
vh(Viewport Height): 뷰포트 높이의 1% 길이와 동일

• 가장 가까운 부모 요소를 기준으로 너비와 높이를 지정하는 것이 아니라, 화면의 크기를 기준으로 지정할 수 있다!

e.g. 브라우저 높이값이 900px라면 1vh는 9px, 너비값이 750px라면 1vw는 7.5px