테크팁·활용
구글 크롬94 개발자 도구에 줄자(Ruler) 기능이 추가되었습니다.
apost
2021. 10. 8. 05:19
웹 디자이너들이 줄기차게 요구해 왔던 기능 중 하나가 줄자 기능이었는데 아무도 안 보는 영문 업데이트 안내에 쓰여있으니 새롭게 기능이 추가돼도 아무도 모릅니다.
우선순위가 낮다 보니 그동안 보류되었다가 드디어 크롬 94에서 추가되었습니다.
개발자 도구용 기능이므로 개발자 도구를 켜야 하고(F12) 기본 설정이 꺼져있기 때문에 개발자 도구 설정에서 옵션을 켜야 동작합니다.
개발자 도구 줄자 옵션 켜기
개발자 도구 설정 > 환경설정 > 요소 그룹의 "눈금자 표시" 체크
영문으로는 Settings > Preferences > Elements > "Show rulers"
요소 선택자로 줄자 표시하기
줄자 기능을 사용하려면 줄자로 크기를 측정할 대상을 선택해야 합니다.
개발자 도구를 켜면 줄자가 항상 표시되는 게 아니라 요소 선택자로 크기를 측정할 요소 위로 마우스 커서를 가져가면 줄자가 표시됩니다.
확장 프로그램으로 구현된 다른 프로그램과 달리 웹 페이지 영역을 침범하지 않고 그 위에 오버레이로 표시되기 때문에 정확한 요소 크기를 측정하는데 도움이 됩니다.
요소 선택자를 선택하면 항상 표시되는 옵션이 있으면 하는 아쉬움이 있지만, 이것만으로도 꽤 도움이 됩니다.
구글 크롬 줄자 확장 프로그램
구글 크롬 확장 프로그램 중에도 줄자 프로그램이 있습니다.
기능은 무척 단순하지만 개발자 도구 화면이 아닌 화면에서도 줄자를 표시하려면 이 확장 프로그램을 쓰는 것을 추천합니다.
