# 동적 Viewport 단위 사용

> Clean Markdown view of GeekNews topic #7917. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=7917](https://news.hada.io/topic?id=7917)
- GeekNews Markdown: [https://news.hada.io/topic/7917.md](https://news.hada.io/topic/7917.md)
- Type: news
- Author: [ragingwind](https://news.hada.io/@ragingwind)
- Published: 2022-11-30T09:04:46+09:00
- Updated: 2022-11-30T09:04:46+09:00
- Original source: [web.dev](https://web.dev/viewport-units/)
- Points: 18
- Comments: 0

## Topic Body

- 데스크탑에서 `vw`, `vh` 는 viewport 의 크기를 잘 나타냄  
- 모바일에서는 툴바, 주소창 같은 동적으로 생성되는 UI 에 의해 크기의 영향을 받음 따라서 `100vh` 는 viewport 의 크기를 넘어서거나 스크롤등으로 주소창이 움츠려들면 viewport 크기에 맞게 됨  
- CSS 워킹그룹에서 이런 동적으로 변화하는 크기에 맞추어 쓸 수 있는 단위 제공해서 실제 viewport 와 딱 맞는 크기를 제공  
    - Large viewport: `lvh` 는 동적으로 생성되는 UI 가 없는 경우  
    - Small viewport:  `svh` 는 움처려든 UI 가 다시 확장 된 경우  
    - Dynamic viewport: `dvh` 동적 UI 상태에 맞게 viewport 크기와 같아짐 Chrome 108, Firefox 101, Safari 15.4 에서 지원

## Comments



_No public comments on this page._