<dialog>
<dialog> 태그는 팝업 정보을 설정합니다.
<dialog>
<dialog> 태그는 팝업 정보을 설정합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 요소(Inline Element) |
| 닫는 태그 | 닫는 태그 사용(<dialog> ~ </dialog>) |
| 버전 | HTML5 |
| 시각적 표현 | 팝업 형태 |
| 사용성 |
정의(Definition)
- <dialog> 태그는 팝업 정보을 설정합니다.
- <dialog> 태그는 position: absolute;를 통해 위치가 설정됩니다.
- <dialog> 스크립트를 사용하지 않고 웹 페이지 위에 팝업을 쉽게 만들 수있습니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| open | open | 추가정인 정보를 팝업 형식을 미리 보여줍니다. | - |
예제1(Sample)
dialog를 설정하는 예제입니다.
HTML
CSS
SCRIPT
<dialog open>
dialog를 사용하면 팝업 창이 표현됩니다.
</dialog>
//CSS none
//Javascript none
예제2(Sample)
dialog를 자바스크립트와 설정하는 예제입니다.
HTML
CSS
SCRIPT
<button onclick="window.dialog.show();">dialog 열기</button>
<dialog id="dialog">
dialog를 자바스크립트와 같이 사용합니다.
<button onclick="window.dialog.close();">닫기</button>
</dialog>
//CSS none
//Javascript none
호환성(Compatibility)
|
|
|
|
|
 6
|
 7
|
8
|
 9
|
 10
|
 11
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <dialog> | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용안됨 |
| open | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용안됨 |
