HACOSA jQuery STUDY#6. 영역 (DIMENSIONS)

Window 와 Document 의 영역 알아내기• 윈도우나 문서의 너비와 높이를 픽셀 값으로 얻기

‒ Window 너비 / 높이→ $(window).width() / $(window).height()

‒ Document 너비 / 높이→$(document).width() / $(document).height()

Window 와 Document 의 영역 알아내기• 윈도우나 문서의 너비와 높이를 픽셀 값으로 얻기

‒ Test case 1→body{width:800px} 을 주었을 경우

Window 와 Document 의 영역 알아내기• 윈도우나 문서의 너비와 높이를 픽셀 값으로 얻기

‒ Test case 2→body{width:800px;height:3000px} 을 주었을 경우

Window 와 Document 의 영역 알아내기• 윈도우나 문서의 너비와 높이를 픽셀 값으로 얻기

‒ Test case 2→body{width:3000px;height:3000px} 을 주었을 경우

Window 와 Document 의 영역 알아내기• 앞선 세 가지 케이스에 대한 테스트 결과로 유추해 볼 수 있는 Window, Document, Body 의 Width, Height 관계 (tested on Chrome)

‒ Window Width(Height) > Body Width(Height) 경우→ Document Width(Height) 는 Window 의 것을 따름 .→ Body Width(Height) 는 CSS 정의 혹은 컨텐츠에 따라 변함

‒ Body Width(Height) > Window Width(Height)→ Document Width(Height) 는 Body 의 것을 따름 .

‒ 즉 , Document 의 Width, Height 값의 default 는 Window 의 것을 따르나 ,Body 가 window 의 Width(Height) 를 넘어설 경우 Document 의 Width(Height) 는 Body 에 따라 가변함

요소의 영역 찾기• $().innerWidth

‒ padding + Width

• $().innerHeight‒ padding + Height

• $().outerWidth‒ border + padding + Width

• $().outerHeight‒ border + padding + Height

요소의 영역 찾기• div#elem{

width:300px; height:100px; margin:30px; padding:30px; border:10px solid #CCC; background:#F00; outline:10px Solid #00F;}

• Chrome, IE8 모두 동일한 값

요소의 영역 찾기• IE8 쿽스 모드에서 출력 값

‒ IE 쿽스모드 렌더링의 값을그대로 따름

요소의 영역 찾기• 앞선 두가지 케이스에 따르면 완전히 W3C 의 Box modeling

을 따르지 않고 , 브라우저의 해석 ( 렌더링 ) 에 따라 계산하여 값을 내어 줌을 알 수 있다 .

• outerline 또한 outerWidth, outerHeight 에 영향을 주지 않음

요소의 오프셋 (Offset) 알아내기• offset

‒ 문서 좌측상단에서 요소의좌측 상단에 대한 상대위치를포함하는 개체 반환

• position‒ 요소의 첫번째 부모 (offsetParent) 로

부터 요소의 상대위치를 포함하는 개체 반환

• offsetParent‒ 요소의 offssetParent 포함하는 개체 반환

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px}div#child{ background:#DFDFDF; width:100px; height:100px;}

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px; position:relative}div#child{ background:#DFDFDF; width:100px; height:100px;}

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px; position:relative}div#child{ background:#DFDFDF; width:100px; height:100px; margin:25px 30px}

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px; position:relative}div#child{ background:#DFDFDF; width:100px; height:100px; margin:25px 30px}

On IE 쿽스모드

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px; position:absolute; top:10px; left:10px}div#child{ background:#DFDFDF; width:100px; height:100px; margin:25px 30px}

요소의 오프셋 (Offset) 알아내기<div id="parent"> <div id="child"> </div></div>

div#parent{ background:#CCC; width:200px; height:150px; padding:50px; position:relative}div#child{ background:#DFDFDF; width:100px; height:100px; margin:25px auto}

요소가 보이도록 스크롤하기• 현재 보여지는 윈도우 바깥쪽에 있는 요소를 보이도록 하기

위하여 문서를 스크롤‒ 1. position 메서드를 사용하여 대상요소의 상대적 위치 가져오기‒ 2. 그 위치 값에 현재 스크롤 위치를 더함‒ 3. 2 에서 구해진 위치 값을 scrollTop 메서드를 사용하여 스크롤‒ 4. 단 , 이를 위해서는 스크롤 컨테이너가 position : relative, abso-

