목록2023/10/14 (1)

Bleeding edge

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

스마트폰이나 다른 여러 디바이스가 등장함에 따라서 다양한 aspect를 고려해야 했던 것 처럼, 새로운 모양의 device를 고려해야하는 케이스가 아이폰의 노치가 등장하면서 생겼다. 노치? 우선 아래의 사진을 보자. 처음에는 m.... 이런식으로 많이 표현되었던 모양이지만(개인적으로는 상단에 배터리나 다른 공간을 활용할 수 있기 때문에 꼭 나쁘다고 생각은 하지 않는다) 이건 디바이스인 생각이고, 프론트엔드로써나는 저 노치의 공간이 생겼을 때의 css를 고려할 수밖에 없었다.이전에 웹에서는 노치를 신경을 별로쓰지 않았던 것 같은데 주소창이 없는 웹뷰 react native에서는 이를 고려할 일들이 몇 번 생겼다. 1. 태그 설정 서론이 길었으니 우선 사전작업을 하는 방법을 이야기하면 우선 head태그 안에..
HTML & CSS 2023. 10. 14. 01:14
이전 Prev 1 Next 다음