Bleeding edge

노치(Safe area) CSS로 고려하는 방법 본문

HTML & CSS

노치(Safe area) CSS로 고려하는 방법

codevil 2023. 10. 14. 01:14

스마트폰이나 다른 여러 디바이스가 등장함에 따라서 다양한 aspect를 고려해야 했던 것 처럼, 새로운 모양의 device를 고려해야하는 케이스가 아이폰의 노치가 등장하면서 생겼다. 노치? 우선 아래의 사진을 보자.

처음에는 m.... 이런식으로 많이 표현되었던 모양이지만(개인적으로는 상단에 배터리나 다른 공간을 활용할 수 있기 때문에 꼭 나쁘다고 생각은 하지 않는다) 이건 디바이스인 생각이고, 프론트엔드로써나는 저 노치의 공간이 생겼을 때의 css를 고려할 수밖에 없었다.이전에 웹에서는 노치를 신경을 별로쓰지 않았던 것 같은데 주소창이 없는 웹뷰 react native에서는 이를 고려할 일들이 몇 번 생겼다.

1. 태그 설정

서론이 길었으니 우선 사전작업을 하는 방법을 이야기하면 우선 head태그 안에 다음과 같은 코드를 넣는다.

<head>
 ...
 <meta name="viewport" content="viewport-fit=cover" />
 ...
</head>

 

2. 사용 방법

필요한 영역에서 다음과 같은 값들을 이용할 수 있다. 이 값을 사용할 때는 env함수로 감싸야한다.

safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left

 

개인적으로는 예시를 하나 보는게 가장 이해가 쉬울 것 같아서 예시를 들어보겠다.

modal의 높이를 100vh - 노치영역 - 56px로 잡야야하는 경우에는 다음과 같이 사용할 수 있다.

.modal{
	height: calc(100vh - env(safe-area-inset-top) - 56px);
}

 

3. 왜 inset right와 left가 있을까

처음에 right와 left에는 노치가 없지 않나라고 의구심이 들었지만, 몇 몇 사진들을 보면서 왜 필요한지 알게 되었다 .

아이폰도 누워서 쉬고 싶을 때가 있기 때문이었다. left와 right를 잘활용하면 이도 가려지지 않게 잘 해결할 수 있을 것이다.

 

마무리

react native의 웹뷰를 처음에 시작할 때는 웹이랑 똑같겠거니.. 라고 생각했지만, 생각보다 웹뷰에 들어오면서 다른 고려해야할 것들이 많고 공부할 것도 있어서 재미있다. 글을 써야하는데 만들게 너무많아서.. 글을 쓸 시간이 너무 줄어든 것 같은데 시간 배치를 잘해봐야것다.. 흑

저작자표시

'HTML & CSS' 카테고리의 다른 글

scss animation mixin  (0) 2023.10.30
모바일 디바이스에서 overscroll 막기  (1) 2023.10.21
transition와 height를 이용하여 애니메이션을 넣기  (0) 2023.05.06
모바일에서 100vh를 적용할 때 생기는 문제 해결하기  (0) 2023.04.04
svg를 before, after과 같은 의사 클래스에 적용하기  (0) 2023.01.26
'HTML & CSS' Related Articles more