getBoundingClientRect()

getBoundingClientRect() 함수는 Viewport의 시작지점을 기준으로한 상대좌표라고 할 수 있습니다.

viewport는 현재 사용자가 보는 브라우저의 화면입니다.

이 함수는 엘리먼트의 크기 좌표를 나타내는데

bottom, height, left, right, top, width, x, y 이렇게 많은 정보를 갖고 있습니다. 

 

top or y // 화면 상단 부터 대상의 처음 위치 값

bottom //  화면 상단 부터 대상의 끝 위치 값 

left or x //  화면 좌측 부터 대상의 처음 위치 값

right //  화면 우측 부터 대상의 끝 위치 값

width //  대상의 길이

height //  대상의 높이