Chapter 08. 위치/크기 관련 기능 다루기. Lesson 01. 요소의 위치 및 크기 관련 기능

Chapter 08. 위치/크기 관련 기능 다루기. 

Lesson 01. 요소의 위치 및 크기 관련 기능

핵심 01: 부모 좌표 노드 구하기

핵심 02: 지역 좌표 위치 구하기

핵심 03: 전역 좌표 위치 구하기

핵심 04: 요소 크기 다루기

핵심 05: 요소 스크롤 위치 다루기

핵심 01. 부모 좌표 노드 구하기

사용법 : $대상.offsetParent()

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

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

child의 부모 좌표 노드는 #parent2가 되고 

#parent2의 부모 좌표 노드는 #parent1이 됩니다.

2. 자바스크립트 DOM에서 부모 좌표 노드

일반 프로그래밍과 달리 자바스크립트 DOM에서는 position 속성값이 

absolute 또는 relative로 설정된 조상 노드 중 가장 근접한 노드가 부모 좌표 노드가 됩니다.

예제 02. #child의 좌표 기준이 되는 부모 좌표 노드의 id 값을 출력해 주세요

#parent1 
{
    position:absolute;
    width:300px;
    height:300px;
    left:100px;
    top:100px; 
    background-color: #ccc;
}
 
#parent2 
{
    margin:50px;
    background-color: #ff0;
    width:200px;
    height:200px;
}
 
 
#child 
{
    position:absolute;
    width:100px;
    height:100px;
    left:50px;
    top:100px;
    background-color:#f00;
}

<script>
    $(document).ready(function()
    {
        // 부모 좌표 노드 구하기
        var $parent = $("#child").offsetParent();
        // 부모의 id출력
        console.log("id = "+$parent.attr("id"));
    })  
</script>

실행결과

id = parent1

핵심 02: 지역(부모 노드 기준) 좌표 위치 구하기

- 지역위치란? 부모 좌표 노드의 left:0, top:0 위치를 시작점으로 하는 위치 값

아래 그림에서 #child 노드는 부모 좌표 노드인 #parent1의 left:0, top:0 위치에서부터 x축(left)으로는 50, y축(top)으로는 100만큼 떨어져 위치하고 있습니다.

#parent1 {
    position:absolute;
    width:300px;
    height:300px;
    left:100px;
    top:100px; 
    background-color: #ccc;
}
 
 
 
#child {
    position:absolute;
    width:100px;
    height:100px;
    left:50px;
    top:100px;
    background-color:#f00;
}

1. 지역 위치 구하기

사용법 : 

$대상.position().left

$대상.position().top

예제 03. 실행 화면처럼 클릭한 물고기의 지역 위치 값을 #info에 출력해 주세요

<script>
$(document).ready(function() 
{
    // #info 찾기
    var $info = $("#info");
    // .fish에 클릭 이벤트 등록
    $(".fish").click(function(e) 
    {
    // 클릭한 물고기 (좀더 쉽게 지역 위치를 알아내기 위해 클릭한 물고기 노드를 jQuery 객체로 만들어 줍니다.)
    $targetFish = $(this);
 
    // 위치 값 구하기
    var pos = $targetFish.position(); 
    // id,left,top 값 구하기
    var str = "id=" + $targetFish.attr("id") + ", left=" + pos.left + ", top=" + pos.top;
 
    // #info 노드에 정보를 문자열로 만들어 출력
    $info.html(str);
    });
})
</script>

2. 지역 위치 설정하기

사용법 : 

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

$대상.css({

left:값,

top:값

})

전용메서드는 없고 일반 스타일 설정을 위해 사용하는 css() 메서드를 사용합니다

예제 04. 정렬 버튼을 누르면 이미지를 다음 실행화면처럼 정렬되게 만들어 주세요. (단, 이미지 시작 위치는 left:50, top:50 입니다)

<script>
$(document).ready(function() 
{   
    $("#btnAlign").click(function(e) 
    {
        // 여기에 풀이를 입력해주세요.
        // 시작 위치를 50,50으로 하는 변수를 만들어 줍니다.
        var startX = 50;
        var startY = 50;
 
        // each() 메서드를 활용해 물고기 개수 만큼 루프 돌기
        $(".fish").each(function(index) 
        {
            // 현재루프에 대한 현재 물고기 위치 설정
            $(this).css(
            {
                left : startX,
                top : startY
            });
        // 다음 물고기 위치를 50만큼씩 위치 이동
        startX += 50;
        startY += 50;
        })
    });
})

핵심 03: 전역 좌표 위치 구하기

전역 좌표란? 최상위 노드 문서(document)의 left:0, top:0 위치를 시작점으로 하는 위치 값

아래 그림에서 #child 노드의 전역 좌표는 문서의 left:0, top:0 위치에서부터 x축(left)으로는 150, y축(top)으로는 200만큼 떨어져 위치하고 있습니다.

