[HTML] 버튼 클릭 시 특정 영역을 보여주거나 숨기는 법 (display 속성 활용)

---

💡 버튼을 눌렀을 때 특정 영역을 숨기거나 보여주고 싶다면?

웹페이지를 만들다 보면 FAQ 펼치기, 더보기 버튼, 숨겨진 안내창 표시처럼
클릭 시에만 특정 영역이 보이게 하거나 숨기고 싶을 때가 많아요.
이럴 때 CSS의 display 속성과 JavaScript의 style 조작을 활용하면 간단하게 구현할 수 있습니다.

---

🛠️ 버튼 클릭 시 영역 숨기기/보이기: 코드 예제와 설명

✅ 기본 예제 (JavaScript로 display 조작)

<button onclick="toggleBox()">보이기 / 숨기기</button>

<div id="target-box" style="display: none; border: 1px solid #333; padding: 10px; margin-top: 10px;">
  여기에 숨겨진 내용이 들어갑니다.
</div>

<script>
  function toggleBox() {
    var box = document.getElementById('target-box');
    if (box.style.display === 'none') {
      box.style.display = 'block'; // 보이기
    } else {
      box.style.display = 'none';  // 숨기기
    }
  }
</script>

---

🎯 포인트 설명

• display: none; 👉 해당 요소를 완전히 숨김 (자리도 차지하지 않음)
• display: block; 👉 일반 블록 요소로 다시 보이게 설정
• if (box.style.display === 'none') 👉 현재 숨김 상태인지 확인 후 전환

---

⚡ 응용 예제: 처음에는 보이게 설정

<div id="target-box" style="display: block; border: 1px solid #333; padding: 10px;">
  이 영역은 기본적으로 보입니다.
</div>

✔️ 기본 display를 block으로 두고, 버튼 클릭 시 숨기거나 다시 보이게 설정 가능.

---

🧩 display 외에 사용할 수 있는 다른 방법들

방법	설명
visibility: hidden;	안 보이지만 자리 차지함
opacity: 0;	투명하게 만들지만 클릭 가능
display: none;	자리까지 사라짐, 클릭 불가

✅ 가장 깔끔하게 숨기려면 display: none; 사용!

---

🏁 마무리 요약

목표	방법
버튼 클릭 시 영역 숨기기 / 보이기	display: none; → display: block; 전환
숨겨질 때 자리까지 없애고 싶다	display: none; 사용
투명하게만 만들고 자리 유지	visibility: hidden; 또는 opacity: 0;

---

👉 다음 글 예고

[HTML] 버튼 클릭 시 페이지 맨 위로 부드럽게 올라가는 방법 (scroll behavior 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