[iOS] 아이폰 노치 영역 대응 | CSS safe-area-inset-* 속성

아이폰에서 웹뷰로 웹페이지를 보게 되는 경우, 노치 영역때문에 실제 컨텐츠의 영역을 침범하게 되는 경우가 많았다. 

특히 하단에 gnb 형태의 메뉴가 들어가는 경우에는 메뉴 영역까지 노치가 침범해서 클릭 범위가 많이 작아지게 되는 경우가 있었다.

그래서 찾아보다가 알게된 것이 env(safe-area-inset..) 속성이다.

 

 

bottom-area의 높이를 80px로 준 상태인데, 노치 영역을 제외하고 80px인 상태가 아니라 노치까지 포함되어 버린다.

 

 

.bottom-area {
	padding-bottom: env(safe-area-inset-bottom);
}

 

bottom-area의 padding-bottom에 env(safe-area-inset-bottom)을 주었더니,

노치 영역을 제외하고 80px이 적용된 것을 확인할 수 있다.

 

 

 

참고 링크

https://developer.mozilla.org/en-US/docs/Web/CSS/env