svh
-
모바일에서 100vh가 원하는대로 작동하지 않는다면? (feat. dvh, svh, lvh)Style/CSS 2024. 3. 15. 13:50
height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다. vh? css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다. 그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 ..