DOM 크기, DOM 위치

1. DOM 노드의 크기

  ㅇ 컨텐츠 + 패딩 + 스크롤바 + 경계선: offsetHeight, offsetWidth
     - getBoundingClientRect().height, getBoundingClientRect().width
     * getBoundingClientRect() 
        . height,width,top,bottom,x,y,left,right 픽셀 수 속성을 가진 객체를 반환
     * 스크롤바 요소는, 웹브라우저나 디바이스 마다 다르게, 공간을 차지할 수 있어서 주의 요함
  ㅇ 컨텐츠 + 패딩 : clientHeight, clientWidth

  ㅇ 보이는 컨텐츠 크기 : getComputedStyle().height, getComputedStyle().width 
  ㅇ 실제 컨텐츠 크기 + 패딩 : scrollHeight, scrollWidth


2. DOM 노드의 위치

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

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


  ※ [참고_웹] ☞ javascript.info (요소 사이즈와 스크롤)