jQuery 노드 요소의 위치 및 크기 조작

// document 노드의 위치를 기준으로 하는 위치값 구하기 (전역좌표 위치 구하기)
$("#child").offset().left
$("#child").offset().top

// 부모 노드를 기준으로 하는 위치값 구하기 (지역좌표 위치 구하기)
$("#child").position().left
$("#child").position().top

// position 속성값이 absolute / relative 로 설정된 조상노드 중 가장 근접한 노드 구하기 (부모좌표노드 구하기)
$("#child").offsetParent()

// 부모 노드를 기준으로 대상노드의 위치 설정하기 (지역좌표 위치 설정하기)
$("#child").css({
  left: 10, top: 10
})

// 최상위 노드인 document 노드의 위치를 기준으로 대상노드의 위치 설정하기 (전역좌표 위치 설정하기)
$("#child").offset({
  left: x, top: y
})

// 대상요소의 크기 구하기 / 변경하기
.width()
.height()
.width(200)
.height(200)

// 대상요소+padding 의 크기 구하기 / 변경하기
.innerWidth()
.innerHeight()
.innerWidth(200)
.innerHeight(200)

// 대상요소+padding+border 의 크기 구하기
.outterWidth()
.outterHeight()

// 대상요소+padding+border+margin 의 크기 구하기
.outterWidth(true)
.outterHeight(true)

// 대상요소의 scroll 위치값 구하기 / 설정하기
.scrollLeft()
.scrollTop()
.scrollLeft(10)
.scrollTop(10)

// document 의 크기 구하기
$(document).width()
$(document).height()

// 모니터화면 (Screen)의 크기 구하기
screen.width
screen.height

// 작업표시줄 영역을 뺀 모니터화면 (Screen)의 크기 구하기
screen.availWidth
screen.availHeight

// 웹브라우저의 윈도우 내부영역 크기 구하기
window.innerWidth
window.innerHeight

// 웹브라우저의 윈도우 내부영역+메뉴바 크기 구하기
$(window).width()
$(window).height()

// 웹브라우저의 윈도우 내부영역+메뉴바+스크롤바 크기 구하기
window.outerWidth
window.outerHeight

// window.open() 메서드로 만든 윈도우창의 크기 변경하기
window.resizeTo(500, 500)

// 모니터화면을 기준으로 윈도우창의 위치 구하기
window.screenLeft
window.screenTop

// window.open() 메서드로 만든 윈도우창의 위치 변경하기
window.moveTo(dx, dy)
window.moveBy(dx, dy)

// 윈도우 영역에서 스크롤된 위치값 구하기
window.pageXOffset
window.pageYOffset

// 윈도우 영역에서 스크롤위치를 움직이기
window.scrollTo(x, y)
// 윈도우 영역의 현재 스크롤 위치에서 x, y만큼 스크롤 움직이기
window.scrollBy(x, y)

// 웹브라우저 윈도우 내부영역을 기준으로 마우스 커서 전역위치 구하기
e.clientX
e.clientY
// 문서(document)를 기준으로 마우스 커서 전역위치 구하기
e.pageX
e.pageY
// 클릭한 대상을 기준으로하는 마우스 커서의 위치 구하기 ex) offsetX, offsetY
e.pageX - $target.offset().left
e.pageY - $target.offset().top