HTML <dialog> 태그 (showModal(), show())

1. HTML dialog 태그란?
2. 기본 문법
3. 주요 특징
4. 사용 예제
   • 모달 다이얼로그 ( showModal() )
   • 비모달 다이얼로그 ( show() )
   • 다이얼로그 창에 폼 추가하기
   • CSS 스타일링 적용
5. dialog 태그와 details 태그의 차이점

 

• dialog 태그는 모달 또는 비모달 다이얼로그 창을 만들 때 사용
• showModal() → 모달(배경 비활성화)
• show() → 비모달(배경 활성화, 다른 요소와 상호작용 가능)
• close() → 다이얼로그 닫기
• CSS와 함께 활용하여 스타일을 커스터마이징 가능

 

---

 

HTML dialog 태그란?

dialog 태그는 모달 창 또는 다이얼로그 박스를 생성하는 HTML 요소입니다. 사용자가 특정 작업을 수행할 때 알림, 메시지, 설정 창, 폼 입력 등을 표시하는 데 유용합니다.

기본적으로 dialog 태그는 숨겨진 상태이며, JavaScript로 showModal() 또는 show() 메서드를 호출하면 표시됩니다. 또한 close() 메서드로 닫을 수 있습니다.

 

---

 

기본 문법

<dialog id="myDialog">
  <p>이것은 다이얼로그 창입니다!</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">다이얼로그 열기</button>

버튼을 클릭하면 모달(dialog) 창이 열리고, 닫기 버튼을 클릭하면 다이얼로그가 닫힙니다.

 

---

 

주요 특징

• 모달 창 또는 비모달 창을 만들 수 있음
• 기본적으로 숨겨진 상태이며 showModal() 또는 show()로 열어야 함
• close() 메서드로 닫을 수 있음
• esc 키를 눌러 자동으로 닫을 수 있음
• CSS로 스타일을 커스터마이징 가능

 

---

 

사용 예제

💡모달 다이얼로그 ( showModal() )

모달 다이얼로그는 사용자가 닫기 전까지 화면의 다른 요소와 상호작용할 수 없습니다.

🌈 예제 코드:

<dialog id="modalDialog">
  <p>이것은 모달 다이얼로그입니다!</p>
  <button onclick="document.getElementById('modalDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('modalDialog').showModal()">모달 창 열기</button>

✅ 출력 결과:

이것은 모달 다이얼로그입니다!

모달 창을 열면 배경이 비활성화됨 (사용자는 다이얼로그를 닫아야 함)

 

💡비모달 다이얼로그 ( show() )

비모달 다이얼로그는 사용자가 다른 요소와 상호작용할 수 있습니다.

🌈 예제 코드:

<dialog id="nonModalDialog">
  <p>이것은 비모달 다이얼로그입니다.</p>
  <button onclick="document.getElementById('nonModalDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('nonModalDialog').show()">비모달 창 열기</button>

✅ 출력 결과:

이것은 비모달 다이얼로그입니다.

비모달 창을 열어도 다른 요소를 클릭할 수 있음

 

💡다이얼로그 창에 폼 추가하기

🌈 예제 코드:

<dialog id="formDialog">
  <form method="dialog">
    <p>이름을 입력하세요:</p>
    <input type="text" name="username">
    <button type="submit">확인</button>
  </form>
</dialog>

<button onclick="document.getElementById('formDialog').showModal()">폼 다이얼로그 열기</button>

✅ 출력 결과:

이름을 입력하세요:

method="dialog"을 사용하면 폼이 자동으로 제출되면 다이얼로그가 닫힘

 

💡CSS 스타일링 적용

🌈 예제 코드:

<style>
  dialog {
    border: 2px solid #0073e6;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
  }
</style>

<dialog id="styledDialog">
  <p>이것은 스타일이 적용된 다이얼로그입니다!</p>
  <button onclick="document.getElementById('styledDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('styledDialog').showModal()">스타일 적용된 창 열기</button>

다이얼로그의 테두리, 그림자, 패딩 등을 설정 가능

 

---

 

dialog 태그와 details 태그의 차이점

태그	차이점
dialog 태그	다이얼로그 창을 표시하며 JavaScript로 열고 닫아야 함
details 태그	클릭하면 열리고 접히는 내용을 제공하는 인터페이스 (FAQ, 설명서 등)

🌈 예제 코드:

<details>
  <summary>자세한 정보</summary>
  <p>이곳에는 숨겨진 정보가 있습니다.</p>
</details>

✅ 출력 결과:

자세한 정보

이곳에는 숨겨진 정보가 있습니다.

details 태그

는 클릭하면 자동으로 열리고 닫히는 토글 효과,

dialog 태그

는 JavaScript를 사용하여 직접 제어해야 함.

반응형

---

 

• HTML <dfn> 태그
• HTML <wbr> 태그
• HTML <details> 태그