initial commit

5 files changed, 2581 insertions, 0 deletions

diff --git a/files/ko/web/html/element/input/button/index.html b/files/ko/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..ff986a95d4
--- /dev/null
+++ b/files/ko/web/html/element/input/button/index.html
@@ -0,0 +1,343 @@
+---
+title: <input type="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Input Element
+  - Input Type
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>button</code></strong> 유형의 {{htmlelement("input")}} 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 {{event("click")}} 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다. </span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<div class="note">
+<p><strong>참고</strong>:  <code>&lt;input&gt;</code> 요소의 <code>button</code> 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <code>&lt;button&gt;</code>의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>버튼의 레이블로 사용할 {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td>이벤트</td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td>지원하는 공용 특성</td>
+   <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td>메서드</td>
+   <td>없음</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="button" value="클릭하세요"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p><code>value</code>를 지정하지 않으면 빈 버튼이 됩니다.</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="버튼_사용하기">버튼 사용하기</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>과 <code><a href="/ko/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code>은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.</p>
+
+<h3 id="간단한_버튼">간단한 버튼</h3>
+
+<p>{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 <code>value</code>와 문단 내용을 바꾸는 것입니다.)</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="기계 켜기"&gt;
+&lt;/form&gt;
+&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === '기계 켜기') {
+    btn.value = '기계 끄기';
+    txt.textContent = '기계가 켜졌습니다!';
+  } else {
+    btn.value = '기계 켜기';
+    txt.textContent = '기계가 멈췄습니다.';
+  }
+}</pre>
+
+<p>위의 스크립트는 DOM의 <code>&lt;input&gt;</code>을 나타내는 {{domxref("HTMLInputElement")}} 객체의 참조를 획득해 변수 <code>button</code>에 저장합니다. 그 후 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해, {{event("click")}} 이벤트가 발생했을 때 실행할 함수를 생성합니다.</p>
+
+<p>{{EmbedLiveSample("간단한_버튼", 650, 100)}}</p>
+
+<h3 id="버튼에_키보드_단축키_추가하기">버튼에 키보드 단축키 추가하기</h3>
+
+<p>접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 {{htmlelement("input")}}과 마찬가지로, {{htmlattrxref("accesskey")}} 전역 특성을 추가하는 것입니다.</p>
+
+<p>이번 예제에서는 이전 예제에 더해 <kbd>s</kbd> 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code> 문서를 방문해 조합키 목록을 확인하세요.)</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="기계 켜기" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === '기계 켜기') {
+    btn.value = '기계 끄기';
+    txt.textContent = '기계가 켜졌습니다!';
+  } else {
+    btn.value = '기계 켜기';
+    txt.textContent = '기계가 멈췄습니다.';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("버튼에_키보드_단축키_추가하기", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.</p>
+</div>
+
+<h3 id="버튼_활성화와_비활성화">버튼 활성화와 비활성화</h3>
+
+<p>버튼을 비활성화하려면 간단히 {{htmlattrxref("disabled")}} 전역 특성을 지정하는 것으로 충분합니다.</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="button" value="Disable me" disabled&gt;</pre>
+</div>
+
+<p>런타임에서 바꿀 땐 요소의 <code>disabled</code> 속성에 <code>true</code>나 <code>false</code>를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 <code>btn.disabled = true</code>를 통해 비활성화합니다. 그 후, {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html">&lt;input type="button" value="활성"&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  btn.disabled = true;
+  btn.value = '비활성';
+  window.setTimeout(function() {
+    btn.disabled = false;
+    btn.value = '활성';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p><code>disabled</code> 특성을 지정하지 않은 경우 부모 요소의 <code>disabled</code>를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 {{HTMLElement("fieldset")}} 등 부모 요소로 감싸고, 그 부모의 <code>disabled</code> 를 사용해 한꺼번에 상태를 통제할 수 있습니다.</p>
+
+<p>다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 <code>disabled</code> 특성을 <code>&lt;fieldset&gt;</code>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Button group&lt;/legend&gt;
+  &lt;input type="button" value="Button 1"&gt;
+  &lt;input type="button" value="Button 2"&gt;
+  &lt;input type="button" value="Button 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var fieldset = document.querySelector('fieldset');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  fieldset.disabled = true;
+  window.setTimeout(function() {
+    fieldset.disabled = false;
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p>버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제는 {{htmlelement("canvas")}} 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.</p>
+
+<pre class="brush: html">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="펜 색상"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="펜 크기"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="캔버스 지우기"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  margin: 0;
+  overflow: hidden;
+  background: #ccc;
+}
+
+.toolbar {
+  width: 150px;
+  height: 75px;
+  background: #ccc;
+  padding: 5px;
+}
+
+input[type="color"], input[type="button"] {
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+}
+
+input[type="range"] {
+  width: 70%;
+}
+
+ span {
+   position: relative;
+   bottom: 5px;
+ }</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// covert degrees to radians
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// update sizepicker output value
+
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// store mouse pointer coordinates, and whether the button is pressed
+var curX;
+var curY;
+var pressed = false;
+
+// update mouse pointer coordinates
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>{{EmbedLiveSample("예제", '100%', 600)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-button")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} 요소와 그 인터페이스 {{domxref("HTMLInputElement")}}.</li>
+ <li>보다 현대적인 {{HTMLElement("button")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/input/date/index.html b/files/ko/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..43675823de
--- /dev/null
+++ b/files/ko/web/html/element/input/date/index.html
@@ -0,0 +1,497 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/Input/date
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Input
+  - Input Element
+  - Input Type
+  - Reference
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>date</code></strong> 유형의 {{HTMLElement("input")}} 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성합니다.</span></p>
+
+<p>입력 칸의 값은 연, 월, 일을 포함하지만 시간은 포함하지 않습니다. {{HTMLElement("input/time", "time")}}과 {{HTMLElement("input/datetime-local", "datetime-local")}} 입력 유형이 시간과 시간+날짜 조합을 지원합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>입력 UI는 브라우저마다 다릅니다. {{anch("브라우저 호환성")}}에서 더 자세한 정보를 알아보세요. 날짜 입력 유형을 지원하지 않는 브라우저에서는 우아하게 <code><a href="/ko/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>로 저하됩니다.</p>
+
+<p>날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.</p>
+
+<p><img alt="A textbox containing “dd/mm/yyyy”, an increment/decrement button combo, and a downward arrow that opens into a calendar control." src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>구 Edge의 컨트롤입니다.</p>
+
+<p><img alt="A textbox containing “mm/dd/yyyy”, but when interacted with, opens a tri-column date selector." src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Firefox의 날짜 컨트롤입니다.</p>
+
+<p><img alt="Another “dd/mm/yyyy” textbox that expands into a selectable calendar control." src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>YYYY-MM-DD 형식으로 날짜를 나타내거나, 빈 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>지원하는 공통 특성</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>날짜 입력 칸의 값은 입력한 날짜를 나타내는 {{domxref("DOMString")}}입니다. 날짜는 유효한 날짜 문자열 문서에서 설명하듯, ISO8601을 따르는 서식을 취합니다.</p>
+
+<p>{{htmlattrxref("value", "input")}} 특성에 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;input type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('값', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>표시 값과 실제 <code>value</code>의 불일치</strong> — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, <code>value</code>는 항상 <code>yyyy-mm-dd</code>의 서식을 사용합니다.</p>
+</div>
+
+<p>입력 요소의 날짜 값은 JavaScript의 {{domxref("HTMLInputElement.value", "value")}}와 {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} 속성으로 설정할 수도 있습니다. 다음 예제 코드를 보세요.</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+console.log(dateControl.value); // prints "2017-06-01"
+console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestamp</pre>
+
+<p>위의 코드는 <code>type</code>이 <code>date</code>인 첫 번째 {{HTMLElement("input")}} 요소를 찾아서, 값을 <code>2017-06-01</code>로 설정합니다. 그리고 값을 다시 문자열과 숫자 형태로 가져옵니다.</p>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>date</code> 유형은 아래의 특성도 지원합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>허용하는 가장 늦은 날짜</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>허용하는 가장 이른 날짜</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>받을 수 있는 제일 나중 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>max</code>보다 더 나중이라면 유효성 검증에 실패합니다. <code>max</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.</p>
+
+<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>max</code>는 <code>min</code>과 <strong>동일하거나 이후</strong>인 날짜 문자열이어야 합니다.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>받을 수 있는 제일 이전 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>min</code>보다 더 이전이라면 유효성 검증에 실패합니다. <code>min</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.</p>
+
+<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>min</code>은 <code>max</code>와 <strong>동일하거나 이전</strong>인 날짜 문자열이어야 합니다.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>date</code> 입력 칸의 <code>step</code> 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ <code>step</code>로 처리합니다. 기본값은 1로, 하루를 나타냅니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>date</code> 입력 칸에서 <code>step</code>의 값으로 <code>any</code>를 지정하면 <code>1</code>과 같습니다.</p>
+</div>
+
+<h2 id="날짜_입력_칸_사용하기">날짜 입력 칸 사용하기</h2>
+
+<p>날짜 입력 칸은 꽤 편리하게 보입니다. 날짜를 선택할 수 있는 쉬운 인터페이스를 제공하고, 서버로 값을 전송할 땐 현재 사용자의 로케일과 관계 없이 정규화하니까요. 그러나, 지금은 제한적인 브라우저 지원으로 인한 문제가 존재합니다.</p>
+
+<p>이 구획에서는 <code>&lt;input type="date"&gt;</code>의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. ({{anch("미지원 브라우저 처리하기")}}로 가세요.)</p>
+
+<div class="blockIndicator note">
+<p>모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.</p>
+</div>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p><code>&lt;input type="date"&gt;</code>의 가장 간단한 사용법은 아래 코드처럼 하나의 <code>&lt;input&gt;</code>과 그 {{htmlelement("label")}}로 이뤄집니다.</p>
+
+<pre class="brush: html">&lt;form action="https://example.com"&gt;
+  &lt;label&gt;
+    Enter your birthday:
+    &lt;input type="date" name="bday"&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('기본_예제', 600, 40)}}</p>
+
+<p>위의 HTML은 입력받은 날짜를 <code>bday</code>라는 키로 <code>https://example.com</code>에 제출합니다. 그래서, 최종 URL은 <code>https://example.com/?bday=1955-06-08</code>이 됩니다.</p>
+
+<h3 id="최대와_최소_날짜_설정">최대와 최소 날짜 설정</h3>
+
+<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}} 특성을 사용하면 사용자가 선택할 수 있는 날짜를 제한할 수 있습니다. 다음 코드에서는 최소 날짜 <code>2017-04-01</code>, 최대 날짜 <code>2017-04-30</code>을 지정합니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="party"&gt;Choose your preferred party date:
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/label&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('최대와_최소_날짜_설정', 600, 40)}}</p>
+
+<p>실행 결과에서 2017년 4월의 날짜만 선택 가능함을 볼 수 있습니다. 입력 칸의 연과 월은 편집이 불가능해지며, 날짜 선택 위젯에서도 2017년 4월 바깥의 날짜는 선택할 수 없습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 원래 {{htmlattrxref("step", "input")}} 특성을 사용해 날짜를 증감할 때 늘어날 일 수를 조절할 수 있어야 하고, 이를 이용해 토요일만 선택 가능하게 하는 등의 처리가 가능해야 합니다. 그러나 지금은 아무 브라우저에서도 구현하고 있지 않습니다.</p>
+</div>
+
+<h3 id="입력_칸_크기_조절">입력 칸 크기 조절</h3>
+
+<p><code>&lt;input type="date"&gt;</code>는 {{htmlattrxref("size", "input")}} 등의 크기 조절 특성을 지원하지 않습니다. <a href="/ko/docs/Web/CSS">CSS</a>를 사용하세요.</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p><code>&lt;input type="date"&gt;</code>는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않습니다. 보통 날짜 입력 칸의 인터페이스가 날짜 이외의 값을 처음부터 허용하지 않는 것이 유용하긴 하나, 아무 값을 입력하지 않을 수도 있고, 미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력할 수 있습니다.</p>
+
+<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}}를 사용해 가능한 날짜 범위를 제한({{anch("최대와 최소 날짜 설정")}})한 경우, 지원하는 브라우저에서는 범위 밖의 값을 받았을 때 오류를 표시합니다. 그러나 브라우저가 온전히 지원하지 않을 수도 있기 때문에, 제출받은 값을 이중으로 검증하는 것이 필요합니다.</p>
+
+<p>{{htmlattrxref("required", "input")}} 특성을 사용해 값을 필수로 요구할 수도 있으며, 빈 입력 칸을 제출하려고 하면 오류를 표시합니다. required는 대부분의 브라우저에서, 텍스트 입력 칸으로 대체되더라도 지원하고 있습니다.</p>
+
+<p>최소/최대 날짜와 필수 검증 예제를 보겠습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;
+    Choose your preferred party date (required, April 1st to 20th):
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>날짜 입력 칸의 입력을 완전히 끝내지 않았거나, 범위 밖의 값으로 제출을 시도하면 브라우저가 오류를 표시하는 것을 확인할 수 있습니다. 아래 실행 결과에서 직접 해보세요.</p>
+
+<p>{{EmbedLiveSample('유효성_검사', 600, 100)}}</p>
+
+<p>지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.</p>
+
+<p><img alt="The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message “Please fill in this field.”" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>다음은 위 코드에서 사용한 CSS로, {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 {{htmlelement("span")}}에 아이콘을 추가합니다.</p>
+
+<pre class="brush: css">label {
+  display: flex;
+  align-items: center;
+}
+
+span::after {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid+span::after {
+  content: '✓';
+}</pre>
+
+<div class="warning">
+<p><strong>중요</strong>: 클라이언트측 유효성 검사는 서버의 검사를 대체할 수 없습니다. HTML을 수정하는 것도 쉽지만, HTML을 완전히 우회하고 서버에 데이터를 직접 제출할 수도 있기 때문입니다. 서버가 받은 데이터의 검증을 하지 못하는 경우 잘못된 형식, 잘못된 유형, 너무 큰 데이터 등으로 인해 심각한 상황을 맞을 수도 있습니다.</p>
+</div>
+
+<h2 id="미지원_브라우저_처리하기">미지원 브라우저 처리하기</h2>
+
+<p>위에서 언급했듯, 현재 날짜 입력 칸의 큰 문제는 {{anch("브라우저 호환성", "브라우저 지원")}}입니다. 예를 하나 들자면, Firefox for Android의 날짜 입력기는 다음과 같은 모습입니다.</p>
+
+<p><img alt="A popup calendar picker modal floats above the web page and browser UI." src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>지원하지 않는 브라우저에서는 단순한 텍스트 입력 칸으로 우아하게 저하되긴 하지만, 이는 (보여지는 컨트롤이 다르므로) 사용자 인터페이스와 데이터 처리가 일관적이지 못하다는 문제를 만듭니다.</p>
+
+<p>두 문제 중 데이터 처리가 더 심각합니다. 날짜 입력 칸을 지원하는 브라우저에서는 값을 <code>yyyy-mm-dd</code>의 형식으로 정규화합니다. 그러나 텍스트 입력만으로는 값의 형식을 브라우저가 알 수 없으며, 사람들은 다양한 형태로 날짜를 입력합니다. 다음은 그 일부입니다.</p>
+
+<ul>
+ <li><code>yymmdd</code></li>
+ <li><code>yyyymmdd</code></li>
+ <li><code>yyyy/mm/dd</code></li>
+ <li><code>yyyy-mm-dd</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+</ul>
+
+<p>해결하는 방법 중 하나는 날짜 입력 칸에 {{htmlattrxref("pattern", "input")}} 특성을 사용하는 것입니다. 날짜 입력 칸은 사용하지 않는 특성이지만 텍스트 입력 칸으로 대체된 경우에는 사용하기 때문인데, 미지원 브라우저에서 다음 코드를 확인해보세요.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="bday"&gt;Enter your birthday:
+    &lt;input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('미지원_브라우저_처리하기', 600, 100)}}</p>
+
+<p>입력한 값을 패턴 <code>####-##-##</code> (<code>#</code>은 0에서 9까지의 숫자)에 맞추지 않고 제출해보면 브라우저가 날짜 입력 칸을 강조하며 오류를 표시함을 볼 수 있습니다. 물론 아직도 사람들이 유효하지 않은 날짜나 잘못된 형태로 입력하는 것은 막을 수 없으므로, 문제를 해결한 것은 아닙니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">span {
+  position: relative;
+}
+
+span::after {
+  right: -18px;
+  position: absolute;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<p>그러므로 지금으로서는, 크로스 브라우저 날짜 처리를 지원하기 위한 가장 좋은 방법은 각각 다른 입력 칸에 연, 월, 일을 입력하도록 하는 방법과, 외부 JavaScript 라이브러리를 사용하는 편이 최선입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이번 예제에서는 날짜를 선택할 수 있는 사용자 인터페이스 두 개를 만들어보겠습니다. 첫 번째는 네이티브 <code>&lt;input type="date"&gt;</code> 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 {{htmlelement("select")}} 요소를 이용한 것입니다.</p>
+
+<p>{{EmbedLiveSample('예제', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label class="nativeDatePicker"&gt;Enter your birthday:
+    &lt;input type="date" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+
+  &lt;fieldset class="fallbackDatePicker" hidden&gt;
+    &lt;legend class="fallbackLabel"&gt;Enter your birthday:&lt;/legend&gt;
+
+    &lt;label&gt;
+      Day:
+      &lt;select name="day"&gt;&lt;/select&gt;
+    &lt;/label&gt;
+
+    &lt;label&gt;
+      Month:
+      &lt;select name="month"&gt;
+        &lt;option&gt;January&lt;/option&gt;
+        &lt;option&gt;February&lt;/option&gt;
+        &lt;option&gt;March&lt;/option&gt;
+        &lt;option&gt;April&lt;/option&gt;
+        &lt;option&gt;May&lt;/option&gt;
+        &lt;option&gt;June&lt;/option&gt;
+        &lt;option&gt;July&lt;/option&gt;
+        &lt;option&gt;August&lt;/option&gt;
+        &lt;option&gt;September&lt;/option&gt;
+        &lt;option&gt;October&lt;/option&gt;
+        &lt;option&gt;November&lt;/option&gt;
+        &lt;option&gt;December&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/label&gt;
+
+    &lt;label&gt;
+      Year:
+      &lt;select name="year"&gt;&lt;/select&gt;
+    &lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>월은 변하지 않으므로 하드코딩합니다. 일과 연은 현재 선택 값에 따라 동적으로 생성하도록 비워놓습니다. (자세한 설명은 아래의 코드 주석을 참고하세요.)</p>
+
+<div class="hidden">
+<pre class="brush: css">span {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>코드에서 관심을 가질만한 곳은 브라우저의 <code>&lt;input type="date"&gt;</code> 지원 여부를 알아내기 위한 기능 탐지 부분입니다.</p>
+
+<p>우선 새로운 {{htmlelement("input")}} 요소를 만들고, <code>type</code>을 <code>date</code>로 설정해봅니다. 그리고 즉시 <code>&lt;input&gt;</code>의 유형을 검사하는데, 지원하지 않는 브라우저에서 <code>date</code>는 <code>text</code>로 대체되므로 <code>text</code>를 반환합니다. <code>&lt;input type="date"&gt;</code>을 지원하지 않는다는 사실을 알아냈으면 네이티브 입력 칸을 숨기고, 대체 요소({{htmlelement("select")}})를 대신 노출합니다.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+
+var yearSelect = document.querySelector('[name=year]');
+var monthSelect = document.querySelector('[name=month]');
+
+// Test whether a new date input falls back to a text input
+var testElement = document.createElement('input');
+
+try {
+  test.type = 'date';
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (testElement.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.hidden = true;
+  fallbackPicker.hidden = false;
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  const daySelect = document.querySelector('[name=day]');
+  const month = monthSelect.value;
+
+  // Create variable to hold new number of days to inject
+  let dayNum;
+
+  // 31 or 30 days?
+  switch (month) {
+    case 'April': case 'June': case 'September': case 'November':
+      dayNum = 30;
+    break;
+    case 'February':
+      // If month is February, calculate whether it is a leap year or not
+      const year = yearSelect.value;
+      const isLeap = new Date(year, 1, 29).getMonth() === 1;
+      dayNum = isLeap ? 29 : 28;
+    break;
+    default:
+      dayNum = 31;
+  }
+
+  // inject the right number of new &lt;option&gt;s into the &lt;select&gt;
+  daySelect.options = Array.from({ length: dayNum }, function(index) {
+    return index + 1;
+  });
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if (previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with fewer days in it (like February),
+    // this code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if (previousDay &gt; daySelect.length + 1) {
+      daySelect.selectedIndex = daySelect.length;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var year = (new Date()).getFullYear();
+
+  // Make this year and the 100 years before it available in the &lt;select&gt;
+  daySelect.options = Array.from({ length: 100 }, function(index) {
+    return index + year;
+  });
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = populateDays;
+monthSelect.onchange = populateDays;
+
+// preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 어떤 연도는 53주임을 기억하세요! (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Wikipedia</a>) 프로덕션 애플리케이션을 개발할 땐 고려해야 할 사항입니다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>일반 {{HTMLElement("input")}} 요소와, 그 인터페이스인 {{domxref("HTMLInputElement")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/input/file/index.html b/files/ko/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..a58f988d17
--- /dev/null
+++ b/files/ko/web/html/element/input/file/index.html
@@ -0,0 +1,509 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/Input/file
+tags:
+  - HTML
+  - HTML forms
+  - Input Type
+  - Reference
+  - 파일
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>file</code></strong> 유형의 {{htmlelement("input")}} 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, <a href="/ko/docs/Learn/HTML/Forms">양식을 제출</a>해 서버로 전송하거나, <a href="/ko/docs/Web/API/File/Using_files_from_web_applications">File API</a>를 사용한 JavaScript 코드로 조작할 수 있습니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>지원하는 공통 특성</strong></p>
+   </td>
+   <td>{{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>추가 특성</strong></td>
+   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>files</code>, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>DOM 인터페이스</strong></td>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>파일 입력 칸의 {{htmlattrxref("value", "input")}} 특성은 선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 <code>value</code>는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 {{domxref("HTMLInputElement.files")}} 속성으로 가져올 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong>
+
+<ol>
+ <li>아직 아무런 파일도 선택하지 않은 경우 빈 문자열(<code>""</code>)을 사용합니다.</li>
+ <li>악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">C:\fakepath\를 앞에 포함</a>합니다.</li>
+</ol>
+</div>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>file</code> 유형은 아래의 특성도 지원합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("accept")}}</code></td>
+   <td>허용하는 파일 유형을 나타내는 하나 이상의 {{anch("고유 파일 유형 지정자")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("capture")}}</code></td>
+   <td>이미지 또는 비디오 데이터를 캡처할 때 사용할 방법</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("files")}}</code></td>
+   <td>선택한 파일을 나열하는 {{domxref("FileList")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 <strong>{{anch("고유 파일 유형 지정자")}}</strong>의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.</p>
+
+<p>예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 <code>&lt;input&gt;</code>은 다음과 같은 형태를 갖게 됩니다.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, <a href="/ko/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. <code>user</code> 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, <code>environment</code> 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. <code>capture</code> 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong> <code>capture</code>는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.</div>
+
+<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+
+<p>선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. {{htmlattrxref("multiple", "input/file")}} 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.</p>
+
+<h2 id="비표준_특성">비표준 특성</h2>
+
+<p>위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. <code>{{anch("multiple")}}</code> 특성을 지정한 경우 복수 선택 가능</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+
+<p><code>webkitdirectory</code> 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>webkitdirectory</code>는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.</p>
+</div>
+
+<h2 id="고유_파일_유형_지정자">고유 파일 유형 지정자</h2>
+
+<p><strong>고유 파일 유형 지정자</strong>는 <code>file</code> 유형의 {{htmlelement("input")}}에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.</p>
+
+<ul>
+ <li>마침표로 시작하는 유효한 파일 이름 확장자. 대소문자를 구분하지 않습니다. 예시: <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code>.</li>
+ <li>확장자를 포함하지 않은 유효한 MIME 유형 문자열.</li>
+ <li><code>audio/*</code>는 "모든 오디오 파일"을 의미합니다.</li>
+ <li><code>video/*</code>는 "모든 비디오 파일"을 의미합니다.</li>
+ <li><code>image/*</code>는 "모든 이미지 파일"을 의미합니다.</li>
+</ul>
+
+<p><code>accept</code> 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="파일_입력_칸_사용하기">파일 입력 칸 사용하기</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Choose file to upload&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Submit&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample('기본_예제', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 예제는 GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">소스 코드</a>와 <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">라이브 예제</a>를 확인하세요.</p>
+</div>
+
+<p>사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.</p>
+
+<p>예제 코드와 같이 {{htmlattrxref("multiple", "input/file")}} 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(<kbd>Shift</kbd>, <kbd>Ctrl</kbd> 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. <code>&lt;input&gt;</code> 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 <code>multiple</code> 특성을 제거하세요.</p>
+
+<h3 id="선택한_파일의_정보_가져오기">선택한 파일의 정보 가져오기</h3>
+
+<p>요소의 {{domxref("HTMLInputElement.files")}} 속성은 선택한 파일({{domxref("File")}}) 목록을 {{domxref("FileList")}} 객체로 반환합니다. <code>FileList</code>는 배열처럼 행동하므로, <code>length</code> 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.</p>
+
+<p>각각의 <code>File</code> 객체는 다음과 같은 정보를 가지고 있습니다.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>파일 이름.</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>파일을 마지막으로 수정한 시각을 나타내는 {{jsxref("Date")}} 객체. 더 이상 사용하지 않아야 합니다. <code>lastModified</code>를 대신 사용하세요.</dd>
+ <dt><code>size</code></dt>
+ <dd>파일의 크기를 바이트 단위로 나타낸 값.</dd>
+ <dt><code>type</code></dt>
+ <dd>파일의 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>.</dd>
+ <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
+ <dd>{{htmlattrxref("webkitdirectory", "input/file")}} 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.</dd>
+</dl>
+
+<div class="hidden note">
+<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="가능한_파일_유형_제한하기">가능한 파일 유형 제한하기</h3>
+
+<p>종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, {{glossary("JPEG")}}, {{glossary("PNG")}}처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.</p>
+
+<p>허용하는 파일 유형은 {{htmlattrxref("accept","input/file")}} 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.</p>
+
+<ul>
+ <li><code>accept="image/png"</code> or <code>accept=".png"</code> — PNG 파일을 허용합니다.</li>
+ <li><code>accept="image/png, image/jpeg"</code> 또는 <code>accept=".png, .jpg, .jpeg"</code> — PNG와 JPEG를 허용합니다.</li>
+ <li><code>accept="image/*"</code> — <code>image/*</code> MIME 유형을 가진 모든 파일을 허용합니다. 많은 모바일 기기에서는, 이 값을 지정할 경우 사용자가 카메라로 사진을 찍을 수 있도록 설정합니다.</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 문서처럼 보이는 파일을 모두 허용합니다.</li>
+</ul>
+
+<p>보다 완전한 예제 코드를 보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Choose file to upload&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.</p>
+
+<p>{{EmbedLiveSample('가능한_파일_유형_제한하기', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">소스 코드</a>, <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">라이브 실행 결과</a>.</p>
+</div>
+
+<p>외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 <code>accept</code>에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p><code>accept</code> 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 <code>accept</code>를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.</p>
+
+<p>그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 <code>accept</code> 특성을 보조해야 합니다.</p>
+
+<h3 id="참고">참고</h3>
+
+<ol>
+ <li>
+  <p>파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.</p>
+
+  <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]");
+input.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p><code>&lt;input type="file"&gt;</code>로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 <code>C:\fakepath\</code> 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">명세에도 포함</a>되어 있습니다.</p>
+ </li>
+</ol>
+
+<h2 id="예제">예제</h2>
+
+<p>이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. <code>HTMLInputElement.files</code> 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 전체 소스 코드는 GitHub에 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">라이브 실행 결과</a>). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.</p>
+</div>
+
+<p>우선 HTML을 살펴보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Choose images to upload (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;No files currently selected for upload&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 580px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.</p>
+
+<p>이제 JavaScript 차례입니다.</p>
+
+<p>우선 양식의 파일 입력 칸과, <code>.preview</code> 클래스를 가진 {{htmlelement("div")}} 요소에 대한 참조를 가져옵니다. 그 후, {{htmlelement("input")}} 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. <code>&lt;input&gt;</code>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <code>&lt;input&gt;</code>을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.</p>
+
+<pre class="brush: js notranslate">var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("visibility", "visibility: hidden")}}, {{cssxref("display", "display: none")}}로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 {{cssxref("opacity")}}를 대신 사용합니다.</p>
+</div>
+
+<p>그 다음으로는 입력 칸에 <a href="/ko/docs/Web/API/EventTarget/addEventListener">이벤트 수신기</a>를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 <code>updateImageDisplay()</code> 함수를 호출하게 됩니다.</p>
+
+<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p><code>updateImageDisplay()</code> 함수를 호출하면 다음 작업을 수행하게 됩니다.</p>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}} 반복문을 사용해 <code>&lt;div&gt;</code>에 존재하는 이전 파일의 미리보기를 제거합니다.</li>
+ <li>선택한 모든 파일의 정보를 들고 있는 {{domxref("FileList")}} 객체를 가져온 후 <code>curFiles</code> 변수에 저장합니다.</li>
+ <li><code>curFiles.length</code>가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, <code>&lt;div&gt;</code>에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.</li>
+ <li>반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 <code>&lt;div&gt;</code>에 출력합니다. 참고할 점:</li>
+ <li>뒤에서 작성할 <code>validFileType()</code> 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 <code>accept</code> 특성에 속한 파일인지 판별합니다.</li>
+ <li>올바른 파일이라면,
+  <ul>
+   <li><code>&lt;div&gt;</code> 안의 목록에 해당 파일의 이름과 크기를 항목으로 추가합니다. 이름은 <code>file.name</code>과 <code>file.size</code>로 가져옵니다. 또 다른 함수인 <code>returnFileSize()</code>는 파일 크기를 보기 좋게 바이트/KB/MB로 서식해 출력합니다. (브라우저는 바이트 크기로만 알려줍니다)</li>
+   <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}를 호출해 이미지 미리보기 썸네일을 생성하고, 새로 만든 {{htmlelement("img")}} 태그의 {{htmlattrxref("src", "img")}}에 지정한 후, 이미지도 목록의 항목에 추가합니다.</li>
+  </ul>
+ </li>
+ <li>파일 유형이 유효하지 않은 경우 사용자에게 다른 파일을 선택해야 한다고 알려주는 메시지를 표시합니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if(curFiles.length === 0) {
+    const para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement('ol');
+    preview.appendChild(list);
+
+    for(const file of curFiles) {
+      const listItem = document.createElement('li');
+      const para = document.createElement('p');
+      if(validFileType(file)) {
+        para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
+        const image = document.createElement('img');
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p><code>validFileType()</code> 함수는 매개변수로 {{domxref("File")}} 객체를 받아서, 그 파일의 <code>type</code>이 <code>fileTypes</code>의 아무 값과 동일한지 판별합니다. {{jsxref("Array.prototype.includes()")}}를 사용하여 type과 일치하는 값이 존재하면 <code>true</code>, 아니면 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon"
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}</pre>
+
+<p><code>returnFileSize()</code> 함수는 숫자(현재 파일의 <code>size</code> 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.</p>
+
+<pre class="brush: js notranslate">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt;= 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.</p>
+
+<p>{{EmbedLiveSample('예제', '100%', 200)}}</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', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>initial <code>capture</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-file")}}</p>
+
+<h2 id="같이_보_기">같이 보 기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a> — <code>&lt;input type="file"&gt;</code>과 File API에 대한 유용한 예제를 더 가지고 있습니다.</li>
+ <li><a href="/ko/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS 속성 호환성</a></li>
+</ul>
diff --git a/files/ko/web/html/element/input/index.html b/files/ko/web/html/element/input/index.html
new file mode 100644
index 0000000000..8ff435e12d
--- /dev/null
+++ b/files/ko/web/html/element/input/index.html
@@ -0,0 +1,865 @@
+---
+title: '<input>: 입력 요소'
+slug: Web/HTML/Element/Input
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;input&gt;</code> 요소</strong>는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.</span> {{glossary("user agent", "사용자 에이전트")}}에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <code>&lt;input&gt;</code> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+
+
+<h2 id="&lt;input>_유형"><code>&lt;input&gt;</code> 유형</h2>
+
+<p><code>&lt;input&gt;</code> 요소의 동작 방식은 {{htmlattrxref("type")}} 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 <code>text</code>입니다.</p>
+
+<p>가능한 유형은 다음과 같습니다.</p>
+
+<table class="standard-table">
+ <colgroup>
+  <col>
+  <col style="width: 50%;">
+  <col>
+ </colgroup>
+ <thead>
+  <tr>
+   <th>유형</th>
+   <th>설명</th>
+   <th>기본 예제</th>
+   <th>Spec</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("input/button", "button")}}</td>
+   <td>기본 행동을 가지지 않으며 {{htmlattrxref("value", "input")}}을 레이블로 사용하는 푸시 버튼.</td>
+   <td id="examplebutton">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="button" name="button" /&gt;</pre>
+    {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}}</td>
+   <td>단일 값을 선택하거나 선택 해제할 수 있는 체크박스.</td>
+   <td id="examplecheckbox">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="checkbox" name="checkbox"/&gt;</pre>
+    {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/color", "color")}}</td>
+   <td>색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.</td>
+   <td id="examplecolor">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="color" name="color"/&gt;</pre>
+    {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/date", "date")}}</td>
+   <td>날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.</td>
+   <td id="exampledate">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="date" name="date"/&gt;</pre>
+    {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
+   <td>날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.</td>
+   <td id="exampledtl">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="datetime-local" name="datetime-local"/&gt;</pre>
+    {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/email", "email")}}</td>
+   <td>이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.</td>
+   <td id="exampleemail">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="email" name="email"/&gt;</pre>
+    {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/file", "file")}}</td>
+   <td>파일을 지정할 수 있는 컨트롤. {{htmlattrxref("accept", "input")}} 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.</td>
+   <td id="examplefile">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="file" accept="image/*, text/*" name="file"/&gt;</pre>
+    {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/hidden", "hidden")}}</td>
+   <td>보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/image", "image")}}</td>
+   <td><code>src</code> 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 {{anch('src')}}를 누락한 경우 {{anch('alt')}} 특성의 텍스트를 대신 보여줍니다.</td>
+   <td id="exampleimage">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="image" name="image" src="" alt="image input"/&gt;</pre>
+    {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/month", "month")}}</td>
+   <td>연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.</td>
+   <td id="examplemonth">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="month" name="month"/&gt;</pre>
+    {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/number", "number")}}</td>
+   <td>
+    <p>숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.</p>
+   </td>
+   <td id="examplenumber">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="number" name="number"/&gt;</pre>
+    {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/password", "password")}}</td>
+   <td>
+    <p>값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.</p>
+   </td>
+   <td id="examplepassword">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="password" name="password"/&gt;</pre>
+    {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/radio", "radio")}}</td>
+   <td>
+    <p>같은 {{anch('name')}} 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.</p>
+   </td>
+   <td id="exampleradio">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="radio" name="radio"/&gt;</pre>
+    {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/range", "range")}}</td>
+   <td>
+    <p>값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 {{anch('min')}} 와 {{anch('max')}} 사이에 사용되며 수용가능한 값의 범위를 정의합니다.</p>
+   </td>
+   <td id="examplerange">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="range" name="range" min="0" max="25"/&gt;</pre>
+    {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/reset", "reset")}}</td>
+   <td>양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다.</td>
+   <td id="examplereset">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="reset" name="reset"/&gt;</pre>
+    {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/search", "search")}}</td>
+   <td>
+    <p>검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.</p>
+   </td>
+   <td id="examplesearch">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="search" name="search"/&gt;</pre>
+    {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/submit", "submit")}}</td>
+   <td>양식을 전송하는 버튼</td>
+   <td id="examplesubmit">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="submit" name="submit"/&gt;</pre>
+    {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/tel", "tel")}}</td>
+   <td>전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.</td>
+   <td id="exampletel">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="tel" name="tel"/&gt;</pre>
+    {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/text", "text")}}</td>
+   <td>
+    <p>디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.</p>
+   </td>
+   <td id="exampletext">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="text" name="text"/&gt;</pre>
+    {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/time", "time")}}</td>
+   <td>시간대가 없는 시간값을 입력하는 콘트롤</td>
+   <td id="exampletime">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="time" name="time"/&gt;</pre>
+    {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/url", "url")}}</td>
+   <td>URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.</td>
+   <td id="exampleurl">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="url" name="url"/&gt;</pre>
+    {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/week", "week")}}</td>
+   <td>시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.</td>
+   <td id="exampleweek">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="week" name="week"/&gt;</pre>
+    {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4">퇴화한 값</th>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime", "datetime")}}</td>
+   <td>
+    <p>{{deprecated_inline}} {{obsolete_inline}} UTC 시간대에 기반한 날짜와 시간(시,분,초 그리고 초의 분수)을 입력하는 콘트롤입니다.</p>
+   </td>
+   <td id="exampledatetime">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="datetime" name="datetime"/&gt;</pre>
+    {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p><code>&lt;input&gt;</code> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 {{htmlattrxref("type", "input")}} 속성이 제일 중요합니다. 모든 <code>&lt;input&gt;</code> 요소는 유형에 상관하지 않고 {{domxref("HTMLInputElement")}} 인터페이스에 기반하므로, 기술적으로는 모든 <code>&lt;input&gt;</code>이 동일한 속성을 가집니다. 그러나 사실 대부분의 속성은 일부 유형에서만 효과를 보입니다. 게다가, 어떤 속성은 유형별로 그 영향이 달라집니다.</p>
+
+<p>여기에서는 모든 속성값들에 대해 간략한 설명을 담은 표를 제공합니다. 이 표 다음에는 각각의 속성을 더욱 상세하게 설명하는 목록이 나오는데, 그들이 연관된 input 유형과 함께 나옵니다. 대부분의 혹은 모든 input 유형에 공통적인 속성들은 그 아래 더욱 상세하게 설명되어 있습니다. 몇몇 input 유형에만 특정하게 해당하는 속성들이나 모든 유형에 공통적으로 해당하지만 특정 유형에 사용될 때 특정한 행동양식을 나타내는 속성들은 그 유형의 해당 페이지에 대신 기술되어 있습니다. 이 요소에는 글로벌 속성들도 포함됩니다. input에 관련된 특별히 중요한 속성들은 하이라이트로 표시되었습니다. </p>
+
+<table class="standard-table">
+ <caption>{{htmlelement('input')}} 요소는 전역 속성(Global Attributes)과 다음 특성을 포함합니다.</caption>
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">유형</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{anch('htmlattrdefaccept', 'accept')}}</td>
+   <td>file</td>
+   <td>파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefalt', 'alt')}}</td>
+   <td>image</td>
+   <td>이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td>
+   <td>all</td>
+   <td>양식 자동생성 기능 (form autofill) 암시</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td>
+   <td>all</td>
+   <td>페이지가 로딩될때 양식 제어에 오토포커스</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefcapture', 'capture')}}</td>
+   <td>file</td>
+   <td>파일 업로드 제어에서 input 방식에서 미디어 capture </td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefchecked', 'checked')}}</td>
+   <td>radio, checkbox</td>
+   <td>커맨드나 컨트롤이 체크 되었는지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdirname', 'dirname')}}</td>
+   <td>text, search</td>
+   <td>양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td>
+   <td>all</td>
+   <td>양식 컨트롤이 비활성화되었는지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefform', 'form')}}</td>
+   <td>all</td>
+   <td>컨트롤을 양식 요소와 연결</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformaction', 'formaction')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 URL 사용하기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td>
+   <td>image, submit</td>
+   <td>양식의 데이터 인코딩 유형이 양식 전송시 사용될 것</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 HTTP 방식을 사용</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 양식 컨트롤 확인을 무시하기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 브라우징 맥락</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefheight', 'height')}}</td>
+   <td>image</td>
+   <td>이미지 높이에서  <code>height</code> 속성과 같음</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeflist', 'list')}}</td>
+   <td>almost all</td>
+   <td>datalist 자동입력 옵션의 id 속성값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmax', 'max')}}</td>
+   <td>numeric types</td>
+   <td>최대값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code>의 최대 길이 (문자수) </td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmin', 'min')}}</td>
+   <td>numeric types</td>
+   <td>최소값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefminlength', 'minlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code>의 최소 길이 (문자수)</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td>
+   <td>email, file</td>
+   <td>불리언값. 여러 값을 허용할지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefname', 'name')}}</td>
+   <td>all</td>
+   <td>input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefpattern', 'pattern')}}</td>
+   <td>password, text, tel</td>
+   <td><code>value</code> 가 유효하기 위해 일치해야 하는 패턴</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td>양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></td>
+   <td>almost all</td>
+   <td>불리언값. 이 값은 수정이 불가능함</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></td>
+   <td>almost all</td>
+   <td>불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsize', 'size')}}</td>
+   <td>email, password, tel, text</td>
+   <td>컨트롤의 크기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsrc', 'src')}}</td>
+   <td>image</td>
+   <td>이미지 출처의 주소에서 <code>src</code> 와 같은 속성</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefstep', 'step')}}</td>
+   <td>numeric types</td>
+   <td>유효한 증분적인 (Incremental)값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeftype', 'type')}}</td>
+   <td>all</td>
+   <td>input 양식 컨트롤의 유형</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefvalue', 'value')}}</td>
+   <td>all</td>
+   <td>양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefwidth', 'width')}}</td>
+   <td>image</td>
+   <td>이미지의  <code>width</code> 속성과 같다</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A few additional non-standard attributes are listed following the descriptions of the standard attributes</p>
+
+<h3 id="개별_속성">개별 속성</h3>
+
+<dl>
+ <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt>
+ <dd>
+ <p>Valid for the <code>file</code> input type only, the <code>accept</code> property defines which file types are selectable in a <code>file</code> upload control. See the {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image {{anch("src")}} is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt>
+ <dd>
+ <p><strong>Not</strong> a Boolean attribute, the <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> attribute takes as its value a space separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p>
+
+ <p>The <code>autocomplete</code> attribute is valid on <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code> and <code>password</code>. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types. See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information, including information on password security and how <code>autocomplete</code> is slightly different for <code>hidden</code> than for other input types.</p>
+ </dd>
+ <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p>
+ </div>
+
+ <p>No more than one element in the document may have the <code>autofocus</code> attribute, and <code>autofocus</code> cannot be used on inputs of type <code>hidden</code>, because hidden inputs can't be focused. If put on more than one element, the first one with the attribute receives focus .</p>
+
+ <div class="warning">
+ <p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p>
+ </div>
+
+ <p>For better usability, avoid using <code>autofocus</code>. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.</p>
+ </dd>
+ <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media - microphone, video, or camera - should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>Valid for both <code>radio</code> and <code>checkbox</code> types, <code>checked</code> is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p>
+
+ <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code> and <code>search</code> input types only, the <code>dirname</code> attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the {{anch('name')}} and {{anch('value')}}, the second being the value of the <code>dirname</code> as the name with the value of <code>ltr</code> or <code>rtl</code> being set by the browser.</p>
+
+ <pre class="notranslate"><code class="html">&lt;form action="page.html" method="post"&gt;
+  &lt;label&gt;Fruit: &lt;input type="text" name="fruit" dirname="fruit.dir" value="cherry"&gt;&lt;/label&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;
+&lt;!-- page.html?fruit=cherry&amp;fruit.dir=ltr --&gt;</code>
+</pre>
+
+ <p>When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit.dir=ltr</code> to be sent.</p>
+ </dd>
+ <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p>
+
+ <p>Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt>
+ <dd>
+ <p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code>&lt;form&gt;</code> element in the same document. If this attribute isn't specified, the <code>&lt;input&gt;</code> element is associated with the nearest containing form, if any.</p>
+
+ <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> An input can only be associated with one form.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>height</code> is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s <code>for</code> attribute to link the label with the form control. See the {{anch('the label element')}} below.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt>
+ <dd>
+ <p>Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none<br>
+  <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code></p>
+ </dd>
+ <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt>
+ <dd id="datalist">
+ <p>The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <code>&lt;datalist&gt;</code> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p>
+
+ <pre class="brush: html hidden notranslate">&lt;datalist id="colorsxx"&gt;
+  &lt;option&gt;#ff0000&lt;/option&gt;
+  &lt;option&gt;#ee0000&lt;/option&gt;
+  &lt;option&gt;#dd0000&lt;/option&gt;
+  &lt;option&gt;#cc0000&lt;/option&gt;
+  &lt;option&gt;#bb0000&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="numbersxx"&gt;
+  &lt;option&gt;0&lt;/option&gt;
+  &lt;option&gt;2&lt;/option&gt;
+  &lt;option&gt;4&lt;/option&gt;
+  &lt;option&gt;8&lt;/option&gt;
+  &lt;option&gt;16&lt;/option&gt;
+  &lt;option&gt;32&lt;/option&gt;
+  &lt;option&gt;64&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="fruitsxx"&gt;
+  &lt;option&gt;cherry&lt;/option&gt;
+  &lt;option&gt;banana&lt;/option&gt;
+  &lt;option&gt;mango&lt;/option&gt;
+  &lt;option&gt;orange&lt;/option&gt;
+  &lt;option&gt;blueberry&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="urlsxx"&gt;
+  &lt;option&gt;https://developer.mozilla.org&lt;/option&gt;
+  &lt;option&gt;https://caniuse.com/&lt;/option&gt;
+  &lt;option&gt;https://mozilla.com&lt;/option&gt;
+  &lt;option&gt;https://mdn.github.io&lt;/option&gt;
+  &lt;option&gt;https://www.youtube.com/user/firefoxchannel&lt;/option&gt;
+&lt;/datalist&gt;
+
+&lt;p&gt;&lt;label for="textx"&gt;Text&lt;/label&gt; &lt;input type="text" list="fruitsxx" id="textx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="colorx"&gt;Color&lt;/label&gt; &lt;input type="color" list="colorsxx" id="colorx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="rangex"&gt;Range&lt;/label&gt; &lt;input type="range" min="0" max="64" list="numbersxx" id="rangex"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="numberx"&gt;Number&lt;/label&gt; &lt;input type="number" min="0" max="64" list="numbersxx" id="numberx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="urlx"&gt;URL&lt;/label&gt; &lt;input type="url" list="urlsxx" id="urlx"/&gt;&lt;/p&gt;</pre>
+
+ <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p>
+
+ <p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color.</code>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p>
+
+ <p>Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the <a href="/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility">browser compatibility table</a> for the other input types.</p>
+
+ <p>See the {{htmlelement('datalist')}} element.</p>
+ </dd>
+ <dt id="htmlattrdefmax"><a href="/en-US/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt>
+ <dd>
+ <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the greatest value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p>
+ </dd>
+ <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the maximum number of characters (as UTF-16 code units) the user can enter into the field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+ <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the <code>maxlength</code> attribute. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt>
+ <dd>
+ <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the most negative value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element is less than this this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a number, then the element has no minimum value.</p>
+
+ <p>This value must be less than or equal to the value of the <code>max</code> attribute. If the <code>min</code> attribute is present by is not specified or is invalid, no <code>min</code> value is applied. If the <code>min</code> attribute is valid and a non-empty value is less than the minimum allowed by the <code>min</code> attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p>
+
+ <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt>
+ <dd>
+ <p>The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the <code>file</code> input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt>
+ <dd>
+ <p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.</p>
+
+ <h5 id="Whats_in_a_name">What's in a name</h5>
+
+ <p>Consider the <code>name</code> a required attribute (even though it's not). If an input has no <code>name</code> specified, or <code>name</code> is empty, the input's value is not submitted with the form. (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)</p>
+
+ <p>There are two special cases:</p>
+
+ <ol>
+  <li><code>_charset_</code> : If used as the name of an <code>&lt;input&gt;</code> element of type <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>, the input's <code>value</code> is automatically set by the <a class="glossaryLink" href="/en-US/docs/Glossary/user_agent" title="user agent: A user agent is a computer program representing a person, for example, a browser in a Web context.">user agent</a> to the character encoding being used to submit the form.</li>
+  <li><code>isindex</code>: For historical reasons, the name <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> is not allowed.</li>
+ </ol>
+
+ <h5 id="name_and_radio_buttons"><code>name</code> and radio buttons</h5>
+
+ <p>The {{anch('name')}} attribute creates a unique behavior for radio buttons.</p>
+
+ <p>Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,</p>
+
+ <p>When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.</p>
+
+ <p>Once one of the radio buttons in a group has focus, using the arrow keys will navigate thru all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.</p>
+
+ <h5 id="domxrefHTMLFormElement.elements">{{domxref("HTMLFormElement.elements")}}</h5>
+
+ <p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p>
+
+ <pre class="brush: js notranslate">let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+</pre>
+
+ <p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p>
+
+ <div class="warning">
+ <p><strong>Warning:</strong> You should avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt>
+ <dd>
+ <div id="pattern-include">
+ <p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.</p>
+
+ <p>If the <code>pattern</code> attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.</p>
+
+ <div class="note">
+ <p><strong>Tip:</strong> If using the <code>pattern</code> attribute, inform the user about the expected format by including explanatory text nearby. You can also include a {{htmlattrxref("title", "input")}} attribute to explain what the requirements are to match the pattern; most browsers will display this title as as a tooltip The visible explanation is required for accessibilty. The tooltip is an enhancement.</p>
+ </div>
+ </div>
+
+ <p>See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt>
+ <dd>
+ <p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> The <code>placeholder</code> attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The <code>readonly</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>password</code> input types.</p>
+
+ <p>See the <a href="/en-US/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> for more information.</p>
+ </dd>
+ <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt>
+ <dd>
+ <p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and <code>file</code>.</p>
+
+ <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p>
+ </dd>
+ <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt>
+ <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and text <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For password and text it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd>
+ <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt>
+ <dd>
+ <div id="step-include">
+ <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p>
+
+ <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p>
+
+ <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified. For example, if we have <code>&lt;input type="number" min="10" step="2"&gt;</code> any even integer, 10 or great, is valid. If omitted, <code>&lt;input type="number"&gt;</code>, any integer is valid, but floats, like 4.2, are not valid, as <code>step</code> defaults to 1. For 4.2 to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <code>&lt;input type="number" min="-5.2"&gt;</code></p>
+
+ <div class="note">
+ <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass</p>
+ </div>
+ </div>
+
+ <p>The default stepping value for <code>number</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second, with 900 being equal to 15 minutes.</p>
+
+ <p>See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p>
+
+ <p>Permitted values are listed in {{anch("&lt;input&gt; types")}} above.</p>
+ </dd>
+ <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt>
+ <dd>
+ <p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's <code>value</code> property. The <code>value</code> attribute is always optional, though should be considered mandatory for <code>checkbox</code>, <code>radio</code>, and <code>hidden</code>.</p>
+ </dd>
+ <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_attributes">Non-standard attributes</h3>
+
+<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Sets the orientation of the range slider. <strong>Firefox only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="A_simple_input_box">A simple input box</h3>
+
+<pre class="brush: html notranslate">&lt;!-- A basic input --&gt;
+&lt;input type="text" name="input" value="Type here"&gt;
+</pre>
+
+<p><input></p>
+
+<h3 id="A_common_use-case_scenario">A common use-case scenario</h3>
+
+<pre class="brush: html notranslate">&lt;!-- A common form that includes input tags --&gt;
+&lt;form action="getform.php" method="get"&gt;
+    &lt;label&gt;First name: &lt;input type="text" name="first_name" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;label&gt;Last name: &lt;input type="text" name="last_name" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;label&gt;E-mail: &lt;input type="email" name="user_email" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.input")}}</p>
diff --git a/files/ko/web/html/element/input/radio/index.html b/files/ko/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..827c5005d5
--- /dev/null
+++ b/files/ko/web/html/element/input/radio/index.html
@@ -0,0 +1,367 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/Input/radio
+tags:
+  - Element
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Types
+  - Reference
+  - 라디오
+  - 라디오 그룹
+  - 라디오 버튼
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>radio</code></strong> 유형의 {{htmlelement("input")}} 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, <strong>라디오 그룹</strong>에 사용합니다.</span> 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>
+
+
+
+<div id="Basic_example">
+<p>오래된 라디오의 버튼과 비슷한 형태와 동작 방식을 가졌기에 라디오 버튼이라고 부릅니다.</p>
+
+<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: <a href="/ko/docs/Web/HTML/Element/input/checkbox">체크박스</a>도 라디오 버튼과 비슷하지만 중요한 차이점이 하나 있습니다. 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용하지만, 체크박스는 각각의 값을 켜고 끌 수 있다는 점입니다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나를 허용하고, 체크박스는 여러 개 선택을 허용합니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>라디오 버튼의 값을 나타내는 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{event("change")}}, {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>지원하는 공통 특성</strong></td>
+   <td><code>checked</code>, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>{{anch("checked")}}</code>, <code>{{anch("value")}}</code></td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>The <code>value</code> attribute is a {{domxref("DOMString")}} containing the radio button's value. The value is never shown to the user by their {{Glossary("user agent")}}. Instead, it's used to identify which radio button in a group is selected.</p>
+
+<h3 id="라디오_그룹_정의하기">라디오 그룹 정의하기</h3>
+
+<p>A radio group is defined by giving each of radio buttons in the group the same {{htmlattrxref("name", "input")}}. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.</p>
+
+<p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p>
+
+<p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the {{htmlattrxref("value", "input")}} <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p>
+
+<p>The resulting HTML looks like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's {{htmlattrxref("for", "label")}} attribute to associate the labels with the radio buttons.</p>
+
+<p>You can try out this example here:</p>
+
+<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p>
+
+<h3 id="라디오_그룹의_데이터_표현">라디오 그룹의 데이터 표현</h3>
+
+<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=<var>value</var></code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p>
+
+<p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p>
+
+<div class="note">
+<p><strong>Note</strong>: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.</p>
+</div>
+
+<p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See {{anch("Selecting a radio button by default")}} below.</p>
+
+<p>Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+           name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice2"
+           name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice3"
+           name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>Then we add some <a href="/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:</p>
+
+<pre class="brush: js">var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = output + entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);</pre>
+
+<p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p>
+
+<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, <code>radio</code> inputs support the following attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>The string to use as the value of the radio when submitting the form, if the radio is currently toggled on</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.</p>
+
+<p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p>The <code>value</code> attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type <code>radio</code>: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section {{anch("Value")}} above.</p>
+
+<h2 id="라디오_입력_칸_사용하기">라디오 입력 칸 사용하기</h2>
+
+<p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p>
+
+<h3 id="기본_선택_항목_지정하기">기본 선택 항목 지정하기</h3>
+
+<p>To make a radio button selected by default, you simply include <code>checked</code> attribute, as shown in this revised version of the previous example:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('기본_선택_항목_지정하기', 600, 130)}}</p>
+
+<p>In this case, the first radio button is now selected by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p>
+</div>
+
+<h3 id="라디오_버튼의_클릭_범위_키우기">라디오 버튼의 클릭 범위 키우기</h3>
+
+<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p>
+
+<p>Beyond accessibility, this is another good reason to properly set up <code>&lt;label&gt;</code> elements on your forms.</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p>
+
+<h2 id="스타일링">스타일링</h2>
+
+<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Please select your preferred contact method:&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="phone"&gt;
+      &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="mail"&gt;
+      &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p>
+
+<p>The CSS involved is a bit more significant:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}</pre>
+
+<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p>
+
+<div class="note">
+<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p>
+</div>
+
+<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p>
+
+<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-radio")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li>
+ <li>{{domxref("RadioNodeList")}}: the interface that describes a list of radio buttons</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>