dom 이 가진 getBoundingClientRect 메서드

 

화면작업을 하다보면 가끔 요소의 좌표축이 필요할때가 있다

 

특정 dom을 접근하여 getBoundingClientRect   메서드를 실행하면

다양한 값을 얻을 수 있다

 

 

 

 

속성 이름 설명 계산 방식 / 특징

x	요소의 왼쪽 경계가 뷰포트 기준으로 위치한 x 좌표. left와 동일한 값을 가짐.	뷰포트 기준 좌표
y	요소의 상단 경계가 뷰포트 기준으로 위치한 y 좌표. top과 동일한 값을 가짐.	뷰포트 기준 좌표
top	요소의 상단 경계가 뷰포트 기준으로 위치한 y 좌표. 스크롤 상태에 따라 값이 변함.	y와 동일
left	요소의 왼쪽 경계가 뷰포트 기준으로 위치한 x 좌표. 스크롤 상태에 따라 값이 변함.	x와 동일
right	요소의 오른쪽 경계가 뷰포트 기준으로 위치한 x 좌표.	left + width
bottom	요소의 하단 경계가 뷰포트 기준으로 위치한 y 좌표.	top + height
width	요소의 가로 길이(콘텐츠, 패딩, border 포함).	렌더링된 실제 크기
height	요소의 세로 길이(콘텐츠, 패딩, border 포함).	렌더링된 실제 크기