아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (199)
    • Web (145)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (5)
    • IT (32)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (6)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라
Web/jquery

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

Web/jquery

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

2018. 5. 15. 14:55

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





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



728x90
저작자표시 비영리 (새창열림)

'Web > jquery' 카테고리의 다른 글

[제이쿼리] fading / sliding / this  (0) 2018.05.15
[제이쿼리] 스크롤, 위치 값 구하기  (0) 2018.05.15
[제이쿼리] jQuery UI slider  (0) 2018.05.15
[제이쿼리] .on() 이벤트 종류  (0) 2018.05.15
[제이쿼리] .on() / .off() / .one()  (0) 2018.05.15

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.