Dimensions

From. jQuery CookBook 06 Dimensions

영역(Dimensions)은 웹사이트에 향상된 동작(behavior)을 추가하는 데 있어 중요한 역할을 한다. 여러분이 페이지 상에서 요소의 위치와 영역을 조작하는 방법을 알게 된다면 완전히 새로운 방식으로 사용자 인터페이스를 제어할 수 있게 될 것이며, 어플리케이션에서 데스크톱과 같이 상호작용하는 기능들을 제고할 수 있을 것이다.

1. Window와 Document 의 영역 알아내기

문제점

윈도우나 문서의 너비와 높이를 픽셀 값으로 얻기를 원한다.

해결 방법

jQuery의 width와 height 메서드는 윈도우와 문서의 기본 영역에 쉽게 접근할 수 있도록 한다.

논의

윈도우의 너비 및 높이는 문서의 너비 및 높이와 다를 수 있다는 것을 이해해야 한다. 윈도우의 영역은 현재 표시되는 영역의 크기를 말한다. 즉, 브라우저에서 문서를 표시할 수있는 부분을 말하는 것이다. 반면, 문서의 영역은 문서 자체의 크기를 말한다. 대부분의 경우 문서의 높이는 윈도우의 높이보다 클 것이다. 문서의 너비는 일반적으로 윈도우의 너미와 같겠지만, 간혹 위도우의 너비보다 클 수도 있다. 상기의 그림은 jQuery('body').width() < jQuery(document).width() 이며, jQuery(document).width() == jQuery(window).width()인 경우이다. 만약 body가 위도우보다 넓다면 문서의 너비는 그에 따라 서 증가할 것이다.

또한 width 와 height 메서드를 사용하여 요소의 영역을 설정하고 싶다면 인자값을 지정하면 된다. 인자값은 정수값(이는 픽셀 크기로 해설될 것이다.) 또는 문자열로 제공될 수 있다. 문자열로 제공하면 그는 CSS 방식의 크기로 해석될 것이다.(예, $('#foo').width('300px')).




2. 요소의 영역 찾기

문제점

여러분은 요소가 차지하고 있는 공간을 측정하고자 한다.

해결방법

width 메서드와 height 메서드는 어떤 요소에나 적용될 수 있고 요소의 계산된 너비나 높이를 알아내는 데 유용하다. 그렇지만 이 메서드는 화면상에서 요소가 차지하는 실제 크기를 알아내고자 하는 경우에는 약간의 부족함이 있다. 그렇기에, jQuery는 width나 height에 더하여 요소의 특수한 영역을 알아내는데 사용할 수있는 다음과 같은 메서드도 제공하고 있다.

  • innerWidth
    innerWidth
    border를 제외하고 padding을 포함하는 너비를 반환
  • innerHeight
    innerHeight
    border를 제외하고 padding을 포함하는 높이를 반환
  • outerWidth
    outerWidth
    border와 padding 모두를 포함하는 너비를 반환
  • outerHeight
    outerWidth
    border와 padding 모두를 포함하는 높이를 반환

다음의 HTML을 살펴보자:

Some text.


결과 보기