[JS]좌표 관련 API

요소의 위치를 찾는 API

Element.getBoundingClientRect();

//출력값: DOMRect {x: , y: , width: , height: , top: , bottom: , left: , right: }

getBoundingClientRect는 DOM의 모든 요소에 존재하는 Element객체의 메서드이다
호출 시 크기와 위치에 관한 정보를 받을 수 있다

주의 할 점1: getBoundingClientRect의
x, y는 왼쪽 상단으로 부터 가장 가까운 부분의 좌표를,
bottom, right은 왼쪽 상단으로 부터 가장 먼 부분의 좌표를 나타낸다

주의 할 점2: css의 bottom, right는 왼쪽 상단으로 부터 가장 가까운 부분의 좌표를 의미하기 때문에
getBoundingClientRect의 bottom, right와 구분해야 한다

---

getComputedStyle(elem)

계산이 끝난 읽기 전용의 좌표값을 찾을 수 있다

---

event.screenX, Y

사용자의 모니터 화면을 기준으로 x, y좌표를 반환

event.pageX, Y

문서 전체(스크롤 포함)를 기준으로 x, y좌표를 반환

event.clientX, Y

현재 보이는 브라우저 화면을 기준으로 x, y좌표를 반환

event.offsetX, Y

이벤트 대상을 기준으로 x, y좌표를 반환

---