(JavaScript/jQuery) hide() 메서드 사용법

jQuery.hide()

hide() 메서드는 jQuery 라이브러리에서 제공하는 메서드 중 하나입니다.

이 메서드는 요소를 숨기는 기능을 합니다.

hide() 메서드를 사용하려면 먼저 페이지에 jQuery 라이브러리를 추가해야 합니다.

jQuery 라이브러리를 추가한 후 아래와 같이 hide() 메서드를 사용할 수 있습니다.

<!-- jQuery 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 요소를 숨기는 버튼 -->
<button id="myButton">숨기기</button>

<!-- 숨길 요소 -->
<div id="myElement">
  이 요소를 숨깁니다.
</div>

<!-- jQuery를 사용한 요소 숨기기 -->
<script>
$(document).ready(function(){
  $("#myButton").click(function(){
    $("#myElement").hide();
  });
});
</script>

위의 코드에서 $는 jQuery 객체를 의미합니다. document.ready() 메서드는 페이지 로드가 완료된 후 코드를 실행하기 위한 것입니다. click() 메서드는 클릭 이벤트를 처리하는 메서드입니다.

위의 코드는 id가 myButton인 버튼을 클릭할 때 id가 myElement인 요소를 숨기는 기능을 구현합니다. hide() 메서드를 사용하여 myElement 요소를 숨깁니다.

요소를 숨기려면 CSS에서 표시 속성 값을 없음으로 설정하기만 하면 됩니다. 따라서 요소를 숨길 때 아래와 같이 CSS를 작성합니다.

#myElement {
  display: none;
}

위의 코드에서 display: none; 속성을 사용하여 myElement 요소를 숨깁니다. 이렇게 작성하면 JavaScript에서 요소를 숨길 때 jQuery의 hide() 메서드를 사용하여 해당 요소를 숨기고 CSS에서 display: none을 추가합니다. 해당 요소에. 속성이 설정되고 페이지에서 숨겨집니다.

이제 요소를 숨기는 방법을 알았으니 다시 보이게 하는 방법도 배워야겠죠?

다음 시간에는 요소를 보여주는 메서드인 show() 를 살펴보겠습니다.