Dexter_- 2018. 10. 24. 17:21

728x90

요소의 영역(크기 / 위치)

요소의 크기

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

inner와 outer

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

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

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

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

위의 내용을 표로 정리하면 다음과 같다.

메소드	설명
.windth( ), .height( )	요소의 크기
innerWidth( ), .innerHeight( )	요소의 크기 + 패딩(padding)의 크기
.outerWidth( ), .outerHeight( )	요소의 크기 + 패딩의 크기 + 테두리(border)의 크기
outerWidth(true), .outerHeight(true)	요소의 크기 + 패딩의 크기 + 테두리의 크기 + 마진(margin)의 크기

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

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

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

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Dimension</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 300px;
            height: 100px;
            border: 2px solid orange;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                var str = "이 div 요소의 ";
                str += "너비는 " + $("#divBox").width() + "픽셀이고,<br>";    // id가 "divBox"인 요소의 너비를 반환함.
                str += "높이는 " + $("#divBox").height() + "픽셀입니다."    // id가 "divBox"인 요소의 높이를 반환함.
                $("#text").html(str);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.width()와 .height() 메소드</h1>
    <div id="divBox">
        <p id="text"></p>
    </div>
    <br>
    <button>요소의 크기 정보</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

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

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Dimension</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                var str = "";
                str += "브라우저 뷰포트의 크기는 " + $(window).width() + "X" + $(window).height() + "입니다.<br>";
                str += "HTML 문서의 크기는 " + $(document).width() + "X" + $(document).height() + "입니다.";
                $("#text").html(str);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.width()와 .height() 메소드</h1>
    <button>브라우저 및 문서의 크기 정보</button>
    <p>브라우저의 크기를 조절해가며 위의 버튼을 눌러보세요!</p>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

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

브라우저의 크기를 조절해가며 위의 버튼을 눌러보세요!

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Dimension</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 200px;
            height: 100px;
            background-color: orange;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("#divBox").width("400");    // id가 "divBox"인 요소의 너비를 설정함.
                $("#divBox").height("200");    // id가 "divBox"인 요소의 높이를 설정함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>요소의 크기 변경</h1>
    <div id="divBox">
        <p id="text"></p>
    </div>
    <br>
    <button>요소의 크기 변경</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

요소의 크기 변경

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

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

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Dimension</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 400px;
            height: 110px;
            border: 5px solid orange;
            padding: 10px;
            margin: 15px;
        }
   </style>
    <script>
        $(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);
            });
        });
   </script>
</head>
 
<body>
 
    <h1>다양한 크기 정보를 반환하는 메소드</h1>
    <div id="divBox">
        <p id="text"></p>
    </div>
    <button>요소의 크기 정보</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

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

요소의 크기에 관한 메소드

메소드	설명
.width( )	선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정함.
.height( )	선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정함.
.innerWidth( )	선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환함.
.innerHeight( )	선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환함.
.outerWidth( )	선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테두리를 포함한 높이를 반환함. 또한, 인수로 true를 전달받으면 마진 영역까지 포함한 너비를 반환함.
.outerHeight( )	선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역과 테두리를 포함한 높이를 반환함. 또한, 인수로 true를 전달받으면 마진 영역까지 포함한 높이를 반환함.

요소의 위치

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

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

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 100px;
            height: 50px;
            border: 1px solid lightgray;
            margin: 10px;
        }
        #para {
            font-weight: bold;
            margin-top: 15px;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                var paraPosition = $("#para").offset();        // id가 "para"인 요소의 위치 정보를 저장함.
                var str = "p 요소의 위치는<br>";
                str += "left가 " + paraPosition.left + "픽셀이고, ";    // id가 "para"인 요소의 left 위치를 반환함.
                str += "top이 " + paraPosition.top + "픽셀입니다.";        // id가 "para"인 요소의 top 위치를 반환함.
                $("#text").html(str);
            });
        });
   </script>
</head>
 
<body>
 
    <div id="divBox">
        <p id="para">p 요소</p>
    </div>
    <button>요소의 위치 정보</button>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

p 요소

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 100px;
            height: 50px;
            border: 1px solid lightgray;
            margin: 10px;
        }
        #para { 
            font-weight: bold;
            margin-top: 15px;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("#para").offset({ top: 200, left: 100 });        // id가 "para"인 요소의 위치를 설정함.
                var paraPosition = $("#para").offset();            // id가 "para"인 요소의 위치 정보를 저장함.
                var str = "p 요소의 위치는<br>";
                str += "left가 " + paraPosition.left + "픽셀이고, ";    // id가 "para"인 요소의 left 위치를 반환함.
                str += "top이 " + paraPosition.top + "픽셀입니다.";        // id가 "para"인 요소의 top 위치를 반환함.
                $("#text").html(str);
            });
        });
   </script>
</head>
 
