디바이스 별 화면 크기 확인: 개발자 도구 활용

2024.02.16 - [[WEB \ HTML CSS]] - CSS 미디어쿼리를 적용하는 두 가지 방법: 내부 스타일, 외부 스타일시트

 

얼마 전 미디어쿼리를 적용하는 방법에 대해 알아보았다. 그중에는 화면 크기에 따라서 다른 스타일을 설정하는 것도 있다. 그런데, 개발을 하면서 화면 크기에 따라 어떤 모양으로 표시되는지 어떻게 일일이 확인할 수 있을까?

직접 화면 크기를 조정하고 디바이스들을 구해서 볼 수는 없는 노릇이다.

 

이를 해결해줄 방법이 여러분도 잘 아는 개발자 도구에 있다.

우클릭 -> 검사(inspect) 또는 Ctrl + Shift + i를 눌러서 개발자 도구를 켜준다.

개발자 도구. 좌측 상단 파랗게 표시된 아이콘이 오늘 알아볼 녀석이다.

 

위 사진 좌측 상단에 파랗게 표시된 아이콘을 눌러준다. 혹은 Ctrl + Shift + M을 눌러준다.

Toggle device toolbar이다.

Toggle device toolbar

 

위쪽에 짧은 흰색 세로 선이 그어진 검정 가로 칸이 있다. 저 칸은 Mobile S부터 4K까지 7단계로 구분된 디바이스 크기를 제공한다. 원한다면 화면 옆 드래그 바를 드래그하거나 위쪽 숫자를 직접 설정해서 보고 싶은 디바이스 크기를 설정할 수 있다.

 

위쪽 좌측 Dimensions Responsive를 클릭하면 시중에 판매되는 디바이스 크기로 설정할 수 있다.

실제 디바이스 별 화면 크기로 설정

메뉴 제일 아래 Edit을 클릭하면 더 다양한 디바이스를 확인할 수 있다.

심지어 커스텀도 가능하다!

 

그 외에도 기본 화면에서 화면 회전이 가능하고, 우측 상위 케밥메뉴(점 세 개 세로 배열)에서 미디어쿼리가 어느 범위부터 적용되는지 시각적으로 확인할 수도 있다. 그 외에도 여러 기능이 있으니 둘러보길 바란다.

 

미디어 쿼리 적용 범위를 시각적으로 확인할 수 있다.