[JavaScript] 엘리먼트 요소의 상대 좌표와 절대 좌표 구하기

What

상대 좌표는 현재 우리가 보고 있는 브라우저 창의 크기(뷰포트)를 기준으로 위치를 나타날 때 쓰이고, 절대 좌표는 전체 페이지 내에서 해당 요소가 어디에 위치하였는지를 구할 때 쓰인다.

높이가 10,000px인 페이지가 있다고 할 때, 페이지 중앙에 있는 요소의 상대 좌표와 절대 좌표를 구해본다면 절대 좌표는 5,000px 정도가 나오더라도 상대 좌표는 1px 밖에 안 나올 수도 있는 것이다.

 

How

윈도우 내부 (뷰포트) 크기 구하기

const width = window.innerWidth; // 뷰포트 너비
const height = window.innerHeight; // 뷰포트 높이

브라우저 창을 봤을 때, 상단의 주소창/북마크 바 및 우측의 스크롤바, 브라우저 창을 감싸고 있는 테두리 등을 제외한 오로지 콘텐츠만이 나오는 부분이 바로 뷰포트이다. 이 부분의 너비와 높이를 구하는 게 innerWidth, innerHeight이다.

 

윈도우 전체 (창 크기까지 포함한) 크기 구하기

const width = window.outerWidth; // 윈도우 창 너비
const height = window.outerHeight; // 윈도우 창 높이

위에서 뷰포트를 구할 때 제외했던 것들을 모두 포함시킨 게 바로 outerWidth, outerHeight이다.

그냥 브라우저 창 그 자체의 크기라고 생각하면 된다. 보통은 inner-를 자주 쓰는 편이라서 사용 빈도수는 낮은 편이다.

 

엘리먼트 요소의 크기 구하기

// padding + border + scrollBar
const width = el.offsetWidth;
const height = el.offsetHeight;

// Only padding
const width = el.clientWidth;
const height = el.clientHeight;

(출처 - https://www.geeksforgeeks.org)

offsetWidth, offsetHeight는 여백, 테두리, 스크롤 바까지 모두 합친 요소의 크기를 구할 때 쓰이고 clientWidth, clientHeight는 오로지 여백을 포함한 요소의 크기를 구할 때 쓰인다. 일반적으로 요소의 크기를 구할 땐, 여백뿐만 아니라 테두리와 스크롤 바까지 포함해서 생각하기 때문에 offset- 을 더 자주 사용하는 편이다.

 

엘리먼트 요소의 상대 좌표 구하기

const rect = el.getBoundingClientRect();
rect.top; // 화면 상단에서 부터 요소의 처음 위치 값
rect.bottom; // 화면 상단에서 부터 요소의 끝 위치 값
rect.left; // 화면 좌측에서 부터 요소의 처음 위치 값
rect.right; // 화면 좌측에서 부터 요소의 끝 위치 값
rect.width; // 요소의 너비
rect.height; // 요소의 높이

상대 좌표는 내가 보고 있는 브라우저의 화면을 기준으로 하기 때문에 구하는 게 그렇게 어렵진 않다.

getBoundingClientRect()를 이용하면 현재 뷰포트를 기준으로 요소가 어디로부터 얼마나 떨어져 있는지를 쉽게 구할 수 있다.

 

엘리먼트 요소의 절대 좌표 구하기

const pageY = window.pageYOffset;
const rect = el.getBoundingClientRect();

pageY + rect.top // 요소의 절대 좌표

절대 좌표는 스크롤 값 + 상대 좌표로 구할 수 있다. 절대 좌표는 전체 페이지를 기준으로 어디에 위치하냐를 구하는 것이기 때문에 스크롤이 Y축으로 내려간 값을 먼저 구해야 한다. 그다음에 상대 좌표를 더해주면 그 요소의 절대 좌표를 구할 수 있다. 보통은 요소의 상단을 기준으로 처음 위치 값을 좌표로 하기 때문에 rect.top을 주었다.

 

1. 상대 좌표 getBoundingClientRect()
2. 절대 좌표 pageYOffset + getBoundingClientRect().top
3. 요소의 크기 구하기 offsetWidth, offsetHeight
4. 화면의 최상단(좌단)으로 부터 얼마나 스크롤했는지 알아보기 pageYOffset, pageXOffset