1. 전역 위치 값 구하기

사용법 : 

$대상.offset().left

$대상.offset().top

예제 05. 실행화면처럼 클릭한 물고기의 지역 위치 값과 전역 위치 값을 #info 영역에 출력해 주세요.

<script>
$(document).ready(function()
{
    // #info 구하기
    var $info = $("#info");
    //물고기에 클릭 이벤트 등록
    $(".fish").click(function(e)
    {
        // 클릭한 물고기
        $targetFish = $(this);
        var strID = $targetFish.attr("id");
 
        // 지역 좌표 위치 값 구하기 position() 메서드 활용
        var localPos = $targetFish.position();
        var str ="id="+strID+", 지역 좌표 left="+localPos.left+", top="+localPos.top+"<br>";
        // 전역 좌표 위치 값 구하기 offset() 메서드 활용
        var globalPos = $targetFish.offset();
        str+="id="+strID+", 전역 좌표 left="+globalPos.left+", top="+globalPos.top;
 
        // 출력
        $info.html(str);
    });
})  
</script>

2. 전역 위치 설정하기

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

offset() 메서드를 이용하면 전역 위치를 읽을 수 있고, 설정할 수 도 있습니다.

예제 06. 다음과 같이 화면이 구성돼 있습니다. 클릭한 위치로 물고기를 이동시켜 주세요. 단, 이동 시 전역 좌표를 이용해 주세요

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

x위치 값: event.pageX

y위치 값: event.pageY

<script>
$(document).ready(function()
{
    // #info 구하기
    var $info = $("#info");
    // #fish 구하기
    var $fish = $("#fish");
    // #parent1에 클릭 이벤트 등록
    $("#parent1").click(function(e)
    {
        // 클릭한 전역 좌표 위치 구하기
        var left = e.clientX;
        var top = e.clientY;
 
        // 물고기 전역좌표를 클릭한 전역 좌표 위치 값으로 설정하기
        $fish.offset
        ({
            left:left, // 오른쪽 left,top은 좌표값
            top:top
        })
    });
})
</script>

핵심 04. 요소의 크기 다루기

1. 요소의 크기 구하기

사용법 : 

1. 기본 크기 구하기

$대상.width()

$대상.height()

2. 기본 크기 + padding 영역이 포함된 크기 구하기

$대상.innerWidth()

$대상.innerHeight()

3. 기본 크기 + padding + border 영역이 포함된 크기 구하기

$대상.outerWidth()

$대상.outerHeight()

4. 기본 크기 + padding + border + margin 영역이 포함된 크기 구하기

$대상.outerWidth(true)

$대상.outerHeight(true)

예제 07. 실행화면처럼 물고기($fish)의 

1. 기본크기

2. 기본크기 + padding 영역 크기

3. 기본크기 + padding + border 영역 크기

4. 기본크기 + padding + border + margin 영역 크기

5. 그리고 지역 위치와 전역 위치를 각각 출력해 주세요.

<script>
window.onload = function() 
{
    // #info 찾기
    var $info = $("#info");
    // #fish 찾기
    var $fish = $("#fish");
    // 여기에 코드를 입력해주세요.
            
    var str = "기본크기 width = " + $fish.width() + ", height=" + $fish.height() + "<br>";
    str += "기본크기+padding = " + $fish.innerWidth() + ", height=" + $fish.innerHeight() + "<br>";
    str += "기본크기+padding+border = " + $fish.outerWidth() + ", height=" + $fish.outerHeight() + "<br>";
    str += "기본크기+padding+border+margin = " + $fish.outerWidth(true) + ", height=" + $fish.outerHeight(true) + "<br>";
    // 지역 좌표 위치 값 구하기
    var localPos = $fish.position();
    str += "지역 좌표 left=" + localPos.left + ", top=" + localPos.top + "<br>";
    // 전역 좌표 위치 값 구하기
    var globalPos = $fish.offset();
    str += "전역 좌표 left=" + globalPos.left + ", top=" + globalPos.top;
 
    $info.html($info.html() + str);
};
</script>

* 주의

margin 속성이 있는 요소의

 지역 좌표는 margin을 포함해서 위치를 설정 (A위치)

전역좌표는 margin을 제외한 영역의 크기로 위치 설정 (B위치)

예제 08. 이동(#move) 버튼을 누르면 다음 실행화면처럼 물고기(#fish)를 패널(#parent1)의 오른쪽에 정렬해주세요.

단. 지역 좌표를 이용해 움직여 주세요

풀이 01: 풀이를 잘못한 경우

<script>
$(document).ready(function() 
{
    // #fish 찾기
    var $fish = $("#fish");
    // 여기에 풀이를 입력해주세요.
    // #move에 클릭 이벤트 등록
    $("#move").click(function(e) 
    {
        // 물고기가 이동할 end 위치 구하기
        var endX = $("#parent1").innerWidth() - $fish.outerWidth()); // 지역 좌표를 사용하는 경우 프레임을 넘어서 이동한다 (오류)
 
        console.log($("#parent1").innerWidth(), $fish.outerWidth());
        // 물고기 움직이기
        $fish.css("left", endX);
    })
})
</script>

