HTML에서 대화 상자(dialog box)를 정의하려면 <dialog> 태그를 사용합니다. 이 태그를 활용하면 별도의 라이브러리나 복잡한 스크립트 없이도 팝업 또는 모달 형태의 UI를 손쉽게 구현할 수 있습니다.
<dialog> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| open | open | 대화 상자를 열어 사용자가 내용과 자유롭게 상호작용할 수 있도록 합니다. |
예제
다음 코드를 실행하면 <dialog> 태그가 실제로 어떻게 동작하는지 직접 확인할 수 있습니다.
<!Doctype html> <html> <head> <title>HTML dialog Tag</title> </head> <body> <h3>튜토리얼 포인트</h3> <p>저희 사이트에서는 튜토리얼, 퀴즈, 학습 영상 등 다양한 콘텐츠를 제공합니다.</p> <dialog open>모든 튜토리얼은 무료로 이용할 수 있습니다</dialog> </body> </html>
open 속성이 지정된 대화 상자는 페이지가 로드되는 즉시 화면에 표시됩니다. 반대로 이 속성을 제거하면 대화 상자가 기본적으로 숨겨지며, JavaScript의 show() 또는 showModal() 메서드를 호출했을 때만 나타납니다. 특히 showModal()을 사용하면 배경과의 상호작용이 차단되는 모달 대화 상자를 만들 수 있어, 알림창이나 확인창 구현에 유용합니다.