크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법 |
환경: Chrome |
사이트나 블로그를 운영하시는 분들은 반응형 스킨이 어떤 형태로 기기마다 표현되는지 궁금할 겁니다. 특히 개발자는 매번 스마트폰과 PC 를 번갈아 확인하는 것이 귀찮고 힘들기 때문에 테스트 도구가 필요합니다. 별도의 프로그램 설치없이 크롬 브라우저만 있으면 기기별로 모바일 화면을 확인할 수 있는 방법을 알려 드리겠습니다.
▼ F12 단축키 클릭으로 개발자 모드를 띄웁니다. 브라우저 좌/우 혹은 하단에 개발자 모드창이 나타납니다.
▼ 개발자 모드에서 웹 사이트를 PC 가 아닌 모바일 화면으로 보기 위해서는 상단에 있는Toggle device toolbar 를 눌러야 합니다.
▼ 사이트 화면은 모바일 환경에 맞는 크기로 바뀌었습니다. 화면 사이즈에 맞게 화면 디자인도 재조정이 됩니다. 만약 디자인이 반응형으로 구현되어 있지 않으면 제대로 표현이 안되겠죠. 기기의 종류와 사이즈는 상단 콤보박스를 통해 변경할 수 있습니다. 삼성 Galaxy S5 외에도 다양한 기기들이 있습니다.
▼ 스마트폰처럼 가로/세로 변환도 가능합니다. 기기와 사이즈를 선택하는 툴바 오른쪽 끝에 가로/세로 전환 아이콘을 클릭해 보세요.
▼ 만약 자신이 원하는 기기가 없다면 선택 목록에 추가할 수 있습니다. 기기 선택 콤보박스에서 하단에 Edit 메뉴를 선택합니다.
▼ 오른쪽 화면에 나타난 Emulated Devices 에서 목록에 디바이스를 선택하면 추가가 됩니다.
▼ 자신만의 디바이스를 만들어서 관리하고 싶다면 Add custom device.. 버튼을 눌러 추가합니다.
'인터넷 > 구글 크롬' 카테고리의 다른 글
크롬 Chrome 웹 스토어로 가는 방법 (0) | 2018.11.11 |
---|---|
구글 번역 손글씨로 한자 번역하는 방법 (0) | 2018.11.04 |
구글 폰트 사이트 이용해서 나눔고딕 적용하기 (0) | 2018.11.01 |
스마트폰 구글 포토 앱으로 Google 포토 클라우드 서버에 사진 올리기 (0) | 2018.10.31 |
구글 포토 PC 사진 업로드 하는 방법 (0) | 2018.09.18 |
구글 포토 앨범 만들어서 관리하기 (0) | 2018.09.17 |
구글 포토 클라우드 서버 무제한 저장 가능으로 옵션 조절하는 방법 (1) | 2018.09.14 |
구글 크롬 검색엔진 등록과 URL 입력창에서 검색어로 찾는 방법 (1) | 2018.09.10 |