Hacosa j query 6th
-
Upload
seong-bong-ji -
Category
Education
-
view
424 -
download
5
description
Transcript of Hacosa j query 6th
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