[CSS] IOS 노치 화면 safearea 이슈

* 하단에 토스트 팝업 등을 띄울 때 ios나 안드에서 잘리는 이슈가 생길 수 있다.

예를 들어, 단말기 화면 가장자리가 둥글 때 발생한다.

이 때 사용할 수 있는 방법이 safe-area-inset-top/right/bottom/left

참고: https://wit.nts-corp.com/2019/10/24/5731

아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

// iOS 11.0 버전
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11.2 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

// 사용할 때
bottom: 10px;
bottom: calc(constant(safe-area-inset-bottom) + 10px);
bottom: calc(env(safe-area-inset-bottom) + 10px);;