css 아이폰X 화면 보안 구역

장면
아이폰X는 예전의 다른 휴대전화에 비해 화면 맨 윗부분은 스크린으로 바뀌었고, 밑부분은 물리적 버튼을 없애고 작은 검은색 줄로 바뀌었다. 이런 변화는 웹 개발 과정에서 페이지에 새로운 어울리기 문제를 초래했다.
예를 들어 밑에 붙여야 하는 단추와 호출해야 하는 태블릿과 밑에 있는 팝업 상자는 아이폰X에 작은 검은 줄로 가려진 내용이나 페이지에 하얀 틈이 생기는 문제가 발생한다.
먼저 해결 코드

body {height: 100vh;}
/*       ↓ */
.container {
  position: aboslute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /*    iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /*    iOS >= 11.2 */
  ...
}

몇 가지 새로운 지식
안전 구역
안전 구역은 가시적인 창 범위를 가리키며 안전 구역에 있는 내용은 원각(corners), 앞머리(sensor housing), 작은 검은 줄(Home Indicator)의 영향을 받지 않는다. 아래 그림의 파란색 구역과 같다.
Apple 공식 문서:adaptivity-and-layout
viewport-fit
애플은 아이폰X가 기존viewport meta 탭에 대한 확장을 맞추기 위해 웹 페이지의 시각적 창 레이아웃 방식을 설정하기 위해 세 가지 값을 설정할 수 있는 새로운 기능을 추가했다.

contain: 보기 창에 웹 페이지 내용을 완전히 포함합니다(왼쪽 그림)

cover: 웹 페이지가 보이는 창을 완전히 덮어씁니다(오른쪽 그림).

auto: 기본값,contain과 일치

참고 문서:viewport-fit-descriptor
env
iOS11 새로운 기능, Webkit의 CSS 함수, CSS에 사용자 에이전트 정의 변수를 삽입하여 보안 영역과 경계의 거리를 설정하는 데 사용되는 네 가지 미리 정의된 변수:

safe-area-inset-left: 안전구역 거리 왼쪽 경계 거리

safe-area-inset-right: 안전구역 거리 오른쪽 경계 거리

safe-area-inset-top: 안전구역 거리 상부 경계 거리

safe-area-inset-bottom: 안전구역 거리 밑부분 경계 거리

env()는viewport-fit=cover와 함께 사용해야 합니다!
우리가 가장 자주 사용하는 것은 safe-area-inset-bottom인데 이것은 작은 검은 줄에 가려지지 않는 안전 거리를 대표한다.

    padding-bottom: env(safe-area-inset-bottom);

참고 문서: 디자인-websites-for-iphone-x, MDN/env()
reference
https://aotu.io/notes/2017/11...