jQuery position, offset(위치 프로퍼티와 메소드)

jQuery 에서 제공하는 엘리먼트의 위치, 크기와 관련된 프로퍼티와 메소드

jQuery에서 제공되는 프로퍼티와 메소드는 다른 객체의 위치 프로퍼티와 메소드와 거의 비슷하지만 [ 자바스크립트 DOM 프로퍼티/메소드 > jQuery 프로퍼티/메소드] 인 부등호의 관계를 보면 알 수 있듯이 자바스크립트 DOM 프로퍼티/메소드를 필히 알아야 할 필요성이 있다.

jQuery 프로퍼티/메소드	내 용
offsetParent()	- offsetLeft, offsetTop 의 기준이 될 부모 엘리먼트 (동적 위치인 경우는 동적위치가 적용된 상위(부모) 엘리먼트)
offset().left, offset().top	- Documet를 기준으로 한 엘리먼트의 위치 값
position().left, positon().top	- 부모(offsetParent)엘리먼트를 기준으로 한 엘리먼트(요소)가 위치한 x, y 좌표값
scrollLeft(), scrollTop()	- 스크롤이 발생된 위치 값까지 계산된 x, y 값을 반환
outerWidth(), outerHeight()	- 엘리먼트의 넓이와 높이 (단 , 마진만 제외)
$(window).width() $(window).height()	- window의 넓이와 높이 (단, 메뉴바, 툴바, 스크롤바의 크기는 제외)
$(document).width() $(document).height()	- document 영역의 전체 넓이와 높이
clientX, clientY pageX, pageY offsetX, offsetY screenX, screenY	- 자바스크립트 DOM에서의 Event객체를 그대로 복사하여 사용하기 때문에 DOM에서의 MouseEvent 프로퍼티와 동일하게 사용 가능하다. (MouseEvent 프로퍼티 관련된 다른 포스팅 참조할 것)

offsetParent()

자바스크립트 DOM 에서는 position 속성값이 relative 또는 absolute 로 설정된 조상 노드 중에 가장 가까운 노드가 부모좌표 노드가 됩니다.

위의 그림과 같이 스타일이 적용되어 있다고 가정했을 경우에 child 노드를 대상으로 한 offsetParent 좌표를 구하게 되면 child 의 부모 좌표 노드는 parent2 가 아닌 parent1이 됩니다. 

그 이유는 parent2 의 postion 속성값이 relative 또는 absoulte 가 아니라 parent1 의 속성값이 absolute 이기 때문입니다.

만약에 parent2 에 position 속성값이 정의되어 있다면 부모좌표 노드는 parent2 가 될 것입니다.

이렇게 jQuery 의 offsetParent() 메소드를 활용하면 손쉽게 부모의 좌표를 구할 수 있습니다.

offset().left & offset().right

최상위 노드인 Document(문서)를 기준으로 하는 전역 좌표를 구하고자 할 때는 offset() 메소드를 활용합니다.

전역 좌표란? 최상위 노드인 Document 의 left:0, top:0; 위치를 시작점으로 하는 위치값을 의미합니다.

단, 주의해야할 사항은 window 객체가 시작위치가 아니라 Document 객체가 시작위치점이라는 것을 알아야 합니다.

다음의 그림을 참조해주세요.

콘텐츠의 양이 적을 경우 종종 window 객체의 시작 위치와 Document 시작위치가 같다고 혼동하실 수 있겠지만 콘텐츠의 양이 많아서 문서 영역이 윈도우 영역보다 큰 경우는 문서 영역을 전역 좌표의 기준 좌표로 사용되는 것을 확인하실 수 있을 것입니다.

한가지 비유를 하자면 Document 를 집, Window 를 창이리고 했을 경우에 창문(Window)을 통해 들여다 보이는 곳이 넓고 큰 것(Document)으로 이해하셔도 될 것 같습니다. 

물론, 콘텐츠의 양이 많지 않을 경우에는 document 와 window 의 시작점은 같을 것입니다.

position().left & position().top

jQuery 에서 제공되는 position() 메서드를 활용하면 대상 요소의 지역 위치값을 구할 수 있습니다.

지역 위치(좌표)란?

위에서 살펴본 바와 같이 부모 좌표 노드가 있을 경우 부모 좌표 노드의 left:0, top:0 위치를 기준으로 시작한 대상 노드의 위치 값을 의미합니다.

다시 말해, position() 메소드는 부모 노드를 기준으로한 지역좌표 위치를 다루는 메소드입니다.

주의사항

위치 좌표를 구하고자 하는 대상노드에 margin 속성값이 설정되어 있을 경우

- offset 으로 전역 좌표를 구할 경우 대상노드의 margin 을 제외한 영역의 크기로 대상노드의 위치를 설정하게 됩니다

- position 으로 지역 좌표를 구할 경우 대상노드의 margin 을 포함하여 위치를 설정하게 됩니다.

width & height 에 관한 요소 크기

요소크기는 요소 위치와는 달리 순수 기본 크기에 padding + scrollbar + border + margin 영역이 조합되어 있습니다.

다음의 그림을 참조해 주세요.

위의 그림과 같이 대상에 대한 요소 크기는 다음과 같습니다. (width 기준)

1. 대상노드.width() 는 순수 기본 element 에 대한 크기만을 구할 수 있습니다.

2. 대상노드.innerWidth() 는 element 인 기본크기에 padding 영역이 포함된 크기입니다. (기본 크기 + padding)>

3. 대상노드.outerWidth() 는 기본 크기, padding 과 border 영역이 포함된 크기입니다. (기본 크기 + padding + border)

4. 대상노드.outerWidth(true) 는 파라미터로 boolean 값인 true를 설정하게 되면 기본크기, padding, border 에 margin 영역까지 포함된 크기를 구할 수 있습니다. 

(기본크기 + padding + border + margin)

Jaehee's WebClub