<body>
 
    <div id="divBox">
        <p id="para">p 요소</p>
    </div>
    <button>요소의 위치 변경</button>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

p 요소

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 100px;
            height: 50px;
            border: 1px solid lightgray;
            margin: 10px;
            padding: 5px;
        }
        #para {
            font-weight: bold;
            margin-left: 15px;
        }
   </style>
    <script>
        $(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);
            });
        });
   </script>
</head>
 
<body>
 
    <div id="divBox">
        <p id="para">p 요소</p>
    </div>
    <button>요소의 위치 정보</button>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

p 요소

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

.offset( ) 메소드

.position( ) 메소드

HTML 문서(HTML document)를 기준으로 함.

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

기준이 되는 조상 요소

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .container * { 
            display: block;
            border: 1px solid lightgray;
            padding: 5px;
            margin: 15px;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "para"인 요소가 위치할 때 기준이 된 조상 요소를 선택함.
                $("#para").offsetParent()
                    .css("border", "2px solid red");    // 해당 요소의 CSS 스타일을 변경함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.offsetParent() 메소드</h1>
    <div class="container">
        <div>div 요소
            <ul style="position: relative">ul 요소
                <li>li 요소</li>
                <li>li 요소
                    <p id="para">p 요소 (기준)
                        <span>span 요소</span>
                    </p>
                </li>
                <li>li 요소</li>
            </ul>
        </div>
    </div>
 
    <button>요소의 위치 정보</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.offsetParent() 메소드

div 요소

li 요소
li 요소
p 요소 (기준) span 요소
li 요소

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

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

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

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

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

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

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 150px;
            height: 150px;
            border: 1px solid lightgray;
            overflow: auto;
        }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "divBox"인 요소의 수평 스크롤 바의 현재 위치를 반환함.
                var str = "수평 스크롤 바의 현재 위치는 left 방향으로 " + $("#divBox").scrollLeft() + "픽셀이고,<br>";
                // id가 "divBox"인 요소의 수직 스크롤 바의 현재 위치를 반환함.
                str += "수직 스크롤 바의 현재 위치는 top 방향으로 " + $("#divBox").scrollTop() + "픽셀입니다.";
                $("#text").html(str);
            });
        });
   </script>
</head>
 
<body>
 
    <div id="divBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue imperdiet viverra. Donec euismod placerat gravida. Suspendisse placerat commodo lectus, sit amet malesuada libero porta ac. Phasellus egestas laoreet turpis eu fringilla. Quisquetincidunteratinurnaultrices,quiseleifendipsumvolutpat. In ultrices tortor neque, malesuada scelerisque nibh vehicula quis. In quam lacus, dictum quis consectetur in, consequat sit amet arcu. Nullam ac consequat neque.
    Aliquam semper mollis purus vel tincidunt. Mauris vehicula dictum justo. Nullam congue, felis ut luctus gravida, nunc mi semper metus, sed vestibulum enim magna ut lacus. Pellentesque sed commodo urna. Vivamus sit amet risus ac libero facilisis consequat. Nunc volutpat in ligula id malesuada. Nullam est metus, pretium vitae rhoncus nec, eleifend id leo.
    Quisque at condimentum ipsum. Aliquam erat volutpat. Donec hendrerit pretium leo vitae faucibus. Proin eget magna sit amet justo egestas pharetra. Suspendisse facilisis laoreet dui, sed lobortis risus dignissim eu. Quisque ac blandit dolor. Donec fringilla lobortis lectus quis cursus. Nullam pulvinar urna non ligula egestas luctus. Praesent vitae egestas orci, at mattis quam. Nunc eu tempor dolor. Aenean lobortis elit ac urna fringilla feugiat non vel ligula. Etiam dictum tortor eget turpis semper, quis euismod libero dictum.
    </div><br>
    <button>스크롤 바의 위치 정보</button>
    <p>스크롤 바를 움직인 후에 버튼을 다시 눌러보세요!</p>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue imperdiet viverra.
Donec euismod placerat gravida.
Suspendisse placerat commodo lectus, sit amet malesuada libero porta ac.
Phasellus egestas laoreet turpis eu fringilla.
Quisquetincidunteratinurnaultrices,quiseleifendipsumvolutpat
. In ultrices tortor neque, malesuada scelerisque nibh vehicula quis.
In quam lacus, dictum quis consectetur in, consequat sit amet arcu. Nullam ac consequat neque.
Aliquam semper mollis purus vel tincidunt.
Mauris vehicula dictum justo.
Nullam congue, felis ut luctus gravida, nunc mi semper metus, sed vestibulum enim magna ut lacus.
Pellentesque sed commodo urna.
Vivamus sit amet risus ac libero facilisis consequat.
Nunc volutpat in ligula id malesuada.
Nullam est metus, pretium vitae rhoncus nec, eleifend id leo.
Quisque at condimentum ipsum.
Aliquam erat volutpat.
Donec hendrerit pretium leo vitae faucibus.
Proin eget magna sit amet justo egestas pharetra.
Suspendisse facilisis laoreet dui, sed lobortis risus dignissim eu.
Quisque ac blandit dolor.
Donec fringilla lobortis lectus quis cursus.
Nullam pulvinar urna non ligula egestas luctus. Praesent vitae egestas orci, at mattis quam.
Nunc eu tempor dolor.
Aenean lobortis elit ac urna fringilla feugiat non vel ligula.
Etiam dictum tortor eget turpis semper, quis euismod libero dictum.

