6장 영역 (Dimensions)

소개
- 페이지 상에서 요소의 위치와 영역을 조작하는 방법을 알아 보는 챕터

6.1 Window와 Document의 영역 알아내기
문제점
- 윈도우의 문서의 너비와 높이를 픽셀 값으로 얻기를 원함.

해결방법
- jQuery의 width와 height 메소드로 접근 함.

jQuery(document).ready(function() {
alert('Window height: ' + jQuery(window).height()); //화면상에 표시되는 영역의 높이를 반환
alert('Window width: ' + jQuery(window).width()); // 화면상에 표시되는 영역의 너비를 반환
alert('Document height: ' + jQuery(document).height()); //document 높이 반환
alert('Document width: ' + jQuery(document).width()); // document 너비 반환
});

논의
- 윈도우의 영역은 현재 표시되는 영역의 크기를 말한다 즉 브라우저에서 문서를 표시할 수 있는 부분
- 문서의 영역은 문서 자체의 크기를 나타낸다.
- 대부분의 경우 문서의 높이는 윈도우의 높이보다 크다.

6.2 요소의 영역 찾기
문제점
- 요소가 차지하고 있는 공간을 측정 할 때
해결 방법
- width 메서드와 height 메서드 만으로 너비나 높이를 구하기에는 약간의 부족한 점이 있다.

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

jQuery(document).ready(function() {
var $myDiv = jQuery('#myDiv');
var $results = jQuery('#results');

jQuery('<p>Computed width: ' + $myDiv.width() + '</p>')
  .appendTo($results); // 100
jQuery('<p>Computed height: ' + $myDiv.height() + '</p>')
  .appendTo($results); // 30
jQuery('<p>Inner width: ' + $myDiv.innerWidth() + '</p>')
  .appendTo($results); // 120
jQuery('<p>Inner height: ' + $myDiv.innerHeight() + '</p>')
  .appendTo($results); // 50
jQuery('<p>Outer width: ' + $myDiv.outerWidth() + '</p>')
  .appendTo($results); // 122
jQuery('<p>Outer height: ' + $myDiv.outerHeight() + '</p>')
  .appendTo($results); // 52

jQuery('<p>Document outer height: ' + jQuery(document).outerHeight() + '</p>')
  .appendTo($results); // NaN
jQuery('<p>Document inner height: ' + jQuery(document).innerHeight() + '</p>')
  .appendTo($results); // NaN
jQuery('<p>Window outer height: ' + jQuery(window).outerHeight() + '</p>')
  .appendTo($results); // NaN
jQuery('<p>Window inner height: ' + jQuery(window).innerHeight() + '</p>')
  .appendTo($results); // NaN
});

특징
- jQuery(document)와 jQuery(window) 개체에 대해 innerWidth, innerHeigh, outerWidth outerHeight를 사용하면
   Nan 값을 반환 함.

6.3 요소의 오프셋 알아내기
문제점
   - 문서에 있는 요소의 위치를 알아내고자 한다.
해결방법
   - jQuery는 요소의 위치를 측정하는데 3가지 메소드를 제공
  offset
    - 문서의 좌측상단에서 요소의 좌측상단에 대한 상대적인 위치를 포함하는 개체를 반환
   position
    - 요소의 첫 번째 부모 문서의 좌측상단에서 요소의 좌측상단에 대한 상대적인 위치를 포함 하는 개체를 반환
   offsetParent
    - 요소의 offsetParent를 포함하는 개체를 반환

<body>요소가 0픽셀의 margin과 10픽셀의 padding을 갖는 html이 있다.

<div id="bar">Some text inside #bar, which is inside #foo</div>
</div>

이 경우, 두요소는 같은 위치에 있고 둘가 같은 offsetParent(문서의 <body>요소)를 갖는다.