풀이 02: margin-left 값을 뺀 경우

<script>
$(document).ready(function()
{
  // #fish 찾기
  var $fish = $("#fish");
  // #move에 클릭 이벤트 등록
  $("#move").click(function(e)
  {
    // 물고기가 이동할 end 위치 구하기 // 정상적으로 동작하려면 기존 풀이에서 margin-right 값을 빼줘야 합니다.
    var endX = $("#parent1").innerWidth()-$fish.outerWidth()-parseInt($fish.css("margin-right")); 
    console.log($("#parent1").innerWidth(),$fish.outerWidth());
    // 물고기 움직이기
    $fish.css("left", endX);
  })
})
</script>

2. 요소 크기 변경하기

사용법 : 

1. 기본 크기 변경하기

$대상.width(value)

$대상.height(value)

2. 기본크기 + padding 크기 변경하기

$대상.innerWidth(value)

$대상.innerHeight(value)

예제 09. 풀이 전 코드에서

 "width()를 활용한 크기 변경" 버튼을 누르면 

child의 크기를 width() 메서드와 height() 메서드를 이용해서 200X200 크기로 변경되게 하고, 

"innerWidth()를 활용한 크기 변경" 버튼을 누르면 

child의 크기를 innerWidth() innerHeight() 메서드를 이용해서 200X200 크기로 변경되게 해주세요.

#parent1 
{
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50px;
    top: 100px;
    border: 1px solid #000;
}
 
#child
{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 100px;
    top: 100px;
    background-color: #ccc;
    padding: 20px;
    border: 30px solid #000;
}

<script>
$(document).ready(function() 
{
    var $child = $("#child");
    // 여기에 풀이를 입력해주세요.
    // #btn1에 클릭 이벤트 등록
    $("#btn1").click(function(e) 
    {
        // #child의 widht,height() 메서드를 활용해 너비와 높이를 200으로 설정
        $child.width(200);
        $child.height(200);
    });
    $("#btn2").click(function(e) 
    {
    // #child의 innerWidth()메서드를 활용해 너비와 높이를 200으로 설정
        $child.innerWidth(200);
        $child.innerHeight(200);
    });
})
</script>

핵심 05. 요소 스크롤 위치 다루기

1. 스크롤 위치 다루기

사용법 : 

$대상.scrollLeft()

$대상.scrollTop()

예제 10. 다음 실행화면처럼 확인 버튼(#btn)을 누르면 #container의 스크롤 위치 값을 #info에 출력해 주세요

<script>
$(document).ready(function() 
{
    // #info 구하기
    var $info = $("#info");
    // #container 구하기
    var $container = $("#container");
    // 여기에 풀이를 입력해주세요.
    // #btn에 클릭 이벤트 등록
    $("#btn").click(function() 
    {
        // scrollLeft()/scrollTop() 스크롤 위치 값을 구해 문자열로 만들어 주기
        var strInfo = "scrollLeft = " + $container.scrollLeft() + "<br>"; 
        strInfo += "scrollTop = " + $container.scrollTop();
 
        // #info에 정보 출력
        $info.html(strInfo);
    })
})
</script>

2. 스크롤 위치 설정하기

사용법 : 

$대상.scrollLeft(위치값)

$대상.scrollTop(위치값)

예제 11. 확인 버튼(#btn)을 누르면 현재 위치에서 왼쪽 마지막으로 서서히 스크롤 될 수 있게 0.1초에 5px만큼 이동해 주세요. 

스크롤이 오른쪽 끝까지 되는 경우 타이머를 멈춰 주세요

<script>
$(document).ready(function()
{
    // #info 구하기
    var $info = $("#info");
    // #container 구하기
    var $container = $("#container");
    // 스크롤 마지막 위치 구하기 
    var scrollEnd = $container.find("img").width() - $container.width();
      
    $("#btn").click(function()
    {
        // 컨테이너($container)의 스크롤 위치 값 구하기
        var left =$container.scrollLeft();
 
        // 카운트 변수 초기화
        var count=0;
            
        // 타이머 실행
        var timerID = setInterval(function()
        {
            // 0.1초 마다 5px만큼 왼쪽으로 스크롤하는 함수
            left+=5;
            $container.scrollLeft(left);
                    
            // 스크롤 정보 출력 
            count++;
            $info.html(count+",  left = "+left+", scrollEnd = "+scrollEnd);
                    
            // 오른쪽 끝까지 스크롤되면 타이머 종료. 
            if(left>=scrollEnd)
            {
                clearInterval(timerID);
            }
        },100);
    })
})  
</script>