iPhoneX Safe Area
개념
아이폰X의 디스플레이 영역은 상/하단 라운드 영역을 포함하고 있지만 상단에 노치(notch)가 존재하여 콘텐츠가 제대로 노출될 수 없다.
물론 하단도 불필요한 마진이 추가되었다.
이를 보안하기 위하여 Safe Area가 등장했다.
전체 화면 적용 방법
메타태그 추가
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>env() 속성 추가
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)마무리
아래의 링크1를 간략하게 정리한 글입니다.