문서의 기하학적 특성 (Section 33)

참고> opentutorials.org/course/1375/7112

 

1. 문서에 나타나는 Element의 크기, 위치, 스크롤 등을 조작하는 방법을 공부해보자

2. GetBoundingClientRect(): 객체의 기하학적 특징을 알 수 있음
-> IE는 width, height를 제공해주지 않음

3. offsetParent: 기하학적 값들의 기준이 되는 객체를 나타냄

4. Viewport: 문서가 너무 길거나 넓을 경우 사용자에게 보여주는 영역

5. pageYOffset: 사용자가 세로 스크롤을 움직인 offset

6. 사실 GetBoundingClientRect()로 얻는 값은 body 태그와의 거리가 아닌 Viewport와의 거리이다.

7. scrollTo() 함수: 스크롤을 파라미터로 전달받은 x offset, y offset 만큼 움직여주는 함수.

 

8. window.innerWidth, window.innerHeight: Viewport의 크기

 

9. screen.width, screen.height: 사용자가 사용하는 모니터의 크기

-> 사용자 맞춤형 웹페이지 구성에 도움이 되는 통계 지표로 활용 가능