[WEB] 브라우저 좌표

📄 브라우저 좌표

브라우저는 엑스축과 와이축으로 나뉘어져 있습니다.

좌표는 왼쪽 제일 최상위에서 시작합니다.

Element.getBoundingclientRect()는 Elment오브젝트안에 들어있는 API함수입니다.

Elment오브젝트이기 때문에 코드안에 있는 모든 요소들이 getBoundingclientRect를 가지고 있습니다.

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트의 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.

domRect = element.getBoundingClientRect();

요소에 관련된 사이즈나 위치에 관련된 정보를 얻을 수 있습니다.

x축과 y축을 통해 요소가 윈도우 위에서 얼마나 멀리 떨어져 있는지, 크기는 얼마인지 알아낼 수 있습니다.

좌표의 시작점이 CSS는 오른쪽 아래이지만, JavaScript는 좌표의 시작점이 왼쪽 위입니다.