웹 개발에서 특정 HTML 요소를 화면에서 잠깐 사라지게 하거나 다시 나타나게 하는 기능은 매우 자주 사용됩니다. 이번 글에서는 jQuery의 hide()와 show() 메서드를 활용해 HTML 요소(태그)를 손쉽게 숨기고 다시 표시하는 방법을 알아보겠습니다.
hide()와 show()란?
hide()는 선택한 요소를 화면에서 숨기는 역할을 하며, show()는 숨겨진 요소를 다시 화면에 표시합니다. 두 메서드를 버튼 클릭 이벤트와 함께 사용하면 사용자 인터랙션에 따라 콘텐츠를 동적으로 제어할 수 있습니다.
버튼 마크업 준비하기
먼저 콘텐츠를 숨기거나 보이게 할 두 개의 버튼을 준비합니다.
<button type="submit" id="hide">위 내용 숨기기</button> <button type="submit" id="show">위 내용 보이기</button>
각각의 버튼에는 고유한 ID인 hide와 show가 부여되어 있으며, 이 ID를 통해 jQuery에서 클릭 이벤트를 바인딩하게 됩니다.
클릭 이벤트 처리 코드
버튼 클릭 시 요소를 숨기거나 표시하려면 아래와 같이 click() 이벤트 핸들러 안에 hide()와 show()를 작성합니다.
$(document).ready(function(){
$("#hide").click(function(){
$("h1").hide();
});
$("#show").click(function(){
$("h1").show();
});
});
$(document).ready()는 문서(DOM)가 모두 로드된 후에 코드가 실행되도록 보장해 주므로, 스크립트가 정상적으로 동작하기 위해 반드시 필요합니다.
전체 예제 코드
아래는 위 내용을 모두 포함한 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Test JavaScript</h1>
<button type="submit" id="hide">Click Me To hide above content
</button>
<button type="submit" id="show">Click Me To show above content
</button>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("h1").hide();
});
$("#show").click(function(){
$("h1").show();
});
});
</script>
</body>
</html>
프로그램 실행 방법
위 코드를 실행하려면 파일 이름을 “index.html”(또는 원하는 이름.html)로 저장한 뒤, 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그런 다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 프로그램을 실행하면 다음과 같은 화면이 출력됩니다.
Case 1: 내용 숨기기
“Click Me To hide above content”(위 내용 숨기기) 버튼을 클릭하면 h1 요소가 화면에서 사라지면서 다음과 같은 결과를 얻을 수 있습니다.
Case 2: 내용 다시 보이기
반대로 “Click Me To show above content”(위 내용 보이기) 버튼을 클릭하면 숨겨졌던 h1 요소가 다시 화면에 나타납니다.
마무리
이처럼 jQuery의 hide()와 show() 메서드를 사용하면 별도의 CSS 조작 없이도 간단한 몇 줄의 코드로 HTML 요소를 동적으로 숨기고 표시할 수 있습니다. 더 나아가 fadeIn(), fadeOut(), toggle() 같은 메서드를 함께 익혀두면 훨씬 더 부드럽고 세련된 UI 애니메이션 효과를 구현할 수 있습니다.