[JavaScript] 요소 크기 메서드 정리

요소 크기 메서드

요소 크기 메서드에 대해 정리해보자.

---

요소 크기 메서드 정리

메서드	설명
element.clientWidth	요소의 가로값(margin/border 미포함)
element.clientHeight	요소의 세로값(margin/border 미포함)
element.clientTop	요소의 Y축값(부모 기준)
element.clientLeft	요소의 X축값(부모 기준)
element.offsetWidth	요소의 가로값(border/padding 포함)
element.offsetHeight	요소의 세로값(border/padding 포함)
element.offsetTop	요소의 Y축값(문서 기준)
element.offsetLeft	요소의 X축값(문서 기준)
element.getBoundingClientRect()	요소의 크기 및 위치값

코드펜 결과