반응형 웹 viewport 메타 태그에 대해서(하드웨어,소프트웨어 픽셀)
#웹을 반응형으로 만드는 방법
웹을 반응형 으로 만드는 방법에는 뭐가 있을까? 나는 미디어 쿼리 하나 뿐이라고 생각했으나 다른 디바이스에서 반응형을 사용할려면 미디어 쿼리 이전에 메타 태그가 선행되어야 되는 것이라는 것을 깨달았고 이 태그에 웹 접근성 까지 내포한 개념 이 있었기에 공부한 김에 한번 정리 목적으로 글을 작성했다
하드웨어 픽셀과 소프트웨어 픽셀
메타 태그를 이해 하기전에 하드웨어 픽셀과 소프트웨어 픽셀에 대해서 짚고 넘어가야된다.
안 그러면 밑에 나올 <meta>태그에 대해 그냥 저건 반응형에 쓰이는 메타 태그입니다 ^^ 하고 별로 특별히 정리할것이 없다.
하드웨어 픽셀은 기기(디바이스)의 픽셀 이라고 이해하면 되고
소프트웨어 픽셀은 css 픽셀이라고 이해하면된다.
하드웨어 소프트웨어 픽셀 개념의 차이?
보통 웹은 알아서 어느정도 반응형으로 움직이게 되는데 다음 878px 에서는 다음 과같이 작동하다가
창의 크기를 817px 로 내리면 알아서 이미지가 하단으로 내려간다
그렇다면 기기 넓이가 817px 이하인 기기들은 알아서 접속했을때 저화면으로 보이겠지?
하지만 그렇지않다
크롬 개발자 도구 반응형으로 확인해보면 320px 의 소형 디바이스에서도 원래 878px 이상의 풀화면에서 보이던 화면을 소형디바이스의 작은 화면에 우겨넣은 형태가 된다.
여기서 어라??? 하고 생각했다. 왜냐면 내가 생각하는 기본 흐름에는 이미지가 하단으로 내려간 채로 보이는게 맞았기 때문이고 여지껏 그렇게 만들었었으니까
그게 그동안 가능했던 이유는 바로 html 에 meta 태그 때문이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />그래... 분명 많이 봤다 html > head 에 들어가있는 이 메타태그..
이 메타 태그가 없으면 css 픽셀이 아닌 하드웨어 픽셀로 우겨 넣어 들어가게된다.
이 메타 태그를 넣어줘야 비로소 원래 생각했던 그동안 친숙히 봐왔던 하드웨어 픽셀과 소프트웨어 픽셀(css픽셀)이 매치되어 동작한다.
그동안 이걸 굳이 신경쓰지 않아도 됬던 이유는 Snippet 을 사용했고 일일이 html을 치지 않는 이상 CRA든 뭐든 앱을 만들면 만들면 다 알아서 들어가 있었기에 그동안 생각할 필요도없었던 것이였다.
뷰포트 메타 태그에 대한 속성 설명
content='width=deveice-width
는 말 그대로 넓이를 디바이스의 크기 만큼 가져가겠다는 말이며
inital-scale=1.0 은 기본 배율을 의미하는데 이미 단어만으로 유추가 가능하지만 사진으로 보면 이해가 빠르다
그밖에 사용자가 확장할 수 있게 할거냐 말거냐 를 설정할 수 있는 속성으로
user-scalable 이 있으며 user-scalable=yes / no 로 설정할 수있다.
또 관련 된 속성으로
minimum-scale ,maximum-scale 가 있는데
이미 이름에서 명확하다시피 최대 비율과 최소 비율에 대한 설정을 할 수있다.
여기서 이글 을 쓰면서 MDN을 읽다가 읽기전만해도 당연히 NO로 유저가 못 키우게 막아놔야지 하고 생각했으나
user-sclable 을 no 해놓으면 시력이 낮거나 시각장애 가 있는 사람들에게 접근성의 문제를 야기 할 수 있다고한다.
최소 2배 가장 좋은 건 5배 로 해놓는게 젤 좋다고 함
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Viewport meta tag - HTML: HyperText Markup Language | MDN
This article describes how to use the "viewport" <meta> tag to control the viewport's size and shape.
developer.mozilla.org
그렇다면 메타 태그가 없으면 미디어 쿼리는 동작하지않는가?
사실 답을 글 첫시작에 적어놨는데 당연하게도
그렇다 작동안한다.
근데 어디까지나 해당 기기에서 들어갔을 때 이야기고 웹에서 창 줄이면 메타태그 유무 랑 관계없이 정상 작동한다.
그러니 웹에서만 사용할거면 사실 메타 태그가 없어도 될거라 생각하지만 요새 웹에서만 사용하는 웹이 ... 있나? 싶다
평소 별 생각도 없이 그냥 지나갔던 메타 태그에 소프트웨어와 하드웨어 픽셀이라는 개념을 알게되었다.