브라우저가 너무 많아...
음... 그럼 나는 어떤 브라우저들을 대응해서 만들어야 할까?
모바일은 안드로이드랑 iOS인데...
아! 크롬이랑 사파리만 대응하면 되는구나! IE 대응 안해도 되네?
와~ 소리질러!!! IE 대응 안 해도 된다구~~~. IE야 빨리 죽어ㅋㅋ
일단 브라우저 세팅부터 해야지. (세팅이랄 것도 없지만...)
크롬이랑 사파리를 먼저 열어야지.
개발자 도구를 열어서 모바일 화면으로 맞춰야지.
- 크롬은 구글이 만들었으니까 안드로이드 담당하고 갤럭시 S5로 설정해야지.
- 사파리는 애플이 만들었으니까 iOS 담당하고 아이폰8로 설정해야지.
그럼 기본 세팅은 끝났네~
화면을 가득 채워야겠다.
모바일 화면을 만들어야하니까 viewport부터 세팅해야겠다.
HTML <head> 태그 안에 viewport 메타 태그부터 넣자.
<meta name="viewport" content="width=device-width, initial-scale=1.0">그 담엔 <main> 태그에 width: 100%, height: 100vh만 주면 끝이네?
아~ 너무 간단하다. 빨리빨리하고 놀아야지~
vh(vertical height) : vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이 값이 900px일때 1vh는 9px을 의미합니다.
개발자 도구로 개발할 때는 문제 없었는데...
배포하고 모바일로 확인했더니 화면이 위아래로 짤려있네? 응? 스크롤도 있네?
뭐지??? 나는 개발자 도구에서 문제없이 화면 가득 채워서 개발했는데 왜 이런 문제가 생긴거지?
네이버 브라우저랑 카카오 브라우저에서는 내가 원했던대로 가득 차서 나오는데 크롬이랑 사파리만 자꾸 스크롤이 생기고 화면이 짤려보이네.
원인이 뭘까? 찾아보자.
열심히 검색하고 테스트해본 후
모바일 크롬이랑 사파리는 하단바가 고정이 되있지 않네. 그래서 자꾸 하단바 높이까지 전체 화면이라고 인식하게 된거구나.
그럼 상, 하단바가 있다고 인식시키고 이를 제외한 실제 보이는 뷰만을 100%로 인식시키려면 어떻게 해야될까?
여태까지 height: 100vh로 주고 개발한게 잘못된 거였네. 흠... 근대 100%를 줘도 계속 문제가 똑같네...
도대체 왜 이러는거지? 문제가 뭘까?
또 다시 구글링과 많은 생각 후
아!
<html>, <body> 태그부터 width: 100%, height: 100%를 주고 자식 태그에게까지 계속 상속시켜주면 되는거였구나!
그리고 <main> 태그에 position: fixed, overflow: hidden을 주면된다니까 한 번 해보자.
와~ 드디어 제대로 된다!!!
한 줄 정리.
모바일 화면에서 스크롤 없이 화면을 가득 채우고 싶은 경우,
html, body { width: 100%, height: 100% }로 설정하고 이후로도 자식 태그에게 모두 width, height 100%로 설정해주세요.
하지만 여기서 제일 중요한 것은 <body> 태그 안의 최상위 부모가 되는 태그에 position: fixed, overflow: hidden을 줘야한다는 것 잊지 마세요.
느낀점.
나는 CSS를 잘 이해하고 있고 잘 다룬다고 생각했는데 그게 아니었구나...
앞으로 계속 공부를 더 해야겠다.
감사해요! 덕분에 해결했습니다! :-)