element.getBoundingClientRect()
현재 브라우저 화면을 기준으로 위치 값을 가져옴
element의 크기(width, height)와 뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y) 이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴.
width, height는 contents뿐 아니라 padding과 border까지 포함.
const target = document.querySelector('.target');
console.log(target.getBoundingClientRect());
/*
DOMRect {
x,
y,
width,
height,
top,
bottom,
left,
right
}
*/