엘리먼트의 위치와 크기
getBoundingClientRect() : ClientRect 객체를 반환
top - 문서의 최상단으로부터 거리
left - 문서의 시작점에서 객체가 시작되는 왼쪽 지점까지 거리
height - 객체의 높이
width - 객체의 폭
right - 문서의 시작점에서 객체가 끝나는 오른쪽지점까지
offsetParent() : Element의 top, left 측정기준을 확인
-CSS position 값이 static인 table 과 같은 엘리먼트가 부모인경우 offsetParent는 부모 객체가 된다.
뷰포트
setInterval(function(){}, time);
-function을 time 간격으로 반복적으로 실행
window.pageYOffset : 웹페이지 세로 스크롤을 움직인 거리(px 단위)
-getBoundingClientRect.top : 세로 스크롤 움직이는 만큼 늘어나거나 줄어듦. 뷰포트를 기준으로 스크롤한만큼
-viewport의 좌표
window.pageXOffset : 웹페이지 가로 스크롤을 움직인 거리(px 단위)
-getBoundingClientRect.left : 가로 스크롤 움직이는 만큼 늘어나거나 줄어듦. 뷰포트를 기준으로 스크롤한만큼
-viewport의 좌표
스크롤제어
window.scrollTo(x, y);
x : 가로 스크롤
y : 세로 스크롤
스크린의 크기
window.innerWidth - 뷰포트 가로 크기
window.innerHeight - 뷰포트 세로 크기
screen.width - 사용자 모니터 가로 크기
screen.height - 사용자 모니터 세로 크기
