[Tailwind]Tailwind %, vh, svh, lvh,dvh 뭐가 다른 것인가?.

Tailwind를 쓰다보니 몇가지 비슷한 느낌인데, 그럼에도 헷갈릴 수 있는 단위가 몇 가지 있다. 

정리를 해보고자 포스팅을 작성하게 되었다.

1. dvh(Dynamic Viewport Height)

주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되건 상관없이, 현재 보여지는 뷰 포트의 높이를 동적으로 가져온다. 

-> 100dvh는 주소표시줄의 유무에 따라 동적으로 값이 달라진다.

 

2. svh (Short Viewport Height)

사용자 화면을 기준으로 가장 짧은 뷰 포트 값을 가져온다.

주소 표시줄이 없어져도 기존 주소표시줄의 높이값을 뺀 나머지 값을 가져온다.

 

3. lvh(Large Viewport Height) 

svh의 반대개념으로 사용자 화면 기준으로 가장 긴 뷰 포트의 값을 가져온다. 

주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다. 

 

-> 주소 표시줄이 가변적으로 변하는 상황을 가정하여, dvh 사용이 권고된다.