[JAVASCRIPT] 요소의 크기 및 위치를 표현하는 속성, 메서드

자바스크립트 : 요소 크기 및 위치 속성과 메서드

이번 시간에는 자바스크립트의 요소의 위치 및 크기를 표현하는 속성과 메서드들을 알아보겠습니다.😇 다음의 표를 통해 알아봅시다.

---

#01. 요소의 속성 및 메서드

요소 크기 속성	설명
element.clientWidth	요소의 가로 값 (패딩 / 보더 / 마진 미포함)
element.clientHeight	요소의 세로 값 (패딩 / 보더 / 마진 미포함)
element.clientTop	요소의 Y축 값 (부모기준)
element.clientLeft	요소의 X축 값 (부모 기준)
element.offsetWidth	요소의 가로 값 (보더 / 패딩 포함)
element.offsetTop	요소의 Y축 값 (문서 기준)
element.offsetLeft	요소의 X축 값 (문서 기준)
element.getBoundingClientRect()	top, bottom, left, right, x, y, width, height 포함 즉 요소의 모든 크기와 위치를 구한다.

---

🎉 결과보기 🎉