jQuery 요소의영역

요소의 크기

제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공합니다.

 

inner와 outer

제이쿼리에서 요소의 크기는 다음과 같이 구성됩니다.

 

접두사로 inner가 붙은 메소드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환합니다.

 

접두사로 outer가 붙은 메소드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환합니다.

 

또한, 접두사로 outer가 붙은 메소드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환합니다.

 

.width()와 .height() 메소드

.width() 메소드는 선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 전달된 값으로 설정합니다.

 

.height() 메소드는 .width() 메소드와 같은 동작을 높이에 대해 실행합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var str = "이 div 요소의 ";

 

str += "너비는 " + $("#divBox").width() + "픽셀이고,<br>"; // id가 "divBox"인 요소의 너비를 반환함.

 

str += "높이는 " + $("#divBox").height() + "픽셀입니다." // id가 "divBox"인 요소의 높이를 반환함.

 

$("#text").html(str);

 

});

 

});

 

이 메소드들을 이용하면 브라우저의 뷰포트(viewport)나 HTML 문서의 크기도 알아낼 수 있습니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var str = "";

 

str += "브라우저 뷰포트의 크기는 " + $(window).width() + "X" + $(window).height() + "입니다.<br>";

 

str += "HTML 문서의 크기는 " + $(document).width() + "X" + $(document).height() + "입니다.";

 

$("#text").html(str);

 

});

 

});

 

.width()와 .height() 메소드가 호출될 때 인수를 전달받으면, 선택된 요소의 크기를 인수로 전달받은 값으로 설정합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#divBox").width("400"); // id가 "divBox"인 요소의 너비를 설정함.

 

$("#divBox").height("200"); // id가 "divBox"인 요소의 높이를 설정함.

 

});

 

});

 

다양한 크기 정보를 반환하는 메소드

다음 예제는 위에서 살펴본 크기 정보를 반환하는 다양한 메소드 사이의 차이점을 확인하는 예제입니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var str = "이 div 요소의 ";

 

// id가 "divBox"인 요소의 크기를 반환함.

 

str += "크기는 " + $("#divBox").width() + "X" + $("#divBox").height() + "이고,<br>";

 

// id가 "divBox"인 요소의 패딩 영역을 포함한 크기를 반환함.

 

str += "패딩 영역을 포함한 크기는 " + $("#divBox").innerWidth() +

 

"X" + $("#divBox").innerHeight() + "이고,<br>";

 

// id가 "divBox"인 요소의 패딩 영역과 테두리를 포함한 크기를 반환함.

 

str += "테두리까지 포함한 크기는 " + $("#divBox").outerWidth() +

 

"X" + $("#divBox").outerHeight() + "이고,<br>";

 

// id가 "divBox"인 요소의 패딩 영역과 테두리, 마진 영역까지 포함한 크기를 반환함.

 

str += "마진 영역까지 포함한 크기는 " + $("#divBox").outerWidth(true) +

 

"X" + $("#divBox").outerHeight(true) + "입니다.";

 

$("#text").html(str);

 

});

 

});

 

요소의 위치

제이쿼리는 선택한 요소의 위치 정보를 손쉽게 얻을 수 있도록 다양한 메소드를 제공합니다.

 

.offset() 메소드와 .position() 메소드

.offset() 메소드는 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var paraPosition = $("#para").offset(); // id가 "para"인 요소의 위치 정보를 저장함.

 

var str = "p 요소의 위치는 ";

 

str += "left가 " + paraPosition.left + "픽셀이고,<br>"; // id가 "para"인 요소의 left 위치를 반환함.

 

str += "top은 " + paraPosition.top + "픽셀입니다."; // id가 "para"인 요소의 top 위치를 반환함.

 

$("#text").html(str);

 

});

 

});

 

또한, .offset() 메소드가 호출될 때 인수를 전달받으면, 선택한 요소의 위치를 인수로 전달받은 값으로 설정합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#para").offset({ top: 200, left: 100 }); // id가 "para"인 요소의 위치를 설정함.

 

var paraPosition = $("#para").offset(); // id가 "para"인 요소의 위치 정보를 저장함.

 

var str = "p 요소의 위치는 ";

 

