크롬에서 반응형 웹사이트 PC에서 모바일 화면으로 보는 방법

 반응형 웹디자인을 연습하던 중 모바일 화면을 PC에서 보고 싶어서 찾아보게 된 방법이다. 물론 웹화면 가로사이즈를 수동으로 줄이면 자동으로 구현이 되긴 하지만 좀더 정확한 모바일 화면으로 보고 싶었다. 현재 크롬에서 모바일 화면을 지원하고 있기 때문에 다른 프로그램을 설치할 필요없이 간단하게 확인이 가능하다.

 

 

 

  저장 폴더의 Index.html 파일을 연결 프로그램에서 크롬으로 실행한다.

 

 

 크롬 화면에서 오른쪽 위의 Chrome 맞춤 설정 및 제어 버튼 -> 도구 더보기 -> 개발자 도구를 클릭

 

 

 역시 오른쪽 위의 메뉴에서 Toggle device toolbar를 누르면 간편하게 모바일 화면으로 바뀐다. 단축키는 Ctrl+Shift+M이다. 다시 누르면 PC 화면으로 바뀌게 되니 반응형 코드 연습할 때 상당히 유용하다 하겠다.

 

 

화면 위에 가로 세로 사이즈를 직접 입력할 수 있으니 적당한 사이즈를 입력하면 된다.

 

 

드롭다운 메뉴를 클릭하면 모바일 기종들이 몇가지 나오는데 선택하면 가로 세로의 픽셀 사이즈가 자동적으로 맞춰진다.

 

 

 다른 괜찮은 프로그램이 있는지 찾아봐야 알겠지만 당분간은 크롬을 쓰게 될 것 같다. 자잘한 프로그램들 더덕더덕 까는게 귀찮기도 하고.