버튼 클릭 시 JavaScript로 div 요소를 숨기는 방법

웹 개발을 하다 보면 버튼을 클릭했을 때 특정 콘텐츠 영역(div)을 보여주거나 숨겨야 하는 경우가 자주 발생합니다. 이번 글에서는 JavaScript의 style.display 속성을 활용해 버튼 클릭 한 번으로 div를 토글(표시/숨김)하는 방법을 알아보겠습니다.

기본 HTML 구조

먼저 화면에 표시할 div 요소를 준비합니다.

<div id="showOrHide">
Welcome in JavaScript
</div>

다음으로 클릭하면 위 div를 숨기거나 다시 보여줄 버튼을 만듭니다. 버튼에는 onclick 이벤트로 함수를 연결합니다.

<button onclick="showOrHideDiv()">Click The Button</button>

핵심 원리: style.display 속성

JavaScript에서 요소를 숨기는 가장 기본적인 방법은 style.display 값을 조작하는 것입니다.

display: "none" → 요소가 화면에서 사라지고 공간도 차지하지 않습니다.
display: "block" → 요소가 다시 화면에 나타납니다.

현재 상태가 none이면 block으로, 그렇지 않으면 none으로 변경하는 방식으로 토글 기능을 구현할 수 있습니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="showOrHideDiv()">Click The Button</button>
<div id="showOrHide">
Welcome in JavaScript
</div>
<script>
    function showOrHideDiv() {
        var v = document.getElementById("showOrHide");
        if (v.style.display === "none") {
            v.style.display = "block";
        } else {
            v.style.display = "none";
        }
    }
</script>
</body>
</html>

코드 동작 설명

버튼을 클릭하면 showOrHideDiv() 함수가 실행됩니다.
document.getElementById()로 id가 showOrHide인 div를 가져옵니다.
현재 display 값이 none이면 block으로 바꿔 요소를 보여주고, 아니라면 none으로 바꿔 숨깁니다.

실행 방법

위 코드를 index.html과 같은 이름으로 저장한 뒤, VS Code를 사용한다면 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택해 브라우저에서 실행하면 됩니다.

실행 결과

페이지를 열면 버튼과 “Welcome in JavaScript” 텍스트가 함께 표시됩니다.

버튼 클릭 시 JavaScript로 div 요소를 숨기는 방법

버튼을 클릭하면 div가 사라지고, 다시 한 번 클릭하면 div가 다시 나타나는 것을 확인할 수 있습니다.

버튼 클릭 시 JavaScript로 div 요소를 숨기는 방법

마무리 및 참고 사항

이처럼 style.display만으로도 간단하게 요소의 표시 여부를 제어할 수 있습니다. 참고로 display: none은 요소가 레이아웃에서 완전히 제거되지만, visibility: hidden을 사용하면 요소는 숨겨지더라도 원래 공간은 유지된다는 차이점이 있습니다. 상황에 맞게 적절한 속성을 선택해 사용하시기 바랍니다.