str += "left가 " + paraPosition.left + "픽셀이고,<br>"; // id가 "para"인 요소의 left 위치를 반환함.

 

str += "top은 " + paraPosition.top + "픽셀입니다."; // id가 "para"인 요소의 top 위치를 반환함.

 

$("#text").html(str);

 

});

 

});

 

.position() 메소드는 .offset() 메소드와는 달리, 선택한 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소(offset parent)를 기준으로 하는 상대 위치를 반환합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var str = "";

 

var offsetPosition = $("#para").offset(); // offset() 메소드를 사용해 id가 "para"인 요소의 위치 정보

 

str += "offset() 메소드를 사용해 구한 p 요소의 위치는<br>";

 

str += "left가 " + offsetPosition.left + "픽셀이고, "; // id가 "para"인 요소의 left 위치를 반환함.

 

str += "top은 " + offsetPosition.top + "픽셀입니다.<br>"; // id가 "para"인 요소의 top 위치를 반환함.

 

var posPosition = $("#para").position(); // position() 메소드를 사용해 id가 "para"인 요소의 위치 정보

 

str += "position() 메소드를 사용해 구한 p 요소의 위치는<br>";

 

str += "left가 " + posPosition.left + "픽셀이고, "; // id가 "para"인 요소의 left 위치를 반환함.

 

str += "top은 " + posPosition.top + "픽셀입니다."; // id가 "para"인 요소의 top 위치를 반환함.

 

$("#text").html(str);

 

});

 

});

 

.offset() 메소드와 .position() 메소드의 차이점은 다음과 같습니다.

.offset() 메소드 HTML 문서(HTML document)를 기준으로 함.

.position() 메소드 선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.

 

기준이 되는 조상 요소

.position() 메소드에서 기준으로 사용되는 부모 요소는 .offsetParent() 메소드를 사용하여 확인할 수 있습니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

// id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.

 

$("#para").offsetParent()

 

.css("border", "1px solid red"); // 해당 요소의 CSS 스타일을 변경함.

 

});

 

});

 

위의 예제에서 아이디가 "para"인 요소를 웹 페이지에 위치시킬 때 기준이 되는 부모 요소는 position 속성값이 relative로 설정된 <ul>요소입니다.

 

이렇게 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준이 될 수 있습니다.

 

 

 

만약 위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준으로 삼게 됩니다.

 

.scrollLeft() 메소드와 .scrollTop() 메소드

.scrollLeft() 메소드는 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 현재 위치를 얻거나, 해당 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정합니다.

 

또한, .scrollTop() 메소드는 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 현재 위치를 얻거나, 해당 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정합니다.

 

 

 

다음 예제는 아이디가 divBox인 요소의 수평 스크롤 바와 수직 스크롤 바의 현재 위치를 출력하는 예제입니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

// id가 "divBox"인 요소의 수평 스크롤 바의 현재 위치를 반환함.

 

var str = "수평 스크롤 바의 현재 위치는 left 방향으로 " + $("#divBox").scrollLeft() + "픽셀이고,<br>";

 

// id가 "divBox"인 요소의 수직 스크롤 바의 현재 위치를 반환함.

 

str += "수직 스크롤 바의 현재 위치는 top 방향으로 " + $("#divBox").scrollTop() + "픽셀입니다.";

 

$("#text").html(str);

 

});

 

});

 

다음 예제는 아이디가 divBox인 요소의 수평 스크롤 바와 수직 스크롤 바의 위치를 직접 설정하는 예제입니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#divBox").scrollLeft(70); // id가 "divBox"인 요소의 수평 스크롤 바의 위치를 설정함.

 

$("#divBox").scrollTop(200); // id가 "divBox"인 요소의 수직 스크롤 바의 위치를 설정함.

 

 

 

// id가 "divBox"인 요소의 수평 스크롤 바의 현재 위치를 반환함.

 

var str = "수평 스크롤 바의 현재 위치는 left 방향으로 " + $("#divBox").scrollLeft() + "픽셀이고,<br>";

 

// id가 "divBox"인 요소의 수직 스크롤 바의 현재 위치를 반환함.

 

str += "수직 스크롤 바의 현재 위치는 top 방향으로 " + $("#divBox").scrollTop() + "픽셀입니다.";

 

$("#text").html(str);

 

});

 

});