jQuery(document).ready(function() {
var $foo = jQuery('#foo');
var $bar = jQuery('#bar');

var $results = jQuery('#results');
var fooPosition = $foo.position();
var barPosition = $bar.position();
var fooOffset = $foo.offset();
var barOffset = $bar.offset();

var $fooOffsetParent = $foo.offsetParent();
var $barOffsetParent = $bar.offsetParent();

$results
  .append('<p>#foo position.top: ' + fooPosition.top + '</p>') // 10
  .append('<p>#foo position.left: ' + fooPosition.left + '</p>') // 10
  .append('<p>#bar position.top: ' + barPosition.top + '</p>') // 10
  .append('<p>#bar position.left: ' + barPosition.left + '</p>') // 10

  .append('<p>#foo offset.top: ' + fooOffset.top + '</p>') // 10
  .append('<p>#foo offset.left: ' + fooOffset.left + '</p>') // 10
  .append('<p>#bar offset.top: ' + barOffset.top + '</p>') // 10
  .append('<p>#bar offset.left: ' + barOffset.left + '</p>') // 10

  .append('<p>ID of #foo offsetParent: '  + $fooOffsetParent.attr('id')) // the_offset_parent
  .append('<p>ID of #bar offsetParent: '  + $barOffsetParent.attr('id')); // the_offset_parent
});

#foo 에 CSS를 사용한다면 #foo DIV는 실제로 이동하지 않고 그것의 offsetParent 또한 변하지 않는다.
#bar DIV 역시도 이동하지는 않지만 offsetParent가 변경되기 때문에 위치는 변경하게 된다.

<div id="bar">Some text inside #bar, which is inside the absolutely-positioned #foo</div>

</div>

</body>

6.4 요소가 보이도록 스크롤 하기
문제점
- 어떤 요소를 화면에 보이도록 하기 위해 문서나 요소를 스크롤해야 할 필요 가 있다.

대상 요소의 문서에 상대적인 위치를 알아내기 위해선 offset 메서드를 사용하고 scrollTop 메서드를 사용하여 대상 요소가 화면에 보이도록 문서를 스크롤 한다.

jQuery(document).ready(function() {
jQuery('#bar').click(function() {
     var fooOffset = jQuery('#foo').offset(),
          destination = fooOffset.top;
     jQuery(document).scrollTop(destination);
});
});

#bar 요소를 클릭했을 때 #foo 요소로 스크롤하려 한다.

<body>

<h1>Scrolling the Window to Bring an Element into View</h1>

<p>This is the first paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the second paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the third paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the fourth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the fifth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the seventh paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the eighth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the ninth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>This is the tenth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>

6.5 요소가 표시영역(Viewport) 안에 있는지 알아내기

문제점
- 요소가 표시영역 안에서 보여지는지 알기를 원할 때
1. 표시영역의 크기를 결정한다.
2. 문서의 스크롤 위치를 결정한다.
3. 요소가 보인다면 요소의 위쪽과 왼쪽 위치에 대한 최대, 최소값을 계산한다.
4. 이런 값을 기반으로 요소의 위치를 검사한다.

jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width(), //window 너비를 구함
  viewportHeight = jQuery(window).height(), //window 높이를 구함

   documentScrollTop = jQuery(document).scrollTop(), //document의 scrollTop 구함
  documentScrollLeft = jQuery(document).scrollLeft(), //document의 scrollLeft 구함

  minTop = documentScrollTop,
  maxTop = documentScrollTop + viewportHeight,  minLeft = documentScrollLeft,
  maxLeft = documentScrollLeft + viewportWidth,

  $myElement = jQuery('#myElement'),
  elementOffset = $myElement.offset();
if (
  (elementOffset.top > minTop && elementOffset.top < maxTop) &&
     (elementOffset.left > minLeft &&elementOffset.left < maxLeft)
) {
     alert('element is visible');
} else {
  alert('element is not visible');
}
});

//elementOffset.top 이 minTop 보다 크거나 elementOffset.top 보다 maxTop이 클때
즉 elementOffset.top의 값이 documentScroolTop(스크롤의 top 값의 값) 보다 클때 또는
요소의 탑값 보다 maxTop값이 더 클때
// elementOffset.left 가 minLeft보다 크거나 elementOffest.left 보다 maxLeft보다 클때

