[CSS] 아이폰 노치 영역

📌노치(Notch)란?

아이폰X 이상부터 위/아래 라운드 영역까지 디스플레이 영역으로 포함하고 있다.

해당 영역을 제외하지 않고 작업 진행 시 웹뷰에서 컨텐츠(Header, Footer, TabBar.. 등)가 가려지거나 짤려 보이는 현상이 발생한다.

 

출처 :https://blog.rightbrain.co.kr/?p=8499

 

 

 

📢 노치 대응 방법

노치 영역을 자동으로 계산해 주는 CSS 속성인 env(), constant() 를 사용한다.

IOS 11 당시 constant()속성을 제공하였으나, IOS 11.2버전부터 제거되고 env() 속성을 사용한다.(업데이트 되지 않은 경우를 생각하여 둘 다 적용 시켜준다.)

 

//IOS 11버전
padding-top:constant(safe-area-inset-top);
padding-right:constant(safe-area-inset-right);
padding-bottom:constant(safe-area-inset-bottom);
padding-right:constant(safe-area-inset-right);

//IOS 11.2 이상 버전
padding-top:env(safe-area-inset-top);
padding-right:env(safe-area-inset-right);
padding-bottom:env(safe-area-inset-bottom);
padding-right:env(safe-area-inset-right);

//calc()함수와 같이 사용
padding-top:calc(env(safe-area-inset-top) + 40px);