간만에 해서 기억이 증발했다.

기본적으로 safe area는 적용해두자.

• 다만 하단 인디케이터나 주소창 같은 경우의 대응은 안되는 경우가 많다.
• 브라우저/OS 버전이나, 디바이스 종류에 따라 위 요소들을 브라우저의 일부로 보는경우도 있음

최신 브라우저

아래 css 요소들 중 필요한 하나를 활용하면 된다.
can i use에서 확인해볼 것

• svh (Small Viewport Height)
  브라우저 UI가 모두 펼쳐진 상태의 viewport 높이 (주소창/툴바 다 보이는 상태)
• lvh (Large Viewport Height)
  브라우저 UI가 모두 숨겨진 상태의 viewport 높이
• dvh (Dynamic Viewport Height)
  현재 상태(주소창이 접히거나 펼쳐진 상태)의 실시간 viewport 높이

구형 브라우저

스크립트를 통해 직접 계산하도록 구현하면된다.

function setRealVH() {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
setRealVH();
window.addEventListener('resize', setRealVH);

리엑트를 사용하고 있을 경우,
아래처럼 이 세 개의 로직을 담고 있는 레이아웃 형태의 컴포넌를 구성해서 사용하면 재사용하기 좋다.