이미지 등 픽셀(치수) 값을 알고 싶을 때 유용한 부가기능 - Page ruler

 

제 블로그의 본문 폭은 640px입니다. 포스팅 시 사용될 이미지 역시 이 본문 폭 크기에 맞추는 습관이 들었는데, 이미지 길이가 본문 폭 보다 넓으면 모바일 모드에서 화면을 벗어나는 경우가 생기기 때문입니다. 이미지는 보통 자체적인 스크린샷이나 구글, 플리커를 통해 구하는 편인데, 항상 길이가 얼마나 될까 하고 궁금했던 경우가 많습니다. 오늘은 이미지는 물론 각종 페이지 요소들의 치수를 잴 수 있는 크롬 부가기능을 소개해볼까 합니다.

 

1. Page Ruler

---

 

주요 기능

• 모든 페이지에서 사용 가능
• 룰러 가장자리 드래그를 통한 리사이즈 기능
• 룰러 위치 이동 기능
• 요소분석 모드 기능, 마우스 오버 시 페이지 요소 자동 분석

 

어느 웹페이지에서나 마우스를 이용해 손쉽게 치수를 잴 수 있습니다. 마우스를 드래그하면 투명 점선 테두리의 사각 박스(룰러)가 생기고 상단엔 길이, 넓이, 상하좌우 치수 정보창이 나옵니다. 드래그로 그려진 룰러는 웹페이지 내에서 자유롭게 이동할 수 있으며 룰러의 가장자리를 클릭하여 드래그하면 크기를 조절할 수 있습니다(블로그 수킨 수정시 매우 유용합니다).

 

좌측 상단 <> 버튼을 클릭하면 Element Mode(요소 분석)로 전환됩니다. 요소 분석 모드에선 마우스를 드래그할 필요 없이 이미지, 검색창 등 페이지 내 각종 요소에 마우스 커서만 대면 자동으로 해당 요소의 크기와 정보를 보여줍니다.

 

 

2. Edge

---

 

크롬 데스크톱용 앱으로 구글크롬을 따로 실행시키지 않아도 되는 장점이 있습니다. 일종의 데스크톱용 '자'라고 생각하시면 됩니다. 치수는 픽셀, 인치, CM를 지원하고 가로/세로 모드로 변경할 수 있습니다. 자의 모서리 부분에 마우스를 대면 화살표가 나오면서 길이 조절이 가능합니다.

 

하단을 보시면 px, cm, in(인치) 3가지 치수 선택 버튼이 있고, 그 오른쪽에선 자를 가로/세로 모드로 변경할 수 있는 버튼이 있습니다.