뷰포트 높이를 상대적으로 1%
높이를 갖는다.
vh 단위 이외에 몇 가지 뷰포트 크기에 따른 단위가 추가되었다.
단위 표시 | 설명 |
---|---|
svh | 작은 뷰포트 높이의 1% |
lvh | 큰 뷰포트 높이의 1% |
dvh | 동적 뷰포트 높이의 1% |
설명에서 예시 이미지는 스마트폰의 세로 화면을 기준으로 한다. 가로 화면도 마찬가지이며 모든 장치의 UA(user agent) 뷰포트를 대상으로 한다.
접두어 | 예 | 설명 |
---|---|---|
s |
| 기기의 인터페이스에 동작에 따른 뷰포트 크기이다. UA 인터페이스 중 URL 입력 UI를 예를 들었으나 다른 UA 인터페이스도 동일하다. 하지만 어디까지나 UA의 일반적인 UI 설계에 따른 예측이며 결과는 다를 수도 있다. |
l |
| 사용 가능한 최대의 뷰포트 크기이다. |
d |
| 뷰포트의 크기를 동적으로 계산 |
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Values and Units Module Level 4 | 초안 작업 | CSS 속성이 허용하는 공통 값, 단위와 CSS 속성 정의에서 이를 설명하는 데 사용되는 구문을 설명한다. Last review date: 2022-5-28 |