CSS Units

CSS Units

Editing

vh

뷰포트 높이를 상대적으로 1% 높이를 갖는다.

설명

관련된 단위

vh 단위 이외에 몇 가지 뷰포트 크기에 따른 단위가 추가되었다.

단위 표시설명
svh작은 뷰포트 높이의 1%
lvh큰 뷰포트 높이의 1%
dvh동적 뷰포트 높이의 1%

참고

뷰포트의 상대 길이에 사용되는 단위의 접두어

설명에서 예시 이미지는 스마트폰의 세로 화면을 기준으로 한다. 가로 화면도 마찬가지이며 모든 장치의 UA(user agent) 뷰포트를 대상으로 한다.

접두어설명
s
  • svw
  • svh
  • svi
  • svb
  • svmin
  • svmax

기기의 인터페이스에 동작에 따른 뷰포트 크기이다.

UA 인터페이스 중 URL 입력 UI를 예를 들었으나 다른 UA 인터페이스도 동일하다. 하지만 어디까지나 UA의 일반적인 UI 설계에 따른 예측이며 결과는 다를 수도 있다.

l
  • lvw
  • lvh
  • lvi
  • lvb
  • lvmin
  • lvmax

사용 가능한 최대의 뷰포트 크기이다.

d
  • dvw
  • dvh
  • dvi
  • dvb
  • dvmin
  • dvmax

뷰포트의 크기를 동적으로 계산

 

버전 명세

Modules
Module NameStatusSummary
CSS Values and Units Module Level 4초안 작업

CSS 속성이 허용하는 공통 값, 단위와 CSS 속성 정의에서 이를 설명하는 데 사용되는 구문을 설명한다.


Last review date: 2022-5-28