css / 데스크탑 반응형 제작 / pc에서 모바일 환경 보기 / 크롬에서 모바일 기기 확인 / 웨일로 모바일 확인 / 데스크 탑에서 모바일 환경 확인

안녕하세요 이번엔 반응형 중 PC 내에서 모바일 환경에 적용했을 시 확인하는 방법을

알아보겠습니다.

이 전에 저 역시 혼자 코드를 작성하고 나서 보면 데스크탑에만 맞추어서 하는

경향이 있었습니다. 하지만 모바일 기기로도 많이 사용하는 이 현실에

맞지 않은 것이었죠. 또 수정을 위해 몇 번이고 배포하고 제 휴대폰으로

보는 어리석은 짓을 했는데요.

크롬에서 모바일 환경을 확인할 수 있는 방법이 있는 걸 알았습니다.

네이버 웨일 역시 가능하구요.

그러니 그러는 분은 없길 바라겠지만 혹시라도 저처럼 배포 후 휴대폰으로

보시는 분이 있다면 이 방법을 사용하시면 되겠습니다.

 

 

크롬

 

먼저 크롬을 이용하는 방법인데요.

크롬을 설치하지 않으 신분이라면 크롬을 먼저 설치해주셔야 합니다.

이후 개발자 도구를 열어야 하는데 브라우저 오른쪽 상단을 보시면 도구 더보기인

다음과 같은 아이콘을 클릭해줍니다.

또는 F12 

단축키 ctrl + shift + i

도 있습니다.

 

이후 열리는 창에서 모바일 기기처럼 생긴 부분을 클릭해줍니다.

또는 개발자도구가 열린 상태에서 

ctrl + shift + m

을 클릭하셔도 됩니다.

 

 

그럼 이렇게 모바일 환경으로 변경된 모습을 확인할 수 있고 위에 선택을 통해

기기를 바꿀 수 있고 또 픽셀마다 다르게 할 수도 있습니다.

혹시라도 바꿨는데 변경되지 않으시다면 새로고침 F5를 눌러주시면 변경되는 것을

확인할 수 있습니다.

 

역시 끌 때에도 위에 단축키 또는 아이콘을 클릭해주시면 됩니다.

 

 

 

 

네이버 웨일

만약 네이버 웨일이 없으실 경우 네이버 웨일을 설치해주셔야 합니다.

이후 오른쪽 상단에 더보기 아이콘을 눌러주신 다음 바로 열리는 창에서

모바일 창을 클릭해주시면 됩니다.