콘텐츠로 이동

2023 08 22

2023-08-22

safe-area-inset-bottom

참고: https://wit.nts-corp.com/2019/10/24/5731 참고: https://medium.com/@keen0927/iphone-x-%EC%9B%B9%EB%B7%B0-sare-area-inset-%EA%B4%80%EB%A0%A8-61cafd7ce8c6 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/env

  • 안전영역?
    • 해상도 비율이 다양해지면서 영상에서 타이틀/자막 등의 필수 컨텐츠 노출을 보장할 수 있는 영역
    • 아이폰에서도 노치가 생겨서 안정적으로 컨텐츠가 보일 수 있는 Safe Area를 제공
  • 문제점
    • 좌/우/하단 영역의 경우 아이폰X와 그 외 디바이스에서 보이는게 다를 수 있음
    • Safe Area밖의 마진 영역 노출
    • 화면 하단 홈 인디케이터 영역과 레이아웃 겹침 현상
  • 해결1. 전체화면 적용하기
    • <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
  • 해결2. 아이폰 env() 속성
    • 전체 화면 적용한 경우 노치 영역과 하단 인디케이터 영역까지 사용함 => 컨텐츠가 짤리거나 겹쳐보일 수 있음
    • 아이폰X에서 사용가능한 CSS 속성인 env()를 통해 변수를 적용하자
      • env()는 아이폰X에서만 동작함 
        // 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)
  • env()
    • iOS 브라우저에서 제공하는 safe-area-inset-* 사양에 정의된 값을 사용하여 표시

css 적용순서

  1. 선언 순서: 마지막 선언이 앞선 선언보다 우선임. 마지막에 선언된 친구가 프로퍼티를 채갈 것
  2. Specificity: 같은 걸 바라본다면 Specificity가 높은게 우선.
    • ID 셀렉터가 클래스 셀렉터보다 높은 우선순위
    • ID selector > class selector > tag selector
  3. Importance: !important를 줘서 오버라이딩 뚝딱
  4. Inheritance: 자식 요소가 부모 요소로부터 속성을 가져옴
    • 자식은 부모꺼 명시 안하면 그대로 따름

  • 문제 상황

    • 요건 되는데 
      div.content-article.fixed-btm-padding {
    padding-bottom: 78px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 78px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 78px);
}
    • 요건 안됨 
      div.content-article.fixed-btm-padding {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 78px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 78px);
}
    • 이유
      • 이는 CSS가 스타일을 프로세싱하는 방법에 따름
      • 첫번째를 보면 padding-bottom: 78px가 베이스 패딩을 딱 지정하고
        • 그다음에 constant, env로 지지고 볶음
          • constant가 있다면 계산하고
          • constant가 없다면 calc(0 + 78px) => 78px
        • 그다음에 env...
          • env가 있다면 계산하고
          • env가 없다면 calc(0 + 78px) => 78px
      • 두번째는
        • constant가 없으면 78px로 계산이 그냥 되어버리고
        • env 프로퍼티는 오버라이딩된 첫번째 친구때문에 계산될 기회가 없다는데...? (모르겠어)