lute, fixed 를 사용하여 위치되어야 함

$(“bar”).click(function()({ var $foo = $(“foo”); var lastParagraphPosition = $(“foo p:last”).position(); // 대상요소의 상대적 위치 가져오기 var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top; // 그 위치값에 현재 스크롤 위치 더함 $foo.scrollTop(scrollPosition); // scrollTop 메서드로 스크롤}

요소가 표시영역안에 있는지 알아내기• 해당 요소가 표시영역 (viewport) 안에서 보여지는지 확인하여

스크롤‒ 1. 표시영역의 크기 결정‒ 2. 문서의 스크롤 위치 결정‒ 3. 요소가 보인다면 요소의 위쪽과 왼쪽 위치에 대한 최대 , 최소값 계산‒ 4. 이런 값들을 기반으로 요소의 위치 검사

• 예제는 교재 참고‒ 단 , 예제처럼 복잡한 코드 말고… 플러그인으로 사용하면 매우 간단하고

편리하게 작성할 수 있다

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

• 표시영역 안에서 요소를 가운데로 정렬하기 위해 윈도우를 스크롤‒ 1. 표시 영역의 영역을 얻음‒ 2. 요소의 너비 , 높이 , 오프셋을 얻음‒ 3. 표시영역에서 요소를 가운데로 오게 하기 위해 간단한 수식 사용

$foo = $(“#foo”),elWidth = $foo.width(),elHeight = $foo.height(),elOffset = $foo.offset();

$(window).scrollTop(elOffset.top + (elHeight/2) – (viewportHeight/2)).scrollLeft(elOffset.left + (elWidth/2) – (viewportWidth/2));

현재 위치에서 요소를 절대적으로 위치시키기

• 요소의 위치를 얻은 후 CSS 속성을 설정var $myEl = $(“#foo p”).eq(0),elPosition = $myEl.position();

$myEl.css({ position : ‘absolute’, top : elPosition.top, left : elPosition.left;});

또 다른 요소에 상대적으로 요소를 위치시키기

• 이미 존재하는 요소의 너비 , 높이 , 오프셋을 얻은 후 적절히 사용‒ 기존 요소의 형제요소로 위치 시키는 예제

‒ 그런데… 아래와 같이 되어야 하지 않을런지… . ;;;;; 위 코드로는 기존 요소의 높이가 10 이상이 되면 겹침현상이 발생 되게 될텐데… ..

var $foo = $(#foo),fooPosition = $foo.position(),$tooltip = $(‘<div id=“tooltip”> 새 요소 </div>’).insertAfter($foo);// 새 요소를 추가하고 ,// CSS 설정$tooltip.css({ position : ‘absolute’, top : fooPosition.top + 10, left : fooPosition.left + 10, width : $foo.width() - 20});

$tooltip.css({ position : ‘absolute’, top : fooPosition.top + $foo.height() + 10, left : fooPosition.left + 10, width : $foo.width() - 20});

브라우저의 너비에 따라 스타일시트 바꾸기

• 브라우저의 너비에 따라 문서의 CSS 변경‒ 1. Body 요소의 클래스 변경

‒ 2. 크기가 관계된 스타일시트의 href 어트리뷰트 변경

→단 , 이 방식의 경우 새로운 CSS 파일을 서버로 요청하기 때문에 스타일 변경까지 지연시간이 발생되기 때문에 선호하지 않는 방법

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

<link rel=“stylesheet” type=“text/css” id=“css_size” href=“size-small.css” />

var setSize = function(size){ var $css = $(“#css_size”); $css.attr(‘href’, ‘size-’ + size + ‘.css’);}

브라우저의 너비에 따라 스타일시트 바꾸기

• 브라우저의 너비에 따라 문서의 CSS 변경‒ 3. 페이지에 크기에 관계된 모든 스타일시트를 포함하지만 한번에 오직

하나만 사용하게 함<link rel=“stylesheet” type=“text/css” id=“css_size small” href=“size-small.css” /><link rel=“alternate stylesheet” type=“text/css” id=“css_size large” href=“size-large.css” disabled=true />

var setSize = function(size){ $(‘link.css_size’).each(function(){ var $this = $(this); if($this.hasClass(size)){ $this.removeAttr(‘disabled’) .attr(‘rel’, ‘stylesheet’); }else{ $this.attr(‘disabled’, true) .attr(‘rel’, ‘alternate stylesheet’) } }}

END