Elements Position Drag Overlay
웹 개발자를 위한 실시간 CSS Position 도구 (Windows/Mac 지원)
🚀 크롬 확장으로 모든 웹사이트에서 사용하세요!
이 도구는 크롬 확장 프로그램으로 설치하여 사용하는 것이 가장 효과적입니다.
설치 후 모든 웹사이트에서 실시간으로 요소의 position 값을 확인하고 조정할 수 있습니다.
실시간 Position 오버레이 미리보기
실제 확장에서는 Ctrl+드래그(Mac: Cmd+드래그)로 요소를 이동하며
실시간으로 좌표가 업데이트됩니다
🎯 absolute
🎯 static
🎯 relative
📖 사용 방법
1
크롬 확장 설치
크롬 웹 스토어에서 Elements Position Drag Overlay를 설치합니다
크롬 웹 스토어에서 Elements Position Drag Overlay를 설치합니다
2
웹사이트 방문
작업하고 싶은 웹사이트로 이동합니다
작업하고 싶은 웹사이트로 이동합니다
3
드래그 시작
Ctrl + 드래그 (Mac: Cmd + 드래그)로 position: absolute인 요소를 이동합니다
Ctrl + 드래그 (Mac: Cmd + 드래그)로 position: absolute인 요소를 이동합니다
4
실시간 확인
드래그하는 동안 left, top, right, bottom 값을 실시간으로 확인합니다
드래그하는 동안 left, top, right, bottom 값을 실시간으로 확인합니다
5
빠른 토글
Ctrl + Shift + Q (Mac: Cmd + Shift + Q)로 확장 기능을 빠르게 켜고 끌 수 있습니다
Ctrl + Shift + Q (Mac: Cmd + Shift + Q)로 확장 기능을 빠르게 켜고 끌 수 있습니다
🎨 실시간 Position 표시
드래그하는 동안 CSS position 값(left, top, right, bottom)을 실시간으로 오버레이로 표시합니다
🔧 개발자 친화적
position: absolute인 요소만 드래그 가능하여 레이아웃을 안전하게 보호합니다
⚡ 빠른 프로토타이핑
UI 레이아웃 조정과 반응형 디자인 작업에 최적화된 도구입니다
🌐 모든 웹사이트 지원
크롬 확장으로 설치하면 모든 웹사이트에서 이 기능을 사용할 수 있습니다
⚙️ 커스터마이징
오버레이 위치, 색상, 알림 설정 등을 팝업에서 쉽게 조정할 수 있습니다
🔒 안전한 사용
relative, static, fixed 요소는 드래그할 수 없어 기존 레이아웃을 보호합니다