..

Search

<dialog>

HTML <dialog> 태그

정의 및 특징

<dialog> 태그는 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용합니다.

 

<dialog> 요소는 웹 페이지에서 손쉽게 팝업 대화 상자를 만들 수 있도록 해줍니다.

예제
<dialog open>
    <h2>돼지 저금통</h2>
    <label for="money">지갑에 동전을 얼마 넣을까요?</label>
    <div><input name="amount" id="money" type="number" min="0" step="100" value="100"></div>
    <div><input name="round" type="checkbox">1,000원 단위로 넣기</div>
    <button type="submit" value="saving">동전 넣기</button>
</dialog>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera
<dialog> 37.0 지원하지 않음 지원하지 않음 53.0 지원하지 않음 24.0

HTML5에서 변경된 사항

<dialog> 태그는 HTML5에서 새롭게 추가된 요소입니다.

사용할 수 있는 속성

속성명   속성값 설명

open

 

open

<dialog> 요소가 활성화되어 사용자가 대화 상자와 상호작용할 수 있음을 명시함.

DOM 인터페이스

interface HTMLDialogElement : HTMLElement {

  attribute boolean open;

  attribute DOMString returnValue;

  void show(optional (MouseEvent or Element) anchor);

  void showModal(optional (MouseEvent or Element) anchor);

  void close(optional DOMString returnValue);

};

연관 페이지

HTML5 추가요소 수업 ⇒

연습문제