[CSS] 단위(4) - vmax, vmin

 

 

 

▶ vmax, vmin
- vmax와 vmin에서 'v'는 viewport를 의미.

- vmax, vmin은 각각 viewport의 최대 너비와 최소 너비를 의미함.

 

  - 위의 결과 화면에서는 viewport의 가로의 길이가 세로 길이보다 더 긴 상태.
  - vmax는 현재 더 넓은 사이즈의 너비를 의미.

  - 위의 예시에서는 가로가 더 길기 때문에 가로 사이즈의 절반만큼 width값을 정의.

 

 

  - 위의 예시처럼 viewport의 가로 너비를 줄여서 세로가 더 길게 만들면 width값은 viewport의 세로 너비의 절반이 됨.

 

 

- vmax와 달리 vmin은 가로/세로 중 더 짧은 쪽의 길이를 백분율로 계산하여 사용.