프로그래밍 공부 노트

안전 영역(Safe Area)은 무엇인가? 안전 영역은 텔레비전 화면에서 볼 수 있는 텔레비전 화면의 영역을 설명하기 위해 텔레비전 제작에서 사용되는 용어다. 텔레비전 화면 해상도 비율이 다양해지면서 영상의 제목, 자막 등 필수 콘텐츠 노출을 보장할 수 있는 영역 으로 사용되는 영역이다. safe area wiki:  https://en.wikipedia.org/wiki/Safe_area_(television) iphone에서의 안전 영역(Safe Area) iphone 8 이하 기종과 달리 iphone x 이후 기종부터는 하드웨어가 변경되면서 화면의 viewport 기준이 변경되었다. iphone 8 viewport iphone 14pro max viewport  viewport 기준이 변경되면서 아래 두가지 문제가 발생했다. 1. 화면 끝의 라운딩 처리로 콘텐츠가 잘리면서 제대로 노출되지 못하는 문제 2. 화면 상단 노치 및 화면 하단에 indicator bar가 viewport에 포함되어 콘텐츠가 겹치는 문제 오른쪽  iphone 14pro max viewport 사진을 보면 화면 끝 라운딩된 부분에 콘텐츠가 잘리고 하단 indicator bar와 콘텐츠가 겹치면서 콘텐츠가 가려지는 문제가 발생하는것을 확인할 수 있다. 또한 따로 설정하지 않으면 아래 사진과 같이 가로 모드 시 표시한 박스부분 및 하단 indicator bar 또한 콘텐츠가 잘리거나 겹쳐서 가려지는 문제가 발생한다. 기본적으로 웹은 브라우저 상단에 네이게이션 고정영역이 있으므로 해당 부분은 콘텐츠가 잘리는 문제를 신경쓰지 않아도 된다. 하지만 앱 내 웹뷰의 경우 상단 네이게이션 고정영역이 없어 위에서 언급한 문제점들이 발생하게된다. CSS env() 속성 사용해서 문제 해결하기 CSS 속성인 env()를 사용하여 상단 노치, 하단 indicator bar, 가로 모드 시 좌우 잘리게되는 부분의 값을 설정할 수 있어 위에서 언급한 문제점들을 모두 해결할 수 있다. ...

  input 태그에 type 속성과는 별개로 inputmode 속성 값을 작성하면 모바일 웹뷰에서 속성값에 따라 특화된 가상 키보드가 활성화 된다.   none 가상 키보드를 사용하지 않는다. 가상 키보드를 직접 구현하는 경우 사용한다.       text (기본값) 사용자의 현재 위치에 맞는 표준 가상 키보드를 제공한다.       decimal 사용자의 위치에 따라 소숫점( , 또는 . )을 제공하는 숫자형 가상 키보드를 제공한다. 사용자의 장치에 따라 음의 부호( - )를 제공할 수도 있고 안할 수도 있다.     numeric 숫자형 가상 키보드를 제공한다. 소숫점은 없으며 사용자의 장치에 따라 음의 부호( - )를 제공할 수도 있고 안할 수도 있다.   tel 전화번호 가상 키보드를 제공한다. 숫자 0 ~ 9, +, *, # 를 포함한다.    search 검색 입력에 최적화된 가상 키보드를 보여준다. 사용자의 장치에 따라 Enter / 제출 키가 검색 아이콘이나 레이블을 가질 수 있다. email 이메일 입력에 최적화된 가상 키보드를 보여준다. @ 키를 제공한다. url URL 입력에 최적화된 가상 키보드를 제공한다.  / 와 .com 과 같은 키를 제공한다.