HTML5 <dialog> 태그로 팝업 만들기 – JavaScript 없이 모달창 구현하는 방법

 

 

안녕하세요 😊
웹사이트에서 흔히 보이는 UI 요소 중 하나가
바로 **모달 팝업(Popup)**입니다.

 

대부분의 팝업은 JavaScript로 구현되지만,
HTML5에서는 아예 **전용 태그 <dialog>**를 지원합니다!
오늘은 <dialog> 태그의 기본 사용법과 실제 예제를
초보자도 따라할 수 있게 정리해드릴게요 💡

---

📍 1. <dialog> 태그란?

• HTML5에서 새로 추가된 대화 상자(dialog) 전용 태그
• 팝업 창처럼 화면 위에 뜨는 박스를 JavaScript 없이 생성 가능
• 사용자에게 메시지를 보여주거나 확인/취소 등의 입력을 받을 때 사용

---

📍 2. 기본 예제

<dialog id="myDialog">
  <p>이용약관에 동의하십니까?</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">약관 보기</button>

 

📌 주요 메서드

• show() – 비모달 팝업 (배경 클릭 가능)
• showModal() – 모달 팝업 (배경 클릭 불가)
• close() – 팝업 닫기

---

📍 3. 스타일 커스터마이징 팁

dialog {
  padding: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-align: center;
}

 

✅ 기본 스타일은 브라우저마다 다르기 때문에
직접 padding, border, box-shadow 등을 조절해주는 것이 좋습니다.

---

📍 4. 폼(form)과 함께 쓰기

<dialog id="formDialog">
  <form method="dialog">
    <p>삭제하시겠습니까?</p>
    <button value="confirm">확인</button>
    <button value="cancel">취소</button>
  </form>
</dialog>

 

✔ method="dialog"를 사용하면
버튼을 눌렀을 때 자동으로 다이얼로그가 닫히고
returnValue로 결과를 받을 수 있습니다.

---

📍 5. 지원 브라우저

• ✅ 대부분의 최신 브라우저에서 지원 (Chrome, Edge, Safari 등)
• ❗ 단, IE는 미지원 / 일부 구형 브라우저에선 폴리필 필요

---

✅ 마무리하며

<dialog> 태그는 가볍고 직관적인 팝업 구현 방법입니다.
복잡한 모달 라이브러리를 쓰지 않아도
간단한 메시지, 경고창, 확인 창 등을
깔끔하게 구현할 수 있다는 장점이 있습니다 😊