getBoundingClientRect란
getBoundingClientRect 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공합니다.
Element.getBoundingClientRect()반환값
메서드를 실행 후 반환되는 값인 DOMRect에는 엘리먼트에 대한 사이즈와 위치정보를 담고 있습니다. width, height, x, y, top, left, bottom, right 프로퍼티를 제공하고 있습니다.
- width : 엘리먼트의 너비
- height : 엘리먼트의 높이
나머지 x, y, top, left, bottom, right는 아래의 이미지를 보면 이해하기 쉽습니다.
여기에서 주의해햐할 점은 width와 height를 제외한 나머지 프로퍼티는 기준이 부모나, document가 아닌 뷰포트라는 점입니다.
그래서 뷰포트에 따라 Element.offsetTop과 Element.getBoundingClientRect().top 의 값이 다르게 나올 수 있습니다.
