TIL - 20220831

 오늘은 모던 JavaScript 튜토리얼에서 좌표에 대해 공부했다. 작성한 질문은 다음과 같다.

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

1. 창 기준: position: fixed와 비슷하게 창(window)의 좌측 최상단 모서리를 기준으로 좌표를 계산한다. 
2. 문서 기준: 문서(document) 최상단에서 position: absolute를 사용하는 것과 비슷하게 문서 좌측 최상단 모서리를 기준으로 좌표를 계산한다.

 

 어떤 요소의 좌표를 얻기 위해 사용하는 자바스크립트 메서드로 getBoundingClientRect가 있다. getBoundingClientRect() 메서드는 요소를 감싸는 가장 작은 네모의 창 기준 좌표를 DOMRect 클래스의 객체 형태로 반환한다. DOMRect의 주요 프로퍼티와 파생 프로퍼티로는 다음이 있다.

• x와 y: 요소를 감싸는 네모의 창 기준 X, Y 좌표
• width와 height: 요소를 감싸는 네모의 너비, 높이
• top과 bottom: 요소를 감싸는 네모의 위쪽 모서리, 아래쪽 모서리의 Y 좌표
• left와 right: 요소를 감싸는 네모의 왼쪽 모서리, 오른쪽 모서리의 X 좌표