CRX id
hhcokjpdklpgebgklpelpkekgiojnjca
hhcokjpdklpgebgklpelpkekgiojnjca
Description from extension meta
Ctrl+드래그(Mac: Cmd+드래그)로 웹 요소의 CSS position 값을 실시간으로 표시하는 개발자 도구입니다.
Description from store
🎯 Elements Position Drag Overlay
웹 개발자를 위한 혁신적인 CSS 포지셔닝 도구입니다. Ctrl+드래그(Mac: Cmd+드래그)로 웹 페이지의 요소를 직접 이동하면서 실시간으로 CSS position 속성 값을 확인할 수 있습니다.
✨ 주요 기능
🎮 직관적인 드래그 & 드롭
- Ctrl+드래그로 position:absolute 요소를 자유롭게 이동
- 실시간으로 left, top, right, bottom 값 표시
- 마우스를 놓는 즉시 정확한 CSS 좌표 확인
⚡ 실시간 좌표 표시
- 요소 이동 중 좌표값이 실시간으로 업데이트
- 픽셀 단위의 정확한 위치 정보 제공
- 요소별로 독립적인 좌표 오버레이 표시
🎨 맞춤형 설정
- 좌표 표시 위치 선택 (좌상단, 우상단, 좌하단, 우하단)
- 하이라이트 색상 변경 가능
- 토스트 알림 on/off 설정
- 드래그 후 좌표 유지 여부 설정
🚀 사용법
1. 확장 프로그램 설치 후 활성화
2. 웹 페이지에서 Ctrl 키를 누른 상태로 요소 드래그
3. 실시간으로 표시되는 좌표값 확인
4. 마우스를 놓으면 최종 위치의 CSS 값 확인
⚙️ 지원 기능
- position: absolute 요소 전용 최적화
- 키보드 단축키 지원 (Ctrl+Shift+Q)
- 다국어 지원 (한국어, 영어, 일본어, 중국어)
- 반응형 웹에서도 정확한 좌표 계산
- Chrome DevTools와 연동 가능
🎯 이런 분들께 추천
✅ 웹 개발자 - CSS 포지셔닝 작업 시 정확한 좌표 확인
✅ UI/UX 디자이너 - 요소 배치 시 픽셀 퍼펙트 정렬
✅ 퍼블리셔 - 반응형 레이아웃 구현 시 위치 조정
✅ 학습자 - CSS position 속성 학습 도구
💡 개발 팁
- position: absolute 설정된 요소만 드래그 가능
- 부모 요소의 position이 relative인 경우 상대 좌표로 표시
- viewport 기준 좌표와 부모 요소 기준 좌표 모두 지원
- z-index가 높은 요소 우선 선택
🔧 고급 설정
팝업에서 다양한 옵션을 설정할 수 있습니다:
- 확장 기능 on/off 토글
- 호버 하이라이트 표시 여부
- 좌표 오버레이 지속 시간
- 하이라이트 색상 커스터마이징
📱 호환성
- Chrome 브라우저 (Manifest V3)
- 모든 웹사이트에서 동작
- 반응형 웹 디자인 지원
- 모바일 시뮬레이터에서도 사용 가능
🛠️ 개발자 정보
이 확장 프로그램은 웹 개발 생산성 향상을 위해 개발되었습니다. 버그 리포트나 기능 제안은 언제든 환영합니다.
⭐ 평가와 리뷰를 남겨주시면 더 나은 도구로 발전시키는데 큰 도움이 됩니다!
#CSS #웹개발 #포지셔닝 #개발자도구 #드래그앤드롭