TIL 12일차_CSS단위 vh,vw와 %

CSS에서 vh,vw와 %의 차이

vh = viewport height
vw = viewport width

vh와 vw 모두 width, heigth에 쓸 수 있다.

1. vh와 vw는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환한다.

반면에 %는 창이 중심이 아닌, %를 쓰고있는 엘리먼트의 부모 엘리먼트의 길이에 맞게 반환된다.
또한, 전체 화면의 %를 쓴다 하더라도, 스크롤 바를 포함하지 않은 현재 화면의 길이만을 반환한다.

2. vmin과 vmax

viewport의 길이 중 더 긴 길이를 기준으로 삼으면 vmax,
더 짧은 길이를 기준으로 삼으면 vmin.