스크롤 바를 움직인 후에 버튼을 다시 눌러보세요!

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

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Position</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        #divBox { 
            width: 150px;
            height: 150px;
            border: 1px solid lightgray;
            overflow: auto;
        }
   </style>
    <script>
        $(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);
            });
        });
   </script>
</head>
 
<body>
 
    <div id="divBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue imperdiet viverra. Donec euismod placerat gravida. Suspendisse placerat commodo lectus, sit amet malesuada libero porta ac. Phasellus egestas laoreet turpis eu fringilla. Quisquetincidunteratinurnaultrices,quiseleifendipsumvolutpat. In ultrices tortor neque, malesuada scelerisque nibh vehicula quis. In quam lacus, dictum quis consectetur in, consequat sit amet arcu. Nullam ac consequat neque.
    Aliquam semper mollis purus vel tincidunt. Mauris vehicula dictum justo. Nullam congue, felis ut luctus gravida, nunc mi semper metus, sed vestibulum enim magna ut lacus. Pellentesque sed commodo urna. Vivamus sit amet risus ac libero facilisis consequat. Nunc volutpat in ligula id malesuada. Nullam est metus, pretium vitae rhoncus nec, eleifend id leo.
    Quisque at condimentum ipsum. Aliquam erat volutpat. Donec hendrerit pretium leo vitae faucibus. Proin eget magna sit amet justo egestas pharetra. Suspendisse facilisis laoreet dui, sed lobortis risus dignissim eu. Quisque ac blandit dolor. Donec fringilla lobortis lectus quis cursus. Nullam pulvinar urna non ligula egestas luctus. Praesent vitae egestas orci, at mattis quam. Nunc eu tempor dolor. Aenean lobortis elit ac urna fringilla feugiat non vel ligula. Etiam dictum tortor eget turpis semper, quis euismod libero dictum.
    </div><br>
    <button>스크롤 바의 위치 설정</button>
    <p id="text"></p>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed congue imperdiet viverra.
Donec euismod placerat gravida.
Suspendisse placerat commodo lectus, sit amet malesuada libero porta ac.
Phasellus egestas laoreet turpis eu fringilla.
Quisquetincidunteratinurnaultrices,quiseleifendipsumvolutpat.
In ultrices tortor neque, malesuada scelerisque nibh vehicula quis.
In quam lacus, dictum quis consectetur in, consequat sit amet arcu.
Nullam ac consequat neque. Aliquam semper mollis purus vel tincidunt.
Mauris vehicula dictum justo.
Nullam congue, felis ut luctus gravida, nunc mi semper metus, sed vestibulum enim magna ut lacus.
Pellentesque sed commodo urna.
Vivamus sit amet risus ac libero facilisis consequat.
Nunc volutpat in ligula id malesuada.
Nullam est metus, pretium vitae rhoncus nec, eleifend id leo.
Quisque at condimentum ipsum.
Aliquam erat volutpat.
Donec hendrerit pretium leo vitae faucibus.
Proin eget magna sit amet justo egestas pharetra.
Suspendisse facilisis laoreet dui, sed lobortis risus dignissim eu.
Quisque ac blandit dolor.
Donec fringilla lobortis lectus quis cursus.
Nullam pulvinar urna non ligula egestas luctus.
Praesent vitae egestas orci, at mattis quam.
Nunc eu tempor dolor.
Aenean lobortis elit ac urna fringilla feugiat non vel ligula.
Etiam dictum tortor eget turpis semper, quis euismod libero dictum.

요소의 위치에 관한 메소드

메소드	설명
.offset( )	선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정함.
.position( )	선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환함.
.scrollLeft( )	선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정함.
.scrollTop( )	선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정함.

728x90

저작자표시 비영리 변경금지

'Library > jQuery' 카테고리의 다른 글

이벤트 처리 (0)	2018.10.25
스타일 설정(프로퍼티/클래스) (0)	2018.10.25
필터링 메소드 (0)	2018.10.24
요소의 탐색 (0)	2018.10.24
요소의 추가 / 복사 및 삭제 (0)	2018.10.24

Embedded Software Embedded Software

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

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

요소의 크기 변경

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

.offsetParent() 메소드

'Library > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바