요소의 위치 및 크기 관련 기능

01_ 요소의 위치 및 크기 관련 속성 소개

지금까지 html요소의 위치와 크기를 구하기 위해 다음과 같은 구문을 사용했다.

$대상.css("left");
$대상.css("width");

하지만 이 값들은 모두 단위를 포함한 문자열 정보이기 때문에 현재 위치에서 50만큼을 이동을 한다거나 현재 크기를 100만큼 키우는 처리를 하기 위해서는 다음과 같이 형변환을 해야만 한다.

$대상.css("left", (parseInt($대상.css("left"))+50+"px");
$대상.css("left", (parseInt($대상.css("width"))+100+"px");

만약 html 요소의 위치 값과 크기 값을 문자가 아닌 숫자 값으로 얻을 수 있느면 좀더 편하게 작업할 수 있다. 이때 자바스크립트 DOM은 HTML요소의 위치 및 크기를 숫자 값으로 구할 수 있는 전용 프로퍼티와 메서드를 제공한다. 그리고 JQuery에서는 이를 좀 더 쉽게 구하거나 설정할 수 있는 기능을 제공한다. 

바로 position() 기능인데 이걸 이요하면 코드를 좀더 깔끔히 만들 수 있다. 

 

02_부모 좌표 노드 구하기

$대상.offsetParent()

 

여기서 부모 좌표 노드란 특정 노드의 기준 좌표가 되는 노드를 말한다. 이에 따라 자식 노드의 위치는 부모 좌표 노드에 영향을 받게 된다. 

일반 프로그래밍에서의 좌표와 자바스크립트 좌표는 대부분 비슷하지만 좌표의 기준이 되는 부모 좌표 노드를 찾는 방법은 완전히 다르다. 

 

02_01 일반 프로그래밍에서의 부모 좌표 노드

일반 프로그래밍의 경우 대부분 노드를 감싸고 있는 노드가 부모가 되며 이 부모를 기준으로 위치를 잡게 된다. 그리고 부모의 위치가 움직이면 내부에 들어 있는 자식 요소 역시 같이 움직이게 된다. 

예를 들어 다음과 같은 경우 child의 부모 좌표 노드는 #parent2이 되고 #parent2의 부모 좌표 노드는 #parent1이 된다.

 

<div id="parent">
	<div id="parent2">
    	<div id="child">
        </div>
    </div>
</div>

02_02 자바스크립트 DOM에서 부모 좌표 노드

일반 프로그래밍과는 달리 자바스크립트 DOM에서는 position속성값이 absolute 또는 relative로 설정된 조상 노드 중 가장 근접한 노드가 부모 좌표 노드가 된다. 

 

03_지역(부모 노드 기준)좌표 위치 구하기

지역 위치란, 부모 좌표 노드의 leftL0, top:0 위치를 시작점으로 하는 위치 값을 의미한다. 

 

03_1 지역 위치 구하기

$대상.position().left
$대상.position().top

03_2 지역 위치 설정하기

$대상.css("left 또는 top", 값)
$대상.css({
	left:값,
    	top:값
    })

 

부모 좌표 노드를 기준으로 요소의 위치 설정을 위한 전용 메서드는 없으며 일반 스타일 설정을 위해 사용하는 css() 메서드를 사용한다. 위치 값은 숫자 또는 문자열 모두 가능하며 숫자 값으로 하는 경우 jQuery 내부에서 자동으로 기본 단위인 "px"를 붙여 처리한다.

 

04 전역 좌표 위치 다루기

전역 좌표란, 최상위 노드인 문서(document)의 left:0, top:0 위치를 시작점으로 하는 위치 값을 의미한다. 여기서 주의 해야할 점은 윈도우 영역과 문서 영역의 크기가 동일한 경우 종종 윈도우 객체를 시작 위치로 생각하는 경우가 있다. 또한, 문서 영역이 윈도우 영역보다 큰 경우 문서 영역이 좌표로 사용될 수도 있다.

 

04_1 전역 위치 값 구하기

$대상.offset().left
$대상.offset().top

 

최상위 노드인 문서(Document)를 기준으로 하는 전역 좌표를 구하고 싶을 때는 jQuery에서 제공하는  offset 메서드를 이용한다. 

04_2 전역 위치 설정하기

 

$대상.offset({ left:좌표값, top:좌표값 })

※클릭한 마우스의 전역 위치 값 구하기

x 위치 값 ;  event.pageX

y 위치 값 ; event.pageY

 

 

05 요소의 크기 다루기

05_1 요소의 크기 구하기

요소 위치와는 달리 요소의 크기는 기본 크기에 padding + scrollbar + border +margin 영역이 조합된 크기까지 매우 다양하다. 총 네 가지 경우가 있다. 

1. 기본 크기 구하기
$대상.width()
$대상.height()

2. 기본 크기 + padding 영역이 포함된 크기 구하기
$대상.innerWidth()
$대상.innerHeight()

3. 기본 크기 + padding + border 영역이 포함된 크기 구하기
$대상.outerWidth()
$대상.outerHeight()

4. 기본 크기 + padding + border + margin영역이 포함된 크기 구하기
$대상.outerWidth(true)
$대상.outerHeight(true)

05_2 요소의 크기 변경하기

jQuery에서는 요소 크기를 변경하는 방법은 다음과 같이 두 가지 방법이 있다. 

1.기본 크기 변경하기
$대상.width(value)
$대상.height(value)

요소의 크기를 변경하고 싶을 때, width와 height메서드를 이용한다. 

2.기본 크기+ padding 크기 변경하기
$대상.innerWidth(value)
$대상.innerHeight(value)

06 요소 스크롤 위치 다루기 

부모요소보다 큰 자식요소를 포함한 상태에서 부모 요소에 overflow 속성값으로 hidden이나 scroll을 주면 다음과 같이 부모요소에 스크롤 기능이 활성화 된다. 

06_1 스크롤 위치 구하기 

$대상.scrollLeft()
$대상.scrollTop()

 

jQuery의 scrollLeft()와 scrollTop() 메서드를 이용하면 스크롤 위치 값을 구할 수 있다. 

 

06_2 스크롤 위치 설정하기

$대상.scrollLeft(위치값)
$대상.scrollTop(위치값)