[제이쿼리] 위치 및 크기 다루기

::위치 및 크기 다루기::

1. 지역 좌표 위치 다루기

.offsetParent();

- 위치(position) 요소를 기반으로 한 부모 요소를 찾습니다.

2. 지역 좌표 위치 다루기

- 부모 좌표 노드가 있을 경우 부모 좌표 노드의

- .position() 함수는 어떤 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 현재 위치를 알 수 있습니다. 문서 상의 상대적인 위치를 알아내는 .offset()과는 다소 대비됩니다. 기존 요소의 근처에 새로운 요소의 좌표를 설정하기에는 .position() 함수가 더 실용적입니다.

.position().left;

.position().top;

.css('left','위치값');

.css('top','위치값');

.css({left:위치값, top:위치값});

https://jsfiddle.net/Kimara/f2woy0c2/1/

3. 전역 좌표 위치 다루기

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

- 전역좌표란? 최상위 노드인 Document의 left:0; top:0; 위치를 시작점으로 하는 위치값을 의미합니다. 단, 주의해야 할 사항은 window 객체가 시작위치가 아니라 Document 객체가 시작위치점이라는 것을 알아야 합니다.

.width();

- 일치된 요소 집합 중 첫번째 요소에 대해 현재의 계산된 넓일 얻을 수 있다.

- .css(width)와 .width()간의 차이점은 픽셀 테스트의 유무에 있다.

.height();  :

.innerWidth();

.innerHeight();

.outerWidth();

.outerHeight();

.outerWidth(true);

.outerHeight(true);

.width(크기값);

.height(크기값);

.innerWidth(크기값);

.innerHeight(크기값);

https://jsfiddle.net/Kimara/qxwm6pxw/4/

참고 사이트 : http://webclub.tistory.com/107

★ 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 프로퍼티 관련된 다른 포스팅 참조할 것)