🎯 offsetHeight, offsetTop, 마우스 좌표 완벽 이해하기
📌 목표: 아래 파란 박스 위에서 마우스를 움직여보세요.
섹션의 위치, 크기, 마우스의 위치가 어떻게 계산되는지 실시간으로 확인할 수 있습니다!
📊 박스의 크기와 위치
마우스 위치 (Page 기준)
clientX: 0, clientY: 0
마우스 위치 (요소 내부 기준)
offsetX: 0, offsetY: 0
Viewport 기준 위치 (getBoundingClientRect)
top: 0, left: 0
💡 각 값의 의미:
• offsetWidth/Height: 요소의 전체 너비/높이 (border + padding + content)
• offsetTop/Left: 부모 요소 기준으로 요소가 떨어진 거리
• clientX/Y: 마우스가 viewport(화면) 기준으로 있는 위치
• offsetX/Y: 마우스가 해당 요소 내부에서의 위치
• getBoundingClientRect(): viewport 기준으로 요소의 정확한 위치와 크기
📜 스크롤해보기 (offsetTop 값이 변하나요?)
⚠️ offsetTop은 스크롤해도 변하지 않습니다!
왜냐하면 offsetTop은 부모 요소 기준 고정 거리이기 때문입니다.
대신 getBoundingClientRect().top은 스크롤할 때마다 변합니다.
위로 스크롤하면서 offsetTop과 getBoundingClientRect를 비교해보세요