웹페이지 반응형 작업을 하면서 이런 일이 있었다. 미디어쿼리(@media)를 분명히 작성했는데모바일에서 전혀 적용되지 않았다. 개발자도구(Device Toolbar)에서는 정상처럼 보이는데실제 모바일에서는 레이아웃이 줄어들지 않았다. 원인을 확인해보니 설정이 빠져 있었다. 이 한 줄을 추가하자 그동안 먹지 않던 미디어쿼리가 바로 정상 동작했다. 그래서 왜 viewport를 넣어야 반응형이 제대로 작동하는 건지 그 내용을 정리해보려고 한다. Viewport 무엇인가?Viewport는 사용자가 현재 보고 있는 웹 페이지의 보이는 영역이다.즉, 브라우저가 레이아웃을 계산할 때 기준으로 삼는 화면 영역이다. 문제는 모바일 브라우저의 기본 동작 방식이다. viewport 설정이 없으면모바일 브라우저는 과거 P..
