크기와 위치에 대한 속성

⭐️ 크기 및 위치 요소 속성 ⭐️

---

01. 크기 / 위치를 표현하는 속성 및 메서드

종류	설명	특징
element.clientWidth();	요소의 너비값을 구합니다.	바깥쪽 여백(margin), 테두리(border) 값은 포함하지 않습니다.
element.clientHeight();	요소의 높이값을 구합니다.	바깥쪽 여백(margin), 테두리(border) 값은 포함하지 않습니다.
element.clientTop();	요소의 Y축 값을 구합니다.	부모를 기준으로 값을 계산합니다. (position 과 같은 개념)
element.clientLeft();	요소의 X축 값을 구합니다.	부모를 기준으로 값을 계산합니다. (position 과 같은 개념)
element.offsetWidth();	요소의 너비값을 구합니다.	바깥쪽 여백(margin), 테두리(border) 값까지 포함합니다.
element.offsetHeight();	요소의 높이값을 구합니다.	바깥쪽 여백(margin), 테두리(border) 값까지 포함합니다.
element.offsetTop();	요소의 Y축 값을 구합니다.	문서를 기준으로 값을 계산합니다. (position 과 같은 개념)
element.offsetLeft();	요소의 X축 값을 구합니다.	문서를 기준으로 값을 계산합니다. (position 과 같은 개념)
element.getBoundingClientRect();	크기 및 위치 (top, left, right, bottom, x, y, width, height) 값을 구합니다.	console.log( )로 확인할 수 있습니다.

# 예제