DOM 크기, DOM 위치

1. DOM 노드의 크기 및 위치

  ㅇ 컨텐츠 + 패딩 + 스크롤바 + 경계선: offsetHeight, offsetWidth
     - getBoundingCientRect().height, getBoundingCientRect().width 
  ㅇ 컨텐츠 + 패딩 : clientHeight, clientWidth
  ㅇ 보이는 컨텐츠 크기 : getComputedStyle().height, getComputedStyle().width 
  ㅇ 실제 컨텐츠 크기 + 패딩 : scrollHeight, scrollWidth

  ㅇ 화면 상단 ~ 요소 top 경계선 : getBoundingCientRect().top
  ㅇ 화면 상단 ~ 요소 bottom 경계선 : getBoundingCientRect().bottom
  ㅇ 부모 경계선 ~ 요소 top 경계선 : offsetTop 
  ㅇ 부모 경계선 ~ 요소 bottom 경계선 : offsetBottom

  ㅇ 브라우저 창 끝(스크롤바 무시) ~ 클라이언트 영역 : clientX, clientY
  ㅇ 실제 모니터 화면 끝(스크롤바 무시) ~ 클라이언트 영역 : screenX, screenY
  ㅇ 실제 페이지 끝(안보이는 곳 포함) ~ 클라이언트 영역 : pageX, pageY