오늘의 TIL도 클론코딩하며 마주한 소소한 문제들에 관한 것이다
CSS로 배경에 이미지 넣기 !!
background-image:url("주소");
마진값을 제외, 패딩값은 포함하여 배경을 이미지로 채운다.
여러 이미지를 넣을 경우 ,로 구분한다.
background-image:url("주소"), url("주소");
html과 같은 폴더 안에 로컬 이미지가 있다면 상관없지만, 그렇지 않다면 이미지 주소를 경로까지 정확하게 입력해야 한다. 오늘 나의 삽질은 바로 이 이미지 주소 때문이었다...
경로와 관련해서는 절대경로라는 것을 알게되었는데
참고한 게시글 /폴더/파일명.파일유형으로 적는 것이다. 나는 앞의 /폴더/부분을 빼먹었고, 추가하니 정상 작동하였다.
이미지는 화면의 크기에 따라 반복적으로 배경을 채운다.
background-repeat:no-repeat;
을 통해서 반복을 멈출 수 있다. 이미지가 배경으로 한 번만 출력된다.
background-size:cover;
을 통해서 화면 크기에 맞게끔 배경을 이미지로 꽉 채울 수 있다. 따로 설정을 하지 않으면 기본값이 이미지의 크기를 존중하는 것이기 때문에 원하는대로 나오지 않을 수 있다.
Landscape Media Query
기기의 화면이 가로모드일 때, 세로모드일 때 이를 감지하는 것이 미디어 쿼리이다.
그런데 문제는, 안드로이드 (특히 삼성 -_-) 디바이스는 이 미디어쿼리 공식이 깨진다는 것이다.
나의 목표는 다음과 같다.
▶️ 화면이 가로모드일 경우 (landscape), 세로로 바꾸라고 알림 화면을 보여주기. 이 알림 화면의 z index가 최고라서 다른 콘텐츠는 보이지 않음.
그리고 내가 마주한 문제는 다음과 같다.
- 적용했더니 input에 텍스트를 입력하기 위해 키보드가 떠오를 경우, 세로모드인데도 가로모드로 인식되어 세로로 바꾸라는 알림 화면이 뜬다.
- 이것 때문에 화면이 안보여서 정상적인 이용이 불가능하다.
이 문제의 원인은 다음과 같았다.
- 가로/세로 모드를 확인하는 미디어 쿼리는 화면의 폭과 높이로 판단을 한다. 즉, 폭이 높이보다 길면 가로모드로 인식함.
- 키보드 레이아웃이 위로 밀고 올라왔을때, 키보드 레이아웃이 차지하는 만큼 미디어 쿼리가 인식하는 화면의 높이는 줄어듦. 그 결과 높이가 폭보다 짧아져 세로모드인데도 가로모드로 인식함.
웹사이트에서 발생하는 이 문제는 구글링해보니 꽤 옛날부터 있었던 안드로이드 (특히 삼성 기기) 의 고질적인 문제이고, ios는 이런 이슈가 없다고 한다 ㅎ 사람들이 여러 솔루션을 찾아보았으나 이렇게 하면 여기선 ㄱㅊ은데 저기서 또 깨지고 이런식으로 완벽한 해경법이 없다는 것 같았다.참고한 게시글
그럼 어떻게 해결을 했느냐?
결국 가로/세로 모드를 폭-너비로 계산하여 발생하는 문제점이라면 아예 width를 기준으로 하는 미디어쿼리를 작성하기로 하였다. 개발자도구에서 지원하는 기기들 중 가장 작은 화면인 아이폰 5의 가로모드 폭을 구했다. 이 폭 이상이면 전부 세로 모드로 변경하라는 알림 화면이 뜨게끔 미디어쿼리를 작성했다.
