initial commit

1 files changed, 180 insertions, 0 deletions

diff --git a/files/ko/web/html/element/dialog/index.html b/files/ko/web/html/element/dialog/index.html
new file mode 100644
index 0000000000..d54f8e313f
--- /dev/null
+++ b/files/ko/web/html/element/dialog/index.html
@@ -0,0 +1,180 @@
+---
+title: '<dialog>: 대화 상자 요소'
+slug: Web/HTML/Element/dialog
+tags:
+  - Element
+  - HTML
+  - HTML interactive elements
+  - Reference
+  - Web
+  - polyfill
+  - 대화 상자
+translation_of: Web/HTML/Element/dialog
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;dialog&gt;</code> 요소</strong>는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code> </a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("alertdialog")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<div class="blockIndicator warning">
+<p><code>tabindex</code> 특성을 <code>&lt;dialog&gt;</code> 요소에 사용해서는 안됩니다.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. <code>open</code> 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li><code>method="dialog"</code> 특성을 사용한 {{htmlelement("form")}} 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 속성은 양식을 제출할 때 사용한 버튼의 {{htmlattrxref("value", "button")}}으로 설정됩니다.</li>
+ <li>CSS {{cssxref('::backdrop')}} <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용하면, {{domxref("HTMLDialogElement.showModal()")}} 메서드를 사용해 활성화한 <code>&lt;dialog&gt;</code> 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: html">&lt;dialog open&gt;
+  &lt;p&gt;여러분 안녕하세요!&lt;/p&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="고급_예제">고급 예제</h3>
+
+<p>다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!-- 간단한 양식을 포함한 팝업 대화 상자 --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;p&gt;&lt;label&gt;좋아하는 동물:
+      &lt;select&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;아르테미아&lt;/option&gt;
+        &lt;option&gt;레서판다&lt;/option&gt;
+        &lt;option&gt;거미원숭이&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/label&gt;&lt;/p&gt;
+    &lt;menu&gt;
+      &lt;button value="cancel"&gt;취소&lt;/button&gt;
+      &lt;button id="confirmBtn" value="default"&gt;확인&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;상세정보 업데이트&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;output aria-live="polite"&gt;&lt;/output&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var updateButton = document.getElementById('updateDetails');
+var favDialog = document.getElementById('favDialog');
+var outputBox = document.getElementsByTagName('output')[0];
+var selectEl = document.getElementsByTagName('select')[0];
+var confirmBtn = document.getElementById('confirmBtn');
+
+// “Update details” button opens the &lt;dialog&gt; modally
+updateButton.addEventListener('click', function onOpen() {
+  if (typeof favDialog.showModal === "function") {
+    favDialog.showModal();
+  } else {
+    alert("The &lt;dialog&gt; API is not supported by this browser");
+  }
+});
+// "Favorite animal" input sets the value of the submit button
+selectEl.addEventListener('change', function onSelect(e) {
+  confirmBtn.value = selectEl.value;
+});
+// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
+favDialog.addEventListener('close', function onClose() {
+  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
+});</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("고급_예제", "100%", 300)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 호환성 표는 구조화된 데이터에서 자동 생성되었습니다. 이 데이터에 참여를 원하시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 으로 이동하셔서 pull request를 하시면 됩니다.</div>
+
+<p>{{Compat("html.elements.dialog")}}</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>지원하지 않는 브라우저에서 <code>&lt;dialog&gt;</code>를 사용하려면 <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>을 추가하세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{event("close")}} 이벤트</li>
+ <li>{{event("cancel")}} 이벤트</li>
+ <li>{{cssxref("::backdrop")}} 의사 요소</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식</a> 안내서</li>
+</ul>