브라우저 좌표란?

coordinates
브라우저에는 x축과 y축이 있다.
x는 수평축 y는 수직축이다.
좌표는 브라우저창의 왼쪽 맨 위에서부터 시작(0,0) 한다.
x는 오른쪽으로 갈수록 숫자가 커지고
y는 아래로 갈수록 숫자가 커진다.

Element.getBoundingClientRect()

Element 오브젝트 안에 들어 있는 api 즉 함수이다.
Element는 브라우저에 올라가 있는 DOM에 있는 모든 요소들 (이미지 태그, 디브 태그 등등 모든 태그들)이다.
element에는 모두 getBoundingClientRect() 함수가 있다.
이미지를 화면에 보여주는 이미지 태그가 있다고해보자
imgElement.getBoundingClientRect()를하면
이미지에 대한 width, height, top, left, right, bottom 등과 같은 다양한 정보를 제공한다.

top, left

top, left는 요소의 position에 대한 정보이다.
top, left는 요소의 왼쪽 위의 맨끝 지점을 기준으로한다.
left는 오른쪽으로 얼마나 갔는지를 나타내기 때문에 x좌표와 같고
top은 위에서 아래로 얼마나 갔는지를 나타내기 때문에 y좌표와 같다.

bottom, right

bottom, right도 요소의 position에 대한 정보이다.
bottom, right은 요소의 오른쪽 아래 맨끝 지점을 기준으로한다.
따라서 bottom은 요소가 브라우저의 위에서 아래까지 가장 먼 지점의 거리를 나타내고
right은 브라우저의 왼쪽에서 가장 먼 지점의 거리을 나타낸다.

주의할 점은 css에서 사용하는 bottom, right이랑은 개념이 다르다는 것이다.
css의 bottom은 브라우저 맨 아래에서 지점까지의 거리,
right은 맨 오른쪽에서 지점까지의 거리를 나타낸다.

Client x,y vs Page x,y

페이지의 내용이 많아서 스크롤이 생겼고 사용자가 스크롤을 어느정도 내린 상태라고 했을때
브라우저에 보이는 내용보다 실제 페이지의 내용이 위, 아래에 더 있을 것이다.
이때 사용자가 클릭을 하면 Client x,y 와 Page x,y가 달라진다.
즉, 사용자가 클릭을 했을때 발생하는 클릭 이벤트 안의 x,y값과 페이지의 x,y값이 다르다.

Client x,y

사용사자 클릭을하면 event라는 오브젝트가 개발자가 등록한 listner에 등록이된다.
event에는 client x,y라는 값이 들어있다.

client x,y는 페이지와 상관 없이 브라우저 창을 기준으로
클릭한 지점이 어디인지 나타내는 것이다.
즉, x는 브라우저 창의 맨왼쪽에서 지점까지의 거리
y는 브라우저 창의 맨위쪽에서 지점까지의 거리를 나타낸다.

Page x,y

Page x,y 는 페이지(문서) 자체를 기준으로 클릭한 지점을 나타낸다.
즉 x는 페이지 맨오른쪽에서 지점까지의 거리
y는 페이지 맨위쪽에서 지점까지의 거리를 나타낸다.