[CSS] 반응형 웹을 만들기 위한 viewport 단위 (vh, vw, vmin, vmax)

 

1. Viewport 란?

---

 

뷰포트(Viewport)는 사용자에게 보여지는 웹페이지의 영역으로 반응형 웹을 만들 때 고려되는 사항이다. 반응형 웹(Responsive Web)은 모바일, 테블릿, PC 등 다양한 디바이스의 디스플레이에 맞춰 뷰포트가 변하는 웹 사이트를 말하는 것이다. 즉, 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태를 말한다. 

 

 

HTML5 부터 <meta>태그로 각 디바이스에 따른 뷰포트에 맞춰 렌더링 영역을 설정할 수 있다. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

content=width=device-width	페이지의 너비를 기기의 뷰포트 너비대로 설정
initial-scale=1.0	처음 페이지 로딩 시 확대/축소가 되지 않은 원래의 페이지 사이즈를 사용하도록 설정

 

2. Viewport를 기준으로 한 단위 ( vw / vh / vmin / vmax )

---

Viewport Width (vw)	뷰포트의 너비에 근거 - viewport 너비(width)의 1%와 동일
Viewport Height (vh)	뷰포트의 높이에 근거 - viewport 높이(height)의 1%와 동일
Viewport Minimum (vmin)	뷰포트의 높이와 너비 중 작은 수치를 기초로 함  : 높이↑ 너비↓ 너비의 1%와 동일 / 높이↓ 너비↑ 높이의 1%와 동일
Viewport Maximum (vmax)	뷰포트의 높이와 너비 중 큰 수치를 기초로 함  : 높이↑ 너비↓ 높이의 1%와 동일 / 높이↓ 너비↑ 너비의 1%와 동일

ex) 

viewport 1 : width: 1200px, height:800px; 

> 10vw : 120px / 10vh : 80px

> 10vmax : 120px / 10vmin : 80px

 

- viewport 단위와 %의 다른 점 

% 단위 : 자식의 너비와 높이는 부모에 의해 결정 

viewport 단위 : 부모와 상관없이 viewport에 의해 결정 

 

개인적으로는 %가 position:relative같다면 viewport는 position:absolute와 같은 느낌

 

 

 

 

배경 뿐만 아니라 글씨의 크기를 반응형 식으로 바꿀 때 참조하면 좋은 링크 

https://zellwk.com/blog/viewport-based-typography/