vw ,vh, rem, em

100은 viewport의 100%만큼 차지해달란 의미.
50은 50%

😉vw(viwport width)란 내가 열어놓은 창의 너비

😉vh(viwport height)란 내가 열어놓은 창의 높이.

😉rem이란 기본 폰트사이즈에 비례하는 단위(무조건 16px의 배수 크기)

기본 html 폰트사이즈는 16px
10rem = 160px
(높이 너비 모두 ok)

😉em이란 내가 지정한 .font-size의 배수

font-size: 20px; 로 스타일했다면 2rem은 40px로 스타일.(높이 너비 모두 ok)

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */
  width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}