[ JavaScript ] 자바스크립트 기본 문법 | 문서의 기하학적 특성(스크롤 제어, Viewport, getBoundingClientRect())
·
Archive/Develop
해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 이번 포스팅에서는 요소들의 위치와 크기를 알아내보도록 하겠습니다. 자바스크립트 기본 문법 :: 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 알아보도록 하겠습니다. Coding 출력된 문서는 다음과 같습니다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px입니다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px입니다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect인것입니다. 이를 콘솔에서 실행한 결과는 아래와 같습니다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 됩니다. 참고로 getB..