TIL 20 | 브라우저 좌표 (coordinates)

브라우저의 좌표

• URL 창 제외한 브라우저의 좌측 상단 시작점이 (0,0)이다.
• 수평축을 X, 수직축을 Y로 둔다.

Element.getBoundingClientRect()

• 요소의 사이즈나 위치에 관련된 다양한 정보 확인 가능
• DOM 내 태그의 모든 요소는 .getBoundingClientRect라는 함수를 사용할 수 있다.
  ex) Image Element.getBoundingClientRect()
• 사이즈 (Width, Height)
• 위치 (top과 left, bottom, right) 포지션
• left는 왼쪽에서 요소까지의 거리 (X좌표와 동일)
• top은 위에서부터 요소까지의 거리 (Y좌표와 동일)
• bottom 브라우저 제일 위에서 요소 하단까지의 거리 (요소 우측 하단 모서리의 Y좌표)
• right 요소 우측 끝까지의 거리 (요소 우측 하단 모서리의 X좌표)

주의사항

CSS와 JS의 bottom과 right 개념 차이

JS는 기준점이 브라우저 좌측 상단이지만
CSS는 bottom과 right 개념이 브라우저의 우측 하단을 시작점으로 반영된다.
(CSS 포지션이 absolute나 relative일 때 bottom과 right 개념을 이용하게 된다.)

Client X,Y / Page X,Y

스크롤이 존재하는 경우 Client X,Y != Page X,Y

• Client X,Y : 스크롤되어 보여지는 화면 기준으로 X,Y 좌표 측정
• Page X,Y : 스크롤과 관계없이 잘린 요소들을 포함한 페이지 전체를 기준으로 X,Y 좌표 측정