크롬에서 웹페이지를 스마트폰 상태로 보기

크롬에서 웹페이지를 스마트폰 상태로 보기 - 크롬 개발자도구

개발자 분들이야 모두 다 아시는 내용이겠지만 크롬에서는 웹페이지를 스마트폰에서 보여지는 형태로 미리 변환해서 볼수 있습니다.

[크롬 개발자도구]라는것인데 현재 보이는 웹페이지가 아이폰, 아애패드, 혹은 갤럭시폰에서 어떻게 보이는지를 해당기기에 가지 않더라도 크롬에서 변환해서 볼수 있는 방법입니다.

개발자가 아니더라도 웹페이지에서 모바일에서 보여지는 형태에 대해서 알고 싶다면 변환해서 볼수가 있다는 것이죠. 아주 간단한 방법이니 혹시나 도움되는 곳도 있을거 같습니다.

샘플로 들기 위해 운영하는 사이트중에서 반응형으로 제작이 된 사이트를 하나 소개를 해보죠.

생활정보 만물상(http://www.allmanmulsang.com/)이라는 사이트입니다.

이 사이트는 반응형이라 그냥 창의 크기만 줄여도 알아서 페이지가 변형이 됩니다.

먼저 [크롬 개발자도구]를 실행하기 위해 F12키를 누릅니다.

복잡한 소스는 모르겠고...

우측 상단에 있는 아이콘을 클릭하면 Responsive가 나옵니다.

Responsive에는 각종 기기의 모델명이 보입니다.

음.. 현재 갤럭시S10까지 나와있을건데.. 여기는 S5만 나와있는것을 보니 개발자가 사용하기에는 무리가 있어보입니다. 참고로 크롬의 업데이트가 에러가 나서 안되고 있기는 합니다.

여러 종류를 선택해봤는데 실제로 보여지는 것과는 차이가 있네요.

크롬의 업데이트를 하고 나면 제대로 보여질까요.. 테스트후에 추가로 글을 올리도록 하겠습니다.

간단히 크롬의 개발자도구를 이용하여 모바일페이지로 전환해서 보는 방법에 대해서 알아봤습니다.