[CSS] vw와 vh

❓뷰포트

뷰포트(viewport)는 웹 페이지가 표시되는 화면 영역을 의미한다.
뷰포트는 사용자가 웹 페이지를 볼 때 실제로 보이는 영역으로, 브라우저 창이나 모바일 기기의 화면 크기에 따라 동적으로 변한다.

vw

뷰포트 너비의 1/100을 나타내며, 뷰포트의 너비에 상대적인 크기를 지정한다.

뷰포트의 너비가 1000px이라고 가정하면:
1vw = 10px (1000px의 1/100)
50vw = 500px (1000px의 1/2)

vh

뷰포트 높이의 1/100을 나타내며, 뷰포트의 높이에 상대적인 크기를 지정한다.

뷰포트의 높이가 800px이라고 가정하면:
1vh = 8px (800px의 1/100)
50vh = 400px (800px의 1/2)

.container {
  width: 50vw;   /* 뷰포트 너비의 50% */
  height: 75vh;  /* 뷰포트 높이의 75% */
  font-size: 3vw;  /* 뷰포트 너비의 3% */
  padding: 2vh;  /* 뷰포트 높이의 2% */
}