💡 브라우저 좌표

coordinates (좌표)

 

• 왼쪽 최상위에서 시작 (0, 0)
• X축 (수평)
• Y축 (수직)

 

---

 

Element.getBoundingClientRect()

 

• 요소의 사이즈와 위치 정보
• Element Object 안에 있는 API
• Element는 DOM에 들어있는 모든 요소들 (모든 태그)

 

---

 

[Javascrip에서 사이즈와 위치]

 

• width :  요소의 너비
• height : 요소의 높이
• left : 왼쪽에서 요소까지의 거리 (X축)
• top : 위에서부터 얼마나 떨어져 있는가? (Y축)
• right : 왼쪽에서 제일 오른쪽 끝까지 얼마나 떨어져 있는지?
• bottom : 브라우저 위에서 제일 밑까지 얼마나 떨어져 있는지?

 

---

 

[CSS에서 right와 bottom]

 

• css에서 position을 absolute나 relative를 지정하게 되면 top과 left, right와 bottom을 이용해서 position을 지정한다.
• right : 브라우저 제일 오른쪽부터 떨어져 있는 거리
• bottom :  브라우저 제일 밑에서부터 떨어져 있는 거리

 

---

 

Client x, y  vs  Page x, y

 

• 스크롤링을 하면 숨겨진 페이지가 있다.
• 사용자가 클릭을 하면 client x, y 와 page x, y가 달라진다.
• 사용자가 클릭을 하면 event object가  이벤트 리스너에 전달된다.
• event에는 client x, y가 들어있다.
• client x, y는 브라우저에서 x와 y가 얼마나 떨어져 있는지 전달
• page x, y는 클라이언트에 들어 있는 사이즈가 아니라 page 자체에서 떨어져 있는 x와 y를 의미

 

Client x, y

 

• 브라우저 좌표값에 의해서 결정

 
 

Page x, y

 

• 문서의 시작점에 의해서 결정