position() 메서드는 선택자 요소의 첫 번째 위치에 있는 부모 요소의 왼쪽 모서리(left-top) 위치를
포함하는 left/top 개체를 반환한다.
이 position() 메서드가 어떤 이유로 위치 값을 가져오는지 알아보자.
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style type="text/css">
html,body{
margin: 0px;
}
#A-1{
width: 100px;
height: 100px;
background-color: red;
}
#B-1{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var $A = $('#A-1');
var $B = $('#B-1');
var APosition = $A.position();
var BPosition = $B.position();
});
</script>
</head>
<body>
<div id="A-1">
<div id="B-1"></div>
</div>
</body>
</html>
위 코드를 보면 div 태그를 2개를 만들었고, A-1 태그 안에 B-1 태그를 넣어서 만들었다.
위치 값을 헷갈리지 않게 하기 위해 기본 body 태그의 margin 값이 8인데 0으로 설정을 해놨고,
알아보기 쉽게 하기 위해
A-1 태그는 width/height 값이 100
B-1 태그는 width/height 값이 50
이렇게 설정을 해놨다. 이제 B-1 태그와 A-1 태그에 각각 임의의 margin 값을 넣어서 위치 값이 어떻게
변경이 되는지 테스트를 진행할 건데
첫 번째로 A-1 태그에 margin 값 50을 주고, 그다음 B-1 태그에 margin 값 50을 줄 것이다.
그리고 position() 메서드를 이용하여 위치 값을 확인해 보겠다.
A-1 태그 마진 값 50 적용
적용 후에 A-1 태그의 position() 메서드를 이용하여 값이 어떻게 찍히는지 보면
console.log(APosition); // {top:0, Left:0}top/Left 값이 전부 0으로 찍혀 나온다. 그 이유는 A-1 태그의 부모 태그는 body태그인데 부모 태그인
body태그의 왼쪽 모서리(Left-top)로부터 위치점을 반환받는 건데,
A-1 태그는 위치상으론 변함이 없고 단지 마진 값 top/left 에만 50이 정해진 것뿐이다.
그래서 APosition 의 position() 값은? {top : 0, Left:0} 이 나오는 것이다.
이제 원상 복구시키고 B-1 태그에다가 마진 값 50을 적용해보자.
B-1 태그 마진 값 50 적용
결과 화면을 보면 B-1 태그에 마진 값을 50을 적용하였다.
그리고 position() 메서드로 A-1 태그의 위치 값을 찍어보면
console.log(APosition); // {top:50, Left:0}이렇게 찍혀서 나온다.
그 이유는 A-1 태그는 현재 위치점은 top/left 둘 다 0인데 자식 태그인 B-1 태그에서 마진 값을 50을 줬더니
A-1 태그 기준에서는 top의 위치가 B-1 태그의 마진 값 50의 위치로 이동되었다.
그래서 결과 화면에서 확인할 수 있듯이 B-1 태그의 마진 값이 50만큼 A-1 태그의 top 부분이 이동되어서
A-1 태그의 position() 메서드의 값은 A-1 태그 부모인 body 태그의 왼쪽 모서리(Left-top)로 부터 위치점 {top:50, Left:0} 이렇게 반환이 되는 것이다.
위 코드 가지고 직접 테스트를 진행해서 브라우저에서 F12 개발자 모드로 확인하면 B-1 태그의 마진 50만큼
A-1 태그의 top 부분이 이동되어 있는 부분을 확인해보면 마진 형태의 부분은 주황색으로 표현이 되고
아닌 부분은 표시가 안되는데
위 결과 화면에서도 볼 수 있듯이 B-1 태그의 마진 값 50의 위치가 A-1 태그의 top 위치에 적용되면서 A-1
태그 top 부분을 보면 흰색으로 아무런 마진 값이나 패딩 값이 적용이 안되어져 있는 걸 볼 수 있다.
결론적으로, A-1 태그의 position() 메서드로 위치 값을 가져올 땐 현재 선택자의 부모 요소의
왼쪽 모서리(Left-top)로부터의 위치점을 반환받기 때문에
부모(body태그)의 style 요소 값으로 인한 또는 B-1 태그처럼 자식 요소의 style 값이 변동으로 인한
A-1 태그의 요소의 position() 위치 값이 변동이 될 수 있다는 점을 알아야 한다.
자 마지막으로 요번엔 마진 값이 아닌 패딩 값을 부모 요소인 (body) 태그에다가 50을 적용시켜서 확인해보자.
body 태그에 패딩 값 50 적용
Body 태그에 패딩 값 50을 적용했다.
이 부분도 A-1 태그의 위치 값을 찍어보면
console.log(APosition); // {top:50, Left:50}
이번엔 top/left 둘 다 전부 50이 찍혀 나왔다. 이유는 Body 태그의 패딩 값이 50이니 A-1 태그가 부모 태그인
body 태그의 패딩 값 50 으로부터 A-1 태그가 위치되었다.
그래서 A-1 태그의 position() 메서드의 반환된 값은 부모인 body 태그의 왼쪽 모서리(Left-top)로 부터 위치점 {top:50, Left:50} 이 반환되는 것이다.
결론적으로 선택자의 position()의 값은 선택자의 바로 윗 부모 태그의 왼쪽 모서리(Left-top) 기준점으로 부터
위치점을 반환 받는다. 위 예제들은 마진 값/ 패딩 값으로 인한 자식 요소나 부모 요소에 의해서 위치 값이
바뀔 수 있다는 점을 예를 든 거고,
이번엔 다른 예제로 마지막 테스트를 해보자. A-1 태그의 CSS 값에 position을 relative로 주고 top/left 값을 설정하고, B-1 태그의 위치 값을 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>A - 페이지</title>
<style type="text/css">
body{
margin: 0px;
}
#A-1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 200px;
left: 100px;
}
#B-1{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
console.log($('#B-1').position());
});
</script>
</head>
<body>
<div id="A-1">
<div id="B-1"></div>
</div>
</body>
</html>
이 코드의 결과 화면을 보면
A-1 태그는 relative 속성으로 top/left의 위치를 설정해놓은 상태인데 그래서 top으로부터 200px left로부터 100px 이 떨어져서 A-1 태그가 나타났다.
B-1 태그를 보면 A-1 태그가 부모 태그인데 B-1 태그 즉, $('#B-1'). position()의 값을 console.log로
찍어보면 {top:0, Left:0} 이렇게 찍힌다.
이 상황을 설명하자면 A-1 태그의 부모 태그인 Body 태그로부터 Top의 200px 만큼 떨어져 있고,
Left의 100px 만큼 떨어져 있지만,
B-1 태그는 A-1 태그인 부모 태그로부터의 위치점은 변동되지 않은 top에서 0과 left에서 0이기 때문에
{top:0, Left:0} 이렇게 찍혀서 나온 것.
결론적으로 postion() 메서드는 현재 선택자의 요소의 부모 요소의 좌측 상단의 기준점으로부터 위치점을
반환받기 때문에 그렇다.
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - p 태그로 구분되어진 문단을 버튼으로 스크롤하기 (0) | 2022.04.12 |
|---|---|
| jQuery - offset() 메서드 사용법 (0) | 2022.03.25 |
| jQuery - 태그요소의 width/height/innerWidth/innerHeight/outerWidth/outerHeight/ 완전 100% 이해 (0) | 2022.03.23 |
| jQuery - checked 어트리뷰트에 추가 플러그인 만들기 (toggle 기능) (0) | 2022.03.22 |
| jQuery - 배열, 객체의 데이터 값으로 태그 리스트 만들기 (0) | 2022.03.22 |