diff options
Diffstat (limited to 'files/ko/web/html/element/output/index.html')
| -rw-r--r-- | files/ko/web/html/element/output/index.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/files/ko/web/html/element/output/index.html b/files/ko/web/html/element/output/index.html new file mode 100644 index 0000000000..24e154783d --- /dev/null +++ b/files/ko/web/html/element/output/index.html @@ -0,0 +1,104 @@ +--- +title: '<output>: 출력 요소' +slug: Web/HTML/Element/output +tags: + - Element + - HTML + - HTML forms + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/output +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><output></code> 요소</strong>는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOutputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>스페이스로 구분한, 다른 여러 요소 {{htmlattrxref("id")}}의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><output></code>과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 <code><output></code>을 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>요소의 이름. {{domxref("HTMLFormElement.elements", "form.elements")}} API에서 사용합니다.</dd> +</dl> + +<p><code><output></code>의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" id="b" name="b" value="50" /> + + <input type="number" id="a" name="a" value="10" /> = + <output name="result" for="a b">60</output> +</form></pre> + +<p>{{ EmbedLiveSample('예제')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>많은 브라우저는 <code><output></code>을 마치 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 <code><output></code> 내부의 UI 상호작용 결과를 표현할 것입니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.output")}}</p> |