[CSS] dvh, lvh, svh - CSS viewport units

뷰포트(Viewport)란?

뷰포트는 현재 보고 있는 컴퓨터 화면의 영역을 나타낸다. 웹 브라우저 용어로 UI, 메뉴바 등을 제외하고는 일반적으로 브라우저 창과 동일하다.

 

vh, vw

사용 전 호환성 체크 : https://caniuse.com/viewport-units

vh (Viewport Height)

viewport(화면 크기)를 기준으로 하는 단위로 1vh는 뷰포트의 높이의 1%이다.

 

vw (Viewport Width)

1vw는 뷰포트의 너비의 1%이다.

 

 

- 뷰포트 너비, 높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많다.

- 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문이다.

- 100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 UI를 숨기는 사파리/크롬(안드로이드) 에서는 문제가 발생한다.
- 그래서 CSS 워킹 그룹이 새로운 단위인 svh, lvh, dvh 를 발표했다.

 

svh , lvh, dvh

사용 전 호환성 체크 : https://caniuse.com/viewport-unit-variants

이미지 출처 : https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/

 

svh (Short Viewport Height)

svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져온다.

주소 표시줄이 없어져도 기존 주소표시줄의 높이 값을 뺀 나머지 값을 가져온다.

div {height:100dvh;}

 

lvh (Large Viewport Height)

lvh는 svh와는 반대로 사용자 화면 기준으로 가장 긴 뷰표트 값을 가져온다.

주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

div {height:100lvh;}

 

 

dvh (Dynamic Viewport Height)

dvh는 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이

현재 보여지는 뷰포트 높이를 동적으로 가져온다. 

div {height:100dvh;}

 

 

출처

https://abcdqbbq.tistory.com/104

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

https://velog.io/@ken1204/viewport%EB%9E%80