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

jQuery.show()

---

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

지난 시간 요소를 숨기는 기능을 하는 hide() 메소드에 대해서 알아보았습니다.

이번 시간에는 hide() 메소드와 반대로 요소를 보여주는 기능을 하는 show() 메소드에 대해 알아보겠습니다.

 

show() 메소드를 사용하려면 우선 jQuery 라이브러리를 페이지에 추가해야 합니다. jQuery 라이브러리를 추가한 후에는 아래와 같이 show() 메소드를 사용할 수 있습니다.

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

<!-- 요소를 보여주는 버튼 -->
<button id="myButton">보이기</button>

<!-- 보일 요소 -->
<div id="myElement" style="display: none;">
  이 요소를 보입니다.
</div>

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

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

위 코드에서는 id가 myButton인 버튼을 클릭하면 id가 myElement인 요소를 보여주는 기능을 구현하고 있습니다. show() 메소드를 사용하여 myElement 요소를 보입니다.

요소를 보여줄 때는 CSS에서 display 속성 값을 block으로 설정하면 됩니다. 따라서 요소를 보여줄 때는 아래와 같이 CSS를 작성합니다.

 

#myElement {
  display: block;
}

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