팁
- ariel Flesler 의 scrollTop 플러그인 (http://jquery-cookbook.com/go/plugin-scrollto) 은 이렇게 수많은 메서드를 작성할 필요 없이 $.scroolTo('#myElement')와 같이 간단히 작성할 수 있다.

6.6 표시영역(Viewport)안에서 요소를 가운데로 정렬하기

문제점
- 표시영역 안에서 요소를 가운데로 정렬하기 위해 윈도우를 스크롤할 필요가 있다.

해결방법
- 표시영역의 영역을 얻고 요소의 너비,높이, 오프셋을 알아낸다

jQuery(document).ready(function() {
jQuery('#bar').click(function() {
  var viewportWidth = jQuery(window).width(),
   viewportHeight = jQuery(window).height(),
   $foo = jQuery('#foo'),
   elWidth = $foo.width(),
   elHeight = $foo.height(),
   elOffset = $foo.offset();

  jQuery(window)
   .scrollTop(elOffset.top + (elHeight/2) - (viewportHeight/2))
   .scrollLeft(elOffset.left + (elWidth/2) - (viewportWidth/2));
});
});

가운데 지점을 알아내기 위해서 요소 높이의 절반 값에 요소의 top 오프셋을 더한 다음, 스크롤할 윈도우의 위치를 알아내기 위해서 표시영역의 절반 높이를 빼고 있다.

6.7 현재 위치에서 요소를 절대적으로 위치시키기
문제점
- 정적인 또는 상대적인 위치를 갖는 요소를 절대적인 위치를 갖도록 바꾸려고 함.
해결방법
- 요소의 위치를 얻은 다음 그 위치값을 사용해서 요소의 CSS 속성을 적절하게 설정 함.

jQuery(document).ready(function() {
jQuery('#bar').click(function() {
  var $myElement = jQuery('#foo p').eq(0),
  elPosition = $myElement.position();
  $myElement.css({
      position : 'absolute',
      top : elPosition.top,
      left : elPosition.left
  });
});

jQuery('#bam').click(function() {
  var $myElement = jQuery('#foo p').eq(1),
   elPosition = $myElement.position();
  $myElement.css({
      position : 'absolute',
      top : elPosition.top + 20,
      left : elPosition.left + 20
  });
});
});

<body>

<p style="color:red;">This is a static element that we will absolutely position.</p>

<p style="color:green;">This is a static element that we will absolutely position and move.</p>

<p>This is more text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>

6.9 브라우저의 너비에 따라 스타일시트 바꾸기
문제점
- 브라우저 너비에 따라 문서의 CSS를 바꾸고자 함.

해결방법
1. body 요소의 class 어트리뷰트를 변경하는 것
2. 바꾸고자 하는 스타일시트의 href 어트리뷰트를 변경하는것
3. 크기와 관련된 모든 스타일시트를 페이지에 포함시킨 다음 한번에 하나씩만 사용하는 것

어떤 방식을 사용하든 브라우저의 너비를 검사하는 함수를 만든다음 문서의 ready 이번트 및 윈도우의 resize 이벤트에 이 함수를 바인드 해야 한다.

해결방법 1 body요소의 클래스 변경하기

jQuery(document).ready(function() {
var checkWidth = function() {
     var browserWidth = $(window).width();
     if (browserWidth < 960) {
         setSize('small');
     } else {
         setSize('large');
     }
};

var setSize = function(size) {
     var $body = jQuery('body');
     jQuery('body').removeClass('large small').addClass(size);
};

jQuery(document).ready(function() {
     checkWidth();
     $(window).resize(checkWidth);
});
});

<p>This text will get bigger or smaller depending on the class applied to the body element.</p>

</body>

백두산슛돌이

6장 영역 (Dimensions)

티스토리툴바