lvh, svh, dvh에 대해
MDN에서는 vw, vh에 대해 다음과 같이 설명하고 있다.
초기 컨테이닝 블록(Initial Containing Block, ICB)은 뷰포트의 크기와 동일하다고 생각하면 된다.
화면에 가득 채울 콘텐츠의 경우 100vh를 사용하면 되어서 편했음.
하지만, 모바일 브라우저들이 사용자들에게 보다 많은 콘텐츠를 보여주기 위해 트릭을 사용하면서 사용이 불편해짐.
e.g. 스크롤 시 모바일 브라우저의 UI가 변경되는 것. (주소표시줄이 내려가면서 뷰포트가 커짐)
Q. vh가 ICB의 1%라면, ICB가 변경될 때의 vh의 값은 어떤 값일까?
A1. vh는 ICB가 변경될 때 마다 변경된다.
문제 발생.
e.g. 화면이 100px 일 때, 초기 페이지 로드 시 브라우저 UI가 15px이면 뷰포트가 85px이고, 스크롤 시 브라우저 UI가 10px이면 뷰포트는 90px임. 이러면 사용자가 스크롤 할 때마다 vh의 높이가 바뀌어서 좋은 경험을 주지 못함.
A2. vh 동작의 변경
vh를 브라우저 UI가 가장 작을 때를 기준으로 동작하도록 한다. 즉, 콘텐츠가 가장 클 때를 기준으로 한다. (현재의 lvh)
문제 발생
초기 페이지 로드 시 100vh로 설정한 화면은 스크롤이 필요함.
A3. 새로운 단위의 등장
lvh: 브라우저 UI가 가장 작고 콘텐츠의 크기가 가장 클 때 기준.
svh: 브라우저 UI가 가장 크고 콘텐츠의 크기가 가장 작을 때 기준.
dvh: 뷰포트의 크기 변경에 따라 조정. 창 크기 조정이나 디바이스 회전과 같은 이벤트에 반응. -> 성능 문제 유발 가능성 있음
결론.
페이지 로드 시 전체 화면에 보이게 하려면 svh를 사용.
디바이스를 회전해도 전체 화면에서 보이게 하고 싶다. dvh 사용.
출처