위치/크기

요소의 위치 및 크기 관련 속성

 

• 부모 좌표 노드 구하기
  - 부모 좌표 노드란 특정 노드의 기준 좌표가 되는 노드를 의미
  

  $대상.offsetParent()​

• 지역(부모 노드 기준) 좌표 위치 다루기
  1. 지역 위치 구하기
  

  $대상.position().left
  $대상.position().top​

   2. 지역 위치 설정하기
       - 부모 좌표 노드를 기준으로 요소의 위치 설정을 위한 전용 메서드는 없으며 일반 스타일 설정을 위해 사용하는 css() 메서드를 사용한다.
  

  $대상.css("left 또는 top", 값) 
  $대상.css({ left:값, top:값 })

• 전역 좌표 위치 다루기
  - 전역 좌표란 최상위 노드인 문서의 left:0, top:0 위치를 시작점으로 하는 위치 값을 의미한다.
  1. 전역 위치 값 구하기
       - 최상위 노드인 문서를 기준으로 하는 전역 좌표를 구하고 싶을 때는 offset() 메세드를 사용한다.
  

  $대상.offset().left
  $대상.offset().top​

   2. 전역 위치 설정하기
  

  $대상.offset({left:좌표값, top:좌표값})​

• 요소의 크기 다루기
  1. 요소의 크기 구하기
  

  // 1. 기본 크기 구하기
  $대상.width()
  $대상.height()
  
  // 2. 기본 크기 + padding 영역이 포함된 크기 구하기
  $대상.innerWidth()
  $대상.innerHeight()
  
  // 3. 기본 크기 + padding+border 영역이 포함된 크기 구하기
  $대상.outerWidth()
  $대상.outerHeight()
  
  // 4. 기본 크기 + padding+border+margin 영역이 포함된 크기 구하기
  $대상.outterWidth(true)
  $대상.outerHeight(true)​

  2. 요소 크기 변경하기
  

  // 1. 요소 크기 변경하기
  $대상.width(value)
  $대상.height(value)
  
  // 2. 기본 크기 + padding 크기 변경하기
  $대상.innerWidth(value)
  $대상.innerHeight(value)​

   
•  요소 스크롤 위치 다루기
  1. 스크롤 위치 구하기
  

  $대상.scrollLeft()
  $대상.scrollTop()​

   2. 스크롤 위치 설정하기
  

  $대상.scrollLeft(위치값)
  $대상.scrollTop(위치값)​

 

문서의 위치 및 크기 관련 기능

 

• 문서 크기 구하기
  - 문서의 전체 너비와 높이를 알 수 있는 메서드만을 제공할  뿐 문서 크기를 설정하는 등의 다른 기능은 따로 제공하지 않는다.
  

  $(document).width()
  $(document).height()​

 

화면이 위치 및 크기 관련 기능

 

• 전체 화면 크기 구하기
  - 웹브라우저에서 제공하는 Screen 객체의 width와 height property에는 모니터 해상도 정보가 담겨 있다.
  

  screen.width
  screen.height​

• 유효한 전체 화면 크기 구하기
  - 운영체제의 작업 표시줄 영역이 제외된 크기이다.
  

  screen.availWidth
  screen.availHeight​

 

윈도우의 위치 및 크기 관련 기능

 

• 윈도우 크기 구하기
  1. 기본 크기 구하기
       - 웹브라우저의 메뉴바와 툴바 그리고 스크롤바 등이 전혀 포함되지 않은 윈도우 내부 영역 크기
  

  window.innerWidth
  window.innerHeight​

   2. 기본 크기 + 메뉴바 + 툴바 영역이 포함된 크기 구하기
       - 윈도우 내부 크기에 메뉴바와 툴바 영역이 포함된 크기
  

  $(window).width() 
  $(window).heigth()​

   3. 기본 크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 구하기
       - 윈도우 내부 크기에 메뉴바와 툴바 그리고 스크롤바 영역까지 포함된 크기이다.
  

  window.outerWidth
  window.outerHeight​

• 윈도우 크기 설정하기
  - resizeTo() 메서드를 이용하면 윈도우 크기를 변경할 수 있다.
  - 이 메서드는 window.open() 메서드에 의해 만들어진 윈도우만이 크기를 변경할 수 있다.
  

  window.reseizeTo(width,height)​

   
•  윈도우 위치 다루기
  1. 윈도우 위치 구하기
       - 모니터에서 윈도우 위치 값을 구할 수 있다.
  

  window.screenLeft
  window.screenTop​

   2. 윈도우 위치 설정하기
       - moveTo() 메서드를 이용하면 화면에서 윈도우를 dx, dy 위치로 움직일 수 있다.
       -  moveBy() 메서드를 이용하면 현재 윈도우 위치에서 dx, dy만큼 윈도우를 움직일 수 있다.
       - window.open() 메서드에 의해 만들어진 윈도우만 이동할 수 있다.
  

  window.moveTo(dx,dy)
  window.moveBy(dx,dy)​

• 윈도우 스크롤 다루기
  1. 스크롤 위치 구하기
       - 윈도우 영역에서 스크롤된 위치 값을 구할 수 있다.
  

  window.pageXOffset
  window.pageYOffset​

   2. 스크롤 위치 설정하기
       - scrollTo() 메서드를 사용하면 윈도우 영역에서 스크롤 위치를 x, y 위치로 움직일 수 있다.
       - scrollBy() 메서드를 사용하면 윈도우 영역의 현재 스크롤 위치에서 x, y만큼 스크롤을 움직일 수 있다.
  

  window.scrollTo(x,y)
  window.scrollBy(x,y)​

   3. 스크롤 이벤트 처리하기
  

  $(window).on("scroll", function(){});​

  
  
  

마우스의 위치 및 크기 관련 기능

 

• 클릭한 전역 위치 구하기
  1. 윈도우를 기준으로 하는 전역 위치
     - 웹브라우저 내부 영역을 기준으로 한 마우스 커서의 X, Y 좌표 값이다.
       (문서의 스크롤 값이 계산되지 않는다.)
  

  mouseEvent.clientX
  mouseEvent.clientY​

  2. 문서를 기준으로 하는 전역 위치
     - 문서를 기준으로 한 마우스 커서의 X, Y 좌표 값이다.
       (문서의 스크롤 값이 적용된 값이다.)
  

  mouseEvent.pageX 
  mouseEvent.pageY​

• 클릭한 지역 위치 구하기
  - 클릭한 지역 위치란 클릭한 대상을 기준으로 하는 마우스 커서 위치를 의미한다.
  

   var offsetX = e.pageX - $(타깃).offset().left;
    var offsetX = e.pageYX - $(타깃).offset().top;​