
[꿀팁] 엣지/크롬 개발자도구 Device Mode 활용
IT기술용어/FrontEnd
2023. 7. 20. 19:08
최근 media query에 대해서 공부를 하다가 이제서야 발견한 사실.. 브라우저내에서 지원하는 Device Mode인데요. 사실 반응형웹에 대해서 크게 관심이 없다면 스쳐지나갈법 합니다. Device Mode Device Mode는 모바일이나 데스크탑의 장치별로 Viewport를 확인하거나 조정할 수 있습니다. 그동안 브라우저 창의 크기를 마우스로 수동 조정하여 해상도별 디자인을 확인해야했던 시간들을 단축시킬 수 있습니다. 개발자도구 (브라우저 + F12 혹은 아래 이미지 참고)를 엽니다. 개발자 도구를 확인할 수 있는데, 아래 이미지중 노란색으로 동그랗게 칠한 아이콘을 누릅니다. width, height 조정 (웹페이지 해상도 수동 확인) 아래의 이미지처럼 width와 height를 원하는 크기만큼..