브라우저와 소통하는 토글과 모달

HTML에는 자바스크립트 없이도 사용자와 상호작용할 수 있는 태그들이 있다.
이번 글에서는 콘텐츠를 접고 펼치는 토글과 팝업 창을 띄우는 모달을 담당하는 태그를 정리한다.

details / summary 태그

<details> 태그는 클릭 시 내용을 펼치고 접을 수 있는 토글 컨테이너이다.
<summary> 태그는 <details>의 제목 역할을 하며, 사용자가 클릭하는 트리거 영역이다.
두 태그는 항상 함께 사용하며, <summary>는 반드시 <details>의 첫 번째 자식으로 위치해야 한다.

<details>
  <summary>더 보기</summary>
  <p>펼쳐지는 내용이 여기에 들어간다.</p>
</details>

기본 상태는 닫힘이다. open 속성을 추가하면 처음부터 열린 상태로 렌더링된다.

<details open>
  <summary>기본으로 열려 있는 토글</summary>
  <p>페이지 로드 시 바로 펼쳐져 있다.</p>
</details>

dialog 태그

<dialog> 태그는 브라우저가 기본으로 제공하는 모달(팝업) 창이다.
기존에는 모달을 구현하려면 div와 자바스크립트를 조합해야 했지만, <dialog>를 사용하면 훨씬 간결하게 처리할 수 있다.

<dialog id="myDialog">
  <p>안녕하세요! 모달 창이다.</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
 
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>