HOWTO · jQuery
jQuery의 resize() 메서드
이 튜토리얼은 jQuery에서 resize() 메소드를 사용하는 방법을 보여줍니다.
이 페이지의 내용
resize() 메소드는 브라우저 창의 크기가 변경될 때 사용되는 jQuery의 내장 함수입니다. 이 튜토리얼은 jQuery에서 resize() 메소드를 사용하는 방법을 보여줍니다.
jQuery에서 resize() 메소드 사용
resize() 메소드는 JavaScript의 onresize() 메소드와 유사하게 작동합니다. 창의 크기를 조정하는 데 사용됩니다.
resize() 메서드의 구문은 다음과 같습니다.
$(selector).resize(function)
selector는 창이 될 수 있습니다. 그리고 function은 resize() 메소드가 호출될 때 호출되는 선택적 매개변수입니다. 이 function는 핸들러라고도 합니다.
핸들러의 코드는 크기 조정이 진행될 때까지 이 이벤트가 계속 전송될 수 있기 때문에 핸들러가 호출된 횟수를 기반으로 해서는 안 됩니다. 이 메서드의 반환 값은 크기가 조정된 속성이 있는 선택된 요소입니다.
여기에서 resize() 메소드는 on("resize", handler)의 jQuery 버전이라는 점도 언급해야 합니다. 따라서 이와 유사하게 .off("resize") 메서드를 사용하여 분리가 가능합니다.
예를 들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
var Window_Size = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#DemoParagraph').html(Window_Size);
});
});
</script>
<style>
span {
font-weight: bold;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h2> jQuery resize() method </h2>
<p> Resize your browser's window and see the Resize() method effect. </p>
<p> You have resized the window <span> 0 </span> times.</p>
<p id = "DemoParagraph"> </p>
</body>
</html>
위의 코드는 크기 조정 시 창의 너비와 높이를 표시하기 위해 resize() 메서드를 사용합니다. 출력 참조:
