개요
Ctrl+드래그(Mac: Cmd+드래그)로 웹 요소의 CSS position 값을 실시간으로 표시하는 개발자 도구입니다.
🎯 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 #웹개발 #포지셔닝 #개발자도구 #드래그앤드롭
세부정보
- 버전1.0.0
- 업데이트됨2025년 6월 25일
- 제공soominyim15
- 크기105KiB
- 언어언어 4개
- 개발자
이메일
soominyim15@gmail.com - 비판매자판매자로 식별되지 않은 개발자입니다. 유럽 연합에 거주하는 소비자의 경우, 이 개발자와 체결한 계약에 대해서는 소비자 권리가 적용되지 않을 수 있음을 유의해야 합니다.
개인정보 보호
Elements Position Drag Overlay에서 데이터 수집 및 사용과 관련하여 다음 정보를 공개했습니다. 더 자세한 정보는 개발자의 privacy policy을 참고하세요.
Elements Position Drag Overlay 항목은 다음을 처리합니다.
개발자가 사용자 데이터에 관해 다음과 같이 선언했습니다
- 승인된 사용 사례를 제외하고 서드 파티에 판매하지 않음
- 항목의 핵심 기능과 관련 없는 목적으로 사용하거나 전송하지 않음
- 신용도 판단 또는 대출 목적으로 사용하거나 전송하지 않음
