[css 단위] vh, dvh, lvh, svh

뷰포트 단위로 높이 값을 주고 싶을 때 보통 100vh 단위를 사용 하지만 모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도 주소창 떄문에 화면이 짤리는 경우가 발생할 수 있음 그럴때 dvh, lvh, svh 단위를 사용하면 됨! 단위 설명 100vh 기본 뷰포트 높이 (주소창 포함) 100dvh 현재 실제 사용 가능한 높이 (주소창 변화 반영) 100lvh 가장 큰 뷰포트 높이 (주소창이 완전히 사라진 상태) 100svh 가장 작은 뷰포트 높이 (주소창이 완전히 보이는 상태) 주소창 변화를 반영하는 dvh가 가장 좋아보이나 많은 개발자가 vh를 사용하는 이유는 vh를 제외하고 나머지 3개 단위는 모든 브라우저에서 완벽하게 지원하고 있지 않으므로 *지원 브라우저: Chrome 108+, Edge 108+, Safari 15.4+, Firefox 113+ vh와 dvh를 함께 사용하는것을 추천 :) .classname { height: 100vh; /* vh...