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

jQuery.show()

지난 시간에 우리는 요소를 숨기는 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 요소를 노출하십시오. 이렇게 작성하면 자바스크립트에서 요소를 보여줄 때 jQuery의 show() 메소드를 사용하면 요소가 보여지게 되고 그에 따라 display: block; 속성이 설정되어 페이지에 표시됩니다.