[CSS] Viewport 단위

Viewport : 사용자에게 보여지는 페이지 영역(브라우저 창의 영역)을 말한다.
모바일에서는 브라우저가 뷰포트의 크기다.

vw(Viewport Width) : 보여지는 페이지 영역(뷰포트)의 너비에 반응하여 크기를 반환하는 단위
1vw(뷰포트 너비의 1%) - 뷰포트 너비가 1000px이면 1vh=10px이다(사이즈 1000px일때 폰트크기가 3vw면 30px)

vh(Viewport Height) : 보여지는 페이지 영역(뷰포트)의 높이에 반응하여 크기를 반환하는 단위
1vh(뷰포트 높이의 1%) - 뷰포트 높이가 1000px이면 1vh=10px이다(사이즈 1000px일때 폰트크기가 3vw면 30px)

vmin (Viewport Minimum) : 뷰포트의 높이와 너비중 작은 쪽의 치수를 기초로 한다. (너비가 더 작을 경우 1vmin은 1vw와 같다)

vmax (Viewport Maximum) : 뷰포트의 높이와 너비중 큰 쪽의 치수를 기초로 한다. (높이가 더 클 경우 1vmax은 1vh와 같다)

% 와의 차이 : %는 부모 요소의 크기에 비례하기 때문에 부모 요소에 영향을 받지만
vw,vh는 부모 요소에 전혀 영향을 받지 않는다.

✅ 참고 사이트
CSS 7가지 단위
뷰포트 / 미디어 쿼리