이번 게시물의 기준이 되는 HTML 코드.
1. window.innerWidth / window.innerHeight
이 속성을 사용하면 현재 화면(뷰포트)의 크기를 얻을 수 있다.
주황색 네모 영역의 width와 height가 출력된 것.
2. window.scrollX / window.scrollY
이 속성은 페이지의 좌상단 기준, 현재 화면(뷰포트)의 수평 혹은 수직 스크롤 위치를 얻을 수 있다.
페이지의 좌상단을 기준으로 함. 현재는 아무 스크롤도 하지 않은 상태이므로 0 0으로 출력되고 있다. 
y축으로 약 1437px 이동하였다는 의미.
3. window.scrollTo() / E.scrollTo()
이 메소드를 사용하면 지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤한다.
대상.scrollTo(X좌표, Y좌표)
대상.scrollTo({ top : Y, left : X, behavior : 'smooth' })
1초 뒤에 y축으로 500px 스크롤된 것을 볼 수 있음. 조금 더 부드러운 모션을 주기 위해서는 'behavior' 속성을 넣을 수 있다. 
behavior : 'smooth' 속성을 넣어주면 1초 뒤 y축으로 500px 부드럽게 움직인다.
요소에서도 이 메소드는 사용 가능한데, 위 사진은 아직 새로고침을 하기 전 상태이다.
1초 뒤, 부모 박스의 스크롤이 최대한 내려간 모습을 볼 수 있다.
4. E.clientWidth / E.clientHeight
이 속성은 테두리 선(border)을 제외한 요소의 크기를 얻을 수 있다.
5. E.offsetWidth / E.offsetHeight
이 속성은 테두리 선(border)을 포함한 요소의 크기를 얻을 수 있다. 앞서 살펴본 clientWidth, clientHeight 속성 보다 유용하게 사용 가능하다.
6. E.scrollLeft / E.scrollTop
이 속성은 스크롤 요소의 좌상단 기준, 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치를 얻을 수 있다. window 객체에 parentEl을 할당하는 이유는 윈도우 객체는 전역 객체이다. 내가 화면에서 parent 요소에 접근하기 위해서는 parentEl 변수를 window 객체에 연결해야만 콘솔 창에서 parentEl에 바로 접근해서 사용할 수 있기 때문이다.
새로고침하면 스크롤이 자동으로 올라가기 때문에, 콘솔창에 코드를 복붙하면 결과가 잘 나옴.
7. E.offsetLeft / E.offsetTop
이 속성은 페이지의 좌상단 기준, 요소의 위치를 얻을 수 있다.
parentEl의 출력 결과를 보면, x축으로는 8px, y축으로 1508px 지점에 위치하고 있다는 것임.
8. E.getBoundingClientRect()
이 메소드는 테두리 선(border)을 포함한 요소의 크기와 화면에서의 상대 위치 정보를 얻는다.
이 속성은 상대적 위치에 따라서 출력 결과가 바뀐다는 것.
