Windows에서 화면 픽셀을 측정하는 방법

짧은 답변: Windows에는 화면 자가 없습니다. DevTools는 브라우저 안에서, 이미지 편집기는 자기 캔버스 안에서만 측정합니다 — 나머지는 화면 자 같은 무료 도구를 사용하세요: 0 가장자리를 맞추고, 마커를 드래그하고, 거리를 픽셀로 읽고, 창을 측정 대상 위에 유령처럼 올려놓습니다.

화면에서 측정하고 싶어지는 순간

CSS 작성: 그 사이드바는 320 px인가 300 px인가? 추측 대신 재고 브레이크포인트를 제대로 설정하세요.
접근성: 터치 영역은 최소 44×44 px여야 합니다 — 자라면 두 치수를 몇 초 만에 확인합니다.
디자인 검수: 목업의 간격을 라이브 페이지와 디자이너들이 논쟁하는 픽셀 단위로 비교.
프레젠테이션과 인쇄: 프로젝터 해상도에서 이미지가 차지할 수 있는 영역 확인.
결과가 따르는 호기심: «이 창은 실제로 얼마나 넓지?» — 그것을 위한 스크립트를 쓰기 전에.

방법 1: 브라우저 도구 (브라우저 안에서만)

F12 → 검사 → 아무 요소에나 마우스를 올리면 박스 모델이 보입니다. DOM에는 완벽 — 동영상 플레이어, 데스크톱 앱, 뷰어 속 스크린샷, 자기 창에는 쓸모없습니다.

방법 2: 화면 자 — 어디서든 무엇이든 측정

무료 다운로드 — ScreenRuler-Setup.exe

0을 맞춥니다. 측정이 시작되는 지점에 자의 왼쪽 가장자리(가로 모드) 또는 위쪽 가장자리(세로 모드)를 놓습니다.
마커 선을 드래그해 반대쪽 끝으로; 방향키로 다듬습니다 — 누를 때마다 1 px, Shift로 ×10. «마커 초기화» 버튼은 0으로 되돌립니다.
유령으로 만듭니다: 불투명도를 40 %로 낮추고 «항상 위에 표시»를 켜면 반투명 자가 문제의 요소 바로 위에 옵니다. 큰 수치를 읽으세요 — ≈ 482 px.

정확도에 관한 참고

디스플레이 배율이 100 %일 때 자의 1단위는 1화면 픽셀 — CSS가 쓰는 px과 같습니다. Windows 배율이 더 높으면 측정값을 포함해 화면의 모든 것이 배율이 적용된 픽셀이 됩니다. 배율이 적용되지 않은 숫자가 필요하면 100 %에서 비교하세요. 브라우저 확대/축소는 측정 대상을 바꿉니다: 100 % 확대에서 측정하세요.

자주 묻는 질문

대각선 거리를 잴 수 있나요?

아니요 — 외접 사각형을 재세요(가로 모드의 너비, 세로의 높이): 레이아웃 시스템이 결국 쓰는 것이 바로 그것입니다.

어떤 모니터나 배율에서도 작동하나요?

창은 어느 모니터로든 옮길 수 있고 그 화면의 픽셀을 측정합니다; 배율은 위에서 설명한 대로 동작합니다.

«스크린샷 + 편집기»와 무엇이 다른가요?

속도와 진실: 캡처 단계도, 확대 오차도 없이 — 지금 렌더링되는 살아 있는 화면을 그대로 측정합니다.