요소 사이즈와 스크롤

<div id="example">
  ...텍스트...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

일반적으로 width는 content 를 기준으로 한다
- box-sizing : border-box 사용하면 border로 변경됨
스크롤바도 크기를 차지하는 경우가 있다.
만약 콘텐츠가 많다면 padding-bottom으로 텍스트가 넘어갈 수 있다.
- width, height가 설정되어있을 때, content의 넘어간 부분은 pdding으로 설정된 부분으로 넘어갈 수 있음.

기하 프로퍼티

offsetParent와 offsetLeft, offsetTop

offsetParent : 요소를 렌더링할 때, 좌표 계산에 사용되는 가장 가까운 조상 요소 참조 반환 좌표 계산 기준은 아래의 3개
1. CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소
2. <td>나 <th>, 혹은 <table>
3. <body>

offsetLeft, offsetTop 프로퍼티는 offsetParent를 기준으로 각각 요소가 오른쪽으로, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.

아래의 경우엔 offsetParent가 null이 될 수 있다.

화면에 보이지 않는 요소(CSS display 프로퍼티가 none이거나 문서 내에 있지 않은 요소)
<body>와 <html>
position 프로퍼티가 fixed인 요소