[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에서 display 속성 값을 none으로 설정하면 됩니다. 따라서 요소를 숨길 때는 아래와 같이 CSS를 작성합니다.

#myElement {
  display: none;
}

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

 

요소를 숨기는 방법에 대해 알았으면, 다시 보이게 하는 방법에 대해서도 알아봐야겠죠?

다음 시간에는 요소를 보여주는 메소드인 show() 에 대해 알아보겠습니다.

[JavaScript/jQuery] show() 메소드 사용법