좌표

요소를 움직이려면 좌표에 익숙해져야 한다.

대부분의 자바스크립트 메서드는 다음 두 좌표 체계 중 하나를 이용한다.

1. 창 기준 - position: fixed 와 유사하게 창 맨 위 왼쪽 모서리를 기준으로 계산한다.
   • 이 좌표를 clientX / clientY 로 표시
2. 문서 기준 - 문서 최상단에서 position: absolute를 사용하는 것과 비슷하게 문서 맨 위 왼쪽 모서리를 기준으로 좌표 계산한다.
   • 이 좌표를 pageX / pageY 로 표시

스크롤을 움직이기 전에는 창의 맨 위 왼쪽 모서리가 문서의 맨 위 왼쪽 모서리와 일치한다. 그런데 스크롤이 움직이면서 문서가 이동하면 문서 기준 좌표는 변경되지 않지만, 창 내 요소는 움직이기 때문에 창 기준 요소 좌표인 clientX와 clientY 좌표가 변경된다.

창 기준 좌표를 사용할 때는 position: fixed 와 사용하면 좋고,

문서 기준 좌표를 사용할 때는 position: absolute와 사용하면 좋다.

문서가 스크롤 되었을 때, 창 기준 좌표인 clientY는 문서가 스크롤되면서 해당 지점이 창 상단과 가까워졌기 때문에 좌표가 변한다. 하지만 문서 기준 좌표인 pageY는 문서 맨 위부터 계산되기 때문에 스크롤 후에도 값이 동일하다.

• 문서 기준 좌표: 스크롤 후에도 값 고정
• 창 기준 좌표: 스크롤 후 값 변경

요소 좌표를 얻는 법 - getBoundingClientRect()

elem.getBoundingClientRect() 메서드는 elem을 감싸는 가장 작은 네모의 창 기준 좌표를 DomRect 클래스의 객체 형태로 반환한다.