앱 작업 시 아이폰 상단 노치, 하단 인디케이터 부분에 여백을 주어 잘리는 부분 없이 전부 한 화면에 보일 수 있도록 함

/* 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)

• 작성 예시

  header {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 100;
  	width: 100%;
  	**height: calc(64px + env(safe-area-inset-top));** /* 헤더가 상단 노치라서 top 사용 */
  	**height: calc(64px + constant(safe-area-inset-top));**
  	padding: 0 20px;
  	**padding-top: env(safe-area-inset-top);
  	padding-top: constant(safe-area-inset-top);**
  	background: #fff;
  }
  
  footer {
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	z-index: 10;
  	width: 100%;
  	**height: calc(68px + env(safe-area-inset-bottom));** /* 푸터가 하단 인디케이터라서 bottom 사용 */
  	**height: calc(68px +  constant(safe-area-inset-bottom));**
  	padding: 10px 0;
  	**padding-bottom: env(safe-area-inset-bottom);
  	padding-bottom: constant(safe-area-inset-bottom);**
  	background: #fff;
  	box-shadow: 0px -2px 14px 0px rgba(34, 34, 34, 0.1);
  	border-radius: 12px 12px 0 0;
  	overflow: hidden;
  }