[javascript-jQuery] 절대좌표 및 상대좌표 확인 및 이동하기, Offset(), Position()
본문
# 절대좌표, 상대좌표(절대위치 및 상대위치) 필요한 경우는?
모바일 및 태블릿 사용환경을 고려한 반응형 웹사이트 구현할 경우 브라우저의 크기에 따라 레이아웃이 바뀌는 경우가 많습니다. 이런 경우 콘테츠의 크기가 변경하거나 위치가 바뀔 수도 있습니다. 또한 단순하게 위치가 변경된 것이 아닌 경우 엘리먼트의 현재 위치를 이동하거나 어느 정도의 위치조정이 필요하겠죠. 이 경우 좌우 상하 값은 어떻게 결정해야 할까요? 좌우상하 좌표값이 필요합니다.
가장 쉽게 볼 수 있는 예로 움직이지 않고 고정되어 붙어있는 스티키 네비게이션(sticky nav)을 구현할 경우도 이에 해당합니다... 반응형 또는 모바일 환경에서 하단 또는 특정 위치에 고정된 값을 가지며 따라 다니는 것들을 구현하기 위하여 좌표값이 필요합니다. 그럼 해당 위치값을 알거나 또는 이동할 수 있는 함수에 대해 자세히 알아보겠습니다.
# 요소를 절대좌표 및 상대좌표로 이동하는 함수
절대좌표는 브라우저 창을 기준하거나 문서 전체를 기준으로 나타내는 좌표값을 나타내고 이와 달리 상대위치는 해당 엘리먼트의 부모 영역을 기준으로 상대적인 좌표를 반환하게 됩니다. 이때 사용되는 함수가 offset()이며 offset()함수는 단순히 현재 위치를 보여주는 것 뿐만 아니라 절대좌표를 기준으로 원하는 위치로 이동하는 것 역시 가능합니다.
! 절대좌표 확인 및 이동함수 : offset()아래 예제는 test 이름의 아이디를 가진 요소의 위치값을 제이쿼리로 얻어내는 예제입니다. 먼저 html 코드입니다.
<div id="test"></div>
</body>
아래는 해당 요소의 위치를 알아내는 방법입니다.
// 아이디가 test인 요소를 변수에 test에 할당
test.offset().top;
// 상단을 기준으로 test 엘리먼트 요소가 위치한 거리를 절대좌표로 반환
test.offset().left;
// 좌측을 기준으로 test 엘리먼트 요소가 위치한 거리를 절대좌표로 반환
그렇다면 해당 요소를 이동하게 하려면 어떻게 할까요? 매개변수에 옵션을 추가하여 이동시킵니다.
// 절대좌표를 기준으로 위에서 400px에 해당하는 좌표로 이동시킴
test.offset({left: 400});
// 절대좌표를 기준으로 좌측에서 400px에 해당하는 좌표로 이동시킴
test.offset({top: 100, left: 200});
// 절대좌표를 기준으로 위에서 100px 그리고 좌측에서 200px에 해당하는 좌표로 이동시킴
참고로 offset()함수는 요소를 해당위치로 순간적으로 이동시킬 수 있을뿐 서서히 이동하게 해주는 애니메이션 효과는 없습니다. 만약, 이를 구현하길 원한다면 제이쿼리의 animate() 함수를 사용해 보세요. 간단하게 동적인 효과를 부여할 수 있답니다. 이 방법 외에도 CSS3의 transition을 사용하는 방법 역시 좋은 방법입니다.
animate() 함수에 대하여 알아보기 >
http://webisfree.com/2014-09-23/[jquery]-제이쿼리를-이용해-요소를-상대-또는-절대좌표-서서히-이동-animate()
! 상대적인 좌표위치 확인함수, position()부모 요소의 위치를 기준으로 값을 얻는 상대좌표(상대위치)를 사용한 방법입니다. 아래 예제를 봐주세요.
<div id="test"></div>
</body>
아래는 스크립트 코드입니다.
// 부모 요소의 상단값을 기준으로 test 엘리먼트 요소가 위치한 상대적 거리값
test.position().left;
// 부모 요소의 좌측값을 기준으로 test 엘리먼트 요소가 위치한 상대적 거리값
댓글목록 0