웹페이지 요소의 크기와 위치를 알아낼 때 사용하는 getBoundingClientRect()

getBoundingClientRect()는 HTML 요소의 크기와 화면에서의 위치를 반환하는 메서드이다.

호출하면 top, right, bottom, left, width, height 등의 정보를 포함한 객체를 반환한다.

ex)

const element = document.querySelector('#myElement');
const rect = element.getBoundingClientRect();

console.log(rect.top);    // 요소의 위쪽 경계와 화면 위쪽 경계 사이 거리
console.log(rect.width);  // 요소의 너비
console.log(rect.height); // 요소의 높이

이 값들은 화면(뷰포트)을 기준으로 계산되며, 스크롤 상태에 따라 달라질 수 있다. 주로 위치 계산, 애니메이션 제작, 화면 표시 여부 판단 등에 활용된다.

 

* getBoundingCliendRect() 메서드의 작동 방식을 시각적으로 설명하는 그림 .