Ruler Grid 제작자: MDesign
웹 디자이너를 위한 올인원 툴! **픽셀 퍼펙트** 웹사이트 제작을 위한 루러(자), 스포이드, 페이지 편집기를 만나보세요. 실시간으로 수치를 측정하고, 색상을 선택하며, 레이아웃을 즉시 수정할 수 있습니다. 디자이너와 개발자의 필수 아이템으로 작업 효율을 극대화하세요!
일부 기능은 결제가 필요할 수 있음일부 기능은 결제가 필요할 수 있음
확장 메타 데이터
스크린샷
정보
Ruler Grid: 웹 디자이너와 프론트엔드 개발자를 위한 올인원 도구
Ruler Grid는 모든 웹사이트의 레이아웃을 분석하고 완벽하게 다듬을 수 있도록 돕는 도구 세트입니다. 브라우저에서 직접 요소를 측정하고, 스타일을 검사하며, 색상을 선택하고 디자인을 실험해 보세요.
주요 기능
• 자(Ruler) 및 가이드라인
수평·수직 가이드라인을 사용하여 요소 간 거리를 측정하고 정밀하게 정렬할 수 있습니다.
• 스포이드(Eyedropper) 툴
페이지 내 어떤 색상이나 그라데이션도 추출하여 HEX, RGB, HSL 형식으로 즉시 복사합니다.
• 타이포그래피 인스펙터
사용된 폰트 종류, 크기, 굵기, 행간(Line-height) 정보를 한눈에 확인하세요.
• 라이브 페이지 편집
표준 개발자 도구(DevTools)를 열지 않고도 웹사이트의 텍스트, 여백, 레이아웃을 실시간으로 수정할 수 있습니다.
• CSS 및 스타일 검사기
클릭 한 번으로 계산된 스타일, CSS 속성 및 Tailwind 클래스를 확인합니다.
• 반응형 그리드
레이아웃 그리드를 활성화하여 다양한 화면 크기에서 컬럼, 거터(Gutter), 정렬 상태를 체크하세요.
왜 Ruler Grid인가요?
빠르고, 가볍고, 직관적입니다. Ruler Grid는 페이지를 벗어나지 않고도 퍼블리싱 구조를 분석하고 작업 속도를 획기적으로 높여주는 필수 도구들을 제공합니다.
Ruler Grid는 모든 웹사이트의 레이아웃을 분석하고 완벽하게 다듬을 수 있도록 돕는 도구 세트입니다. 브라우저에서 직접 요소를 측정하고, 스타일을 검사하며, 색상을 선택하고 디자인을 실험해 보세요.
주요 기능
• 자(Ruler) 및 가이드라인
수평·수직 가이드라인을 사용하여 요소 간 거리를 측정하고 정밀하게 정렬할 수 있습니다.
• 스포이드(Eyedropper) 툴
페이지 내 어떤 색상이나 그라데이션도 추출하여 HEX, RGB, HSL 형식으로 즉시 복사합니다.
• 타이포그래피 인스펙터
사용된 폰트 종류, 크기, 굵기, 행간(Line-height) 정보를 한눈에 확인하세요.
• 라이브 페이지 편집
표준 개발자 도구(DevTools)를 열지 않고도 웹사이트의 텍스트, 여백, 레이아웃을 실시간으로 수정할 수 있습니다.
• CSS 및 스타일 검사기
클릭 한 번으로 계산된 스타일, CSS 속성 및 Tailwind 클래스를 확인합니다.
• 반응형 그리드
레이아웃 그리드를 활성화하여 다양한 화면 크기에서 컬럼, 거터(Gutter), 정렬 상태를 체크하세요.
왜 Ruler Grid인가요?
빠르고, 가볍고, 직관적입니다. Ruler Grid는 페이지를 벗어나지 않고도 퍼블리싱 구조를 분석하고 작업 속도를 획기적으로 높여주는 필수 도구들을 제공합니다.
0명이 0점으로 평가함
권한 및 데이터
필수 권한:
- 모든 페이지의 콘텐츠 차단
- 파일을 다운로드하고 브라우저의 다운로드 기록을 읽고 수정
- 브라우저 탭에 접근
- 모든 웹사이트에서 사용자의 데이터에 접근
선택적 권한:
- 모든 웹사이트에서 사용자의 데이터에 접근
데이터 수집:
- 개발자가 이 확장 기능은 데이터 수집이 필요하지 않다고 합니다.
추가 정보
- 부가 기능 링크
- 버전
- 1.3.0
- 크기
- 4.79 MB
- 마지막 업데이트
- 한 달 전 (2026년 4월 26일)
- 라이선스
- All Rights Reserved
- 버전 목록
- 모음집에 추가