웹 개발 공부를 할 때 많은 분들이
다른 사이트를 기반으로 프로그래밍을 하는 클론 코딩을 하면서
공부를 하는 경우가 많을 것이다.
그럴 때 유용한 확장 프로그램을 하나 소개하겠다.
오늘 소개할 프로그램은
웹 요소들의 정확한 픽셀(pixel) 단위와 간격, 마진, 패딩 등을 측정할 수 있다.
웹 사이트를 그대로 클론 코딩을 할 때 레이아웃이나
요소의 크기와 간격을 거의 유사하게 만들 수 있어
유용하게 사용할 것이다.
그럼 바로 본론으로 들어가 프로그램을 살펴보자.
Page Ruler 웹 개발 픽셀 단위 측정
해당 프로그램은 크롬의 확장 프로그램이기 때문에
크롬을 사용하여야 한다.
Page Ruler은 웹 페이지의 거리를 픽셀 px 단위로 측정할 수 있는 확장 프로그램이다.
1. 도구 더보기 -> 확장 프로그램 -> chrome 웹 스토어를 연다.
2. 'page ruler' 검색한다.
3. Page Ruler 를 크롬에 추가해준다.
4. 크롬 우측 상단에 퍼즐 모양을 클릭하고, 핀 모양을 클릭해 고정을 해준다.
5. 확장 프로그램을 클릭하고 측정하고자 하는 요소를 마우스로 드래그한다.
그러면
width, height의 픽셀 크기를 측정할 수 있고,
마진과 패딩 족에 드래그 하면
left, top, right, bottom의 마진 값까지 측정이 가능하다
|
6. 화살표를 이용해 드래그 한 부분의 미세 조정이 가능하다
이제 웹 사이트 디자인을 할 때 매우 간편하게 크기와 마진 값을 적용할 수 있게 되었다!
page ruler redux를
조금 더 유용하게 사용할 수 있는 꿀팁을 말해보겠다.
유용한 꿀팁
이미지 안에 요소를 픽셀 크기로 측정을 하고 싶을 때 사용하는 방법이다.
이것은 어떤 앱이나 웹 사이트를 '클론 코딩'할 때 유용하게 사용할 수 있다.
한 가지 설정을 해주어야 page ruler로 사용할 수 있다.
이미지 파일 픽셀 크기 측정하는 방법
만약 카카오톡과 유사한 사진을 받았는데
해당 이미지 요소의 픽셀 크기가 궁금하다.
그럴 때 사용하는 방법이다.
1. 우선 해당 이미지 파일의 연결 프로그램을 '크롬'으로 설정한다.
1-1. 크롬으로 해당 이미지 파일을 드래그 해서 올려놓는다.
아마 여기서 바로 page ruler redux 확장 프로그램을 열면 실행이 안 될 것이다.
크롬에서 이미지파일 불러온 후 page ruler 사용이 안 될 때
2. Page Ruler를 마우스 우클릭으로 '확장 프로그램 관리'로 들어간다.
3. '파일 URL에 대한 액세스 허용'을 체크 표시 해준다.
4. 크롬으로 불러온 이미지 파일도 적용 되는 것을 확인할 수 있다.
그럼 모두들 화이팅 ~!
댓글