화면 픽셀 자
웹 페이지 안에 0부터 200까지 10 단위 눈금의 CSS 기반 가로 자를 표시합니다.
사용 방법
- 페이지의 ruler 눈금을 인접 UI 요소의 CSS상 길이 감각과 비교해 사용합니다.
핵심 기능과 처리 범위
기본 runner가 21개 tick을 만들고 각 눈금에 index×10 값을 표시하는 시각적 ruler component입니다.
처리 원리
0·10·20…200 label을 가진 21개 동일 구조 tick을 CSS layout으로 렌더링합니다.
예시
0에서 100 표시 구간을 화면 요소와 나란히 보며 상대적인 CSS 크기를 확인할 수 있습니다.
이럴 때 유용합니다
- 브라우저 UI에서 대략적인 CSS 거리나 spacing을 눈으로 비교할 때
사용 전 참고
- 실물 mm/cm 자가 아니며 browser zoom·DPR·CSS layout에 따라 물리 길이가 달라져 실제 치수 측정에는 쓸 수 없습니다.
자주 묻는 질문
200 표시는 200 물리 픽셀인가요?
아닙니다. 이 ruler는 웹 CSS layout용 시각 눈금이며 물리 pixel 또는 mm를 교정하지 않습니다.