element.getboundingclientrect()

// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY는 마우스 이벤트 속성const x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까..