크롬(Chrome) 브라우저에서 다양한 해상도에서 size변경하여 테스트 진행 해 보기.

크롬 브라우저 화면에서 개발자 모드를 실행한다.

F12 또는 Ctrl + Shift + I 를 누르거나,
아래와 같이 우측상단의 ... 부분을 클릭하여 메뉴 > 도구 더보기 > 개발자 도구를 클릭하면 개발자 도구를 실행할 수 있다.

 

728x90

개발자 도구 창이 뜨면 왼쪽 상단의

표시를 클릭한다.

 

그럼 현재 개발자 도구가 아닌 테스트 할 크롬 창 화면의 상단부분에 아래와 같은 모양이 나타난다.

아래 네모칸 마다 기준 크기가 있어 클릭할 경우 해당 크기의 해상도로 창을 볼 수 가 있고,

크기: 반응형 옆 사이즈에 직접 기입하여 custom하게 해상도를 조절하여 테스트를 할 수 가 있다.

한번씩 해상도만 조절 할 경우 어그러지는 경우가 발생한다.
정확한 해상도의 모양을 보기위해서는 키보드에서 F5 또는 Ctrl + R 키를 눌러 페이지를 다시 로딩한다. (Mac에서는 Cmd + R 키를 누르면 된다.)