[생활코딩] 문서의 기하학적 특성(엘리먼트 위치 크기 알아내기 / Viewport / 스크롤 / 스크린의 크기)

엘리먼트의 위치 및 크기 알아내기

• API 이용
  : console.log(t.getBoundingClientRect());
  
  
• 테두리를 제외한 엘리먼트의 크기
  : ClientWidth, ClientHeight 사용

---

 

Viewport

• 스크롤에 따라 위치의 값이 달라질 때 이해하기
• 스크롤 할 때 바뀌는 화면영역 = viewport
  
  
• Viewport의 좌표 : getBoundingClientRect
  - 문서의 내용 중 사용자에게 보여주는 영역
  - getBoundingClientRect의 값이 스크롤에 따라 달라지는 뷰포트의 좌표를 사용
  - 스크롤의 정도를 알고 싶을 때 pageYOffset 사용하기
  
  
• 문서의 좌표
  - 뷰포트 + 스크롤된 정도

---

스크롤

• scrollLeft, scrollTop 프로퍼티 이용 ➡ 문서의 스크롤 값 변경

 

---

스크린의 크기 (통계정보 수집 시 사용됨)

• 모니터의 크기와 브라우저 뷰포트의 크기
  - window.inner* : 뷰포트의 크기
  - screen.* : 스크린의 크기(사용하는 모니터의 크기)

 

---

• 출처
  문서의 기하학적 특성 - 생활코딩 (opentutorials.org)

문서의 기하학적 특성 - 생활코딩