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