diff options
Diffstat (limited to 'files/ko/web/html/element')
120 files changed, 20819 insertions, 0 deletions
diff --git a/files/ko/web/html/element/a/index.html b/files/ko/web/html/element/a/index.html new file mode 100644 index 0000000000..680f85b9b6 --- /dev/null +++ b/files/ko/web/html/element/a/index.html @@ -0,0 +1,489 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><a></code> 요소</strong>(앵커 요소)는 {{htmlattrxref("href", "a")}} 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.</span> <code><a></code> 안의 콘텐츠는 링크 목적지의 설명을 <strong>나타내야 합니다</strong>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + + + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("download")}}</dt> + <dd>링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다. + <ul> + <li>값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다. + <ul> + <li>{{HTTPHeader("Content-Disposition")}} HTTP 헤더</li> + <li><a href="/ko/docs/Web/API/URL/pathname">URL 경로</a>의 마지막 조각</li> + <li>{{glossary("MIME type", "미디어 유형")}} ({{HTTPHeader("Content-Type")}} 헤더, <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>의 시작 부분, <a href="/ko/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>의 {{domxref("Blob.type")}}에서 알아냄)</li> + </ul> + </li> + <li>값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. <code>/</code>와 <code>\</code> 문자는<code>_</code>로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.</li> + </ul> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code>download</code>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 URL</a>과 <code>blob:</code>, <code>data:</code> 스킴에서만 작동합니다.</li> + <li><code>Content-Disposition</code>의 <code>filename</code>이 <code>download</code>와 다를 땐 헤더가 우선권을 가집니다. (<code>Content-Disposition: inline</code>일 때, Firefox는 헤더를 우선하고 Chrome은 <code>download</code>를 우선합니다.)</li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.</p> + + <ul> + <li>페이지 구획을 가리키는 프래그먼트 URL</li> + <li>미디어 파일 일부를 가리키는 미디어 프래그먼트</li> + <li><code>tel:</code> URL을 사용하는 전화번호</li> + <li><code>mailto:</code> URL을 사용하는 이메일 주소</li> + <li>웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 통해 지원할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 <a href="/ko/docs/Web/HTML/Global_attributes/lang">전역 <code>lang</code> 특성</a>과 동일합니다.</dd> + <dt>{{HTMLAttrDef("ping")}}</dt> + <dd>하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 {{HTTPMethod("POST")}} 요청을 전송합니다. 대개 추적 용도로 사용합니다.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>URL을 가져올 때 사용할 리퍼러. {{httpheader("Referrer-Policy")}} 문서에서 가능한 값과 효과를 확인하세요.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 목록.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <code><iframe></code>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: URL을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> <code>target</code>을 사용할 때, <code>rel="noreferrer"</code>를 추가해 <code>window.opener</code> API의 악의적인 사용을 방지하는걸 고려하세요.</p> + </div> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 <code>rel="noopener"</code>를 적용한 것과 같은 동작을 합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Hinted at the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. + <div class="note"> + <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values. + <div class="note"> + <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>The shape of the hyperlink’s region in an image map. + <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div> + </dd> +</dl> +</div> + +<h2 id="속성">속성</h2> + +<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#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</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>. <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>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td> + <p><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 플로우 콘텐츠를 허용하는 모든 요소. 단, 다른 <code><a></code> 요소는 불가능.</p> + </td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code>href</code> 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td> + <p><code>href</code> 특성이 존재할 경우,</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p><code>href</code> 특성이 존재하지 않을 경우,</p> + + <ul> + <li>모두</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="절대_URL로_연결">절대 URL로 연결</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('절대_URL로_연결')}}</p> + +<h3 id="상대_URL로_연결">상대 URL로 연결</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('상대_URL로_연결')}}</p> + +<h3 id="같은_페이지의_요소로_연결">같은 페이지의 요소로 연결</h3> + +<pre class="brush: html notranslate"><!-- <a> 요소로 아래의 구획에 연결 --> +<p><a href="#Section_further_down"> + 아래 제목으로 건너뛰기 +</a></p> + +<!-- 링크가 향할 제목 --> +<h2 id="Section_further_down">아래의 제목</h2> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>href="#top"</code>이나 빈 프래그먼트(<code>href="#"</code>)를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 명세</a>를 확인하세요.</p> +</div> + +<h3 id="이메일_주소로_연결">이메일 주소로 연결</h3> + +<p>사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 <code>mailto:</code> 스킴을 사용하세요.</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>제목과 본문 포함 등, <code>mailto:</code> URL에 관한 자세한 내용은 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#이메일_링크">이메일 링크</a>와 {{RFC(6068)}}을 참고하세요.</p> + +<h3 id="전화번호로_연결">전화번호로 연결</h3> + +<ul> +</ul> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> 링크는 장치의 능력에 따라 행동이 바뀝니다.</p> + +<ul> + <li>휴대전화에서는 번호를 자동으로 입력합니다.</li> + <li>대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.</li> + <li>웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 사용해 전화를 걸 수 있습니다. <code>web.skype.com</code>을 참고하세요.</li> + <li>다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.</li> +</ul> + +<p><code>tel:</code> URL의 구문, 추가 기능, 그 외 더 자세한 정보는 {{RFC(3966)}}을 참고하세요.</p> + +<h3 id="download_특성으로_<canvas>를_PNG로_저장하기"><code>download</code> 특성으로 <code><canvas></code>를 PNG로 저장하기</h3> + +<p>{{htmlattrxref("download", "a")}} 특성과 <code>data:</code> URL을 사용해 {{HTMLElement("canvas")}} 요소의 콘텐츠를 이미지로 저장할 수 있습니다.</p> + +<h4 id="저장_링크를_가진_그림판_예제">저장 링크를 가진 그림판 예제</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>마우스 드래그로 그림을 그려보세요. + <a href="" download="my_painting.png">다운로드</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); +c.fillStyle = 'hotpink'; + +function draw(x, y) { + if (isDrawing) { + c.beginPath(); + c.arc(x, y, 10, 0, Math.PI*2); + c.closePath(); + c.fill(); + } +} + +canvas.addEventListener('mousemove', event => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +); +</pre> + +<h5 id="결과_3">결과</h5> + +<p>{{EmbedLiveSample('저장_링크를_가진_그림판_예제', '100%', '400')}}</p> + +<h2 id="Specifications" name="Specifications">보안과 개인정보</h2> + +<p><code><a></code> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> 헤더: 개인정보와 보안 고려사항</a> 문서에서 자세한 내용을 알아보세요.</p> + +<p><code>target="_blank"</code>를 <code>rel="noreferrer"</code>와 <code>rel="noopener"</code> 없이 사용하면 웹사이트가 {{domxref("Window.opener", "window.opener")}} API 악용 공격에 취약해집니다. (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">취약점 설명</a>) 다만, 최근 브라우저(Firefox 79+ 등)는 <code>target="_blank"</code>를 지정하면 임의로 <code>rel="noopener"</code> 설정과 동일한 보호 수준을 적용합니다.</p> + +<h2 id="Specifications" name="Specifications">접근성</h2> + +<h3 id="강한_링크_텍스트">강한 링크 텍스트</h3> + +<p>링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.</p> + +<h4 id="접근성_떨어지는_약한_링크_텍스트">접근성 떨어지는 약한 링크 텍스트</h4> + +<p>심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.</p> + +<pre class="brush: html example-bad notranslate"><p> + 저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요. +</p> +</pre> + +<h4 id="강한_링크_텍스트_2">강한 링크 텍스트</h4> + +<p>다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!</p> + +<pre class="brush: html example-good notranslate"><p> + 저희의 <a href="/products">제품을 더 알아보세요</a>. +</p></pre> + +<p>접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.</p> + +<h3 id="onclick_이벤트"><code>onclick</code> 이벤트</h3> + +<p>앵커 요소의 <code>href</code>를 <code>#</code>이나 <code>javascript:void(0)</code>으로 지정해 페이지 새로고침을 막고, <code>click</code> 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.</p> + +<p>이런 가짜 <code>href</code> 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.</p> + +<p>대신 {{HTMLElement("button")}}을 사용하세요. <strong>하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다</strong>.</p> + +<h3 id="외부_링크와_비_HTML_리소스_링크">외부 링크와 비 HTML 리소스 링크</h3> + +<p><code>target="_blank"</code>로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.</p> + +<p>시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.</p> + +<h4 id="새로운_탭창을_여는_링크">새로운 탭/창을 여는 링크</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://ko.wikipedia.org"> + 위키백과 (새 탭에서 열림) +</a> +</pre> + +<h4 id="비_HTML_리소스_링크">비 HTML 리소스 링크</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 연간 보고서 (PowerPoint) +</a> +</pre> + +<p>아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요.</p> + +<pre class="brush: html notranslate"><a target="_blank" href="https://ko.wikipedia.org"> + 위키백과 + <img alt="(새 탭에서 열림)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + 2017 연간 보고서 + <img alt="(PowerPoint 파일)" src="ppt-icon.svg"> +</a></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="건너뛰기_링크">건너뛰기 링크</h3> + +<p><strong>건너뛰기 링크</strong>(skip link)는 {{HTMLElement("body")}} 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.</p> + +<pre class="brush: html notranslate"><body> + <a href="#content">내용으로 건너뛰기</a> + + <header> + … + </header> + + <main id="content"> <!-- 여기로 건너뜀 --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.</p> + +<p>건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="크기와_간격">크기와 간격</h3> + +<h4 id="크기">크기</h4> + +<p>링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS 픽셀</a> 크기를 권고합니다.</p> + +<p>산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="간격">간격</h4> + +<p>링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p> + +<p>간격은 {{CSSxRef("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</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("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrer</code>attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("link")}}는 <code><a></code>와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.</li> + <li>{{CSSxRef(":link")}}는 유효한 <code>href</code> 특성을 가진 <code><a></code> 요소를 선택하는 CSS 의사 클래스입니다.</li> +</ul> diff --git a/files/ko/web/html/element/abbr/index.html b/files/ko/web/html/element/abbr/index.html new file mode 100644 index 0000000000..7deefb3ce3 --- /dev/null +++ b/files/ko/web/html/element/abbr/index.html @@ -0,0 +1,194 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/abbr +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><abbr></code> 요소</strong>는 준말 또는 머리글자를 나타냅니다.</span> 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. <code>title</code> 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + + + +<table class="htmlelt"> + <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#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</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#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다. 단, 다른 요소와 달리 <code><abbr></code> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, <code>title</code>은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 <code>title</code>의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.</p> + +<p>각각의 <code><abbr></code> 요소는 서로 독립적입니다. 하나의 요소에 <code>title</code>을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="많이_쓰이는_곳">많이 쓰이는 곳</h3> + +<p>당연히 모든 준말을 <code><abbr></code>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.</p> + +<ul> + <li>사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 {{htmlattrxref("title")}} 특성을 지정한 <code><abbr></code> 요소를 사용하세요.</li> + <li>독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 <code><abbr></code>과 함께 <code>title</code> 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.</li> + <li>준말임을 명시적으로 나타내야 할 경우 <code><abbr></code> 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.</li> + <li><code><abbr></code>을 {{HTMLElement("dfn")}}과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 {{anch("준말 정의하기")}}을 참고하세요.</li> +</ul> + +<h3 id="문법_고려사항">문법 고려사항</h3> + +<p>수량이 문법에 영향을 미치는 언어(one apple vs. two apple<strong>s</strong>)의 경우, <code><abbr></code> 요소의 텍스트와 <code>title</code> 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.</p> + +<h2 id="기본_스타일">기본 스타일</h2> + +<p><code><abbr></code>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}<code>: inline</code>)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.</p> + +<ul> + <li>Internet Explorer 등 일부 브라우저는 {{HTMLElement("span")}} 요소와 동일하게 그립니다.</li> + <li>Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.</li> + <li>몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS {{cssxref('font-variant')}}를 <code>none</code>으로 설정하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="준말임을_나타내기">준말임을 나타내기</h3> + +<p>설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <code><abbr></code>을 다른 특성 없이 사용하세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("준말임을_나타내기")}}</p> + +<h3 id="준말_스타일링">준말 스타일링</h3> + +<p>CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("준말_스타일링")}}</p> + +<h3 id="펼친_형태_보여주기">펼친 형태 보여주기</h3> + +<p>{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big +time.</p></pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("펼친_형태_보여주기")}}</p> + +<h3 id="준말_정의하기">준말 정의하기</h3> + +<p><code><abbr></code>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> is a markup language used to create the semantics and structure +of a web page.</p> + +<p>A <dfn id="spec">Specification</dfn> +(<abbr title="Specification">spec</abbr>) is a document that outlines +in detail how a technology or API is intended to function and how it is +accessed.</p></pre> + +<h4 id="결과_4">결과</h4> + +<p>{{EmbedLiveSample("준말_정의하기", 600, 120)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html notranslate"><p>JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.</p> +</pre> + +<p>무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.</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', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> diff --git a/files/ko/web/html/element/address/index.html b/files/ko/web/html/element/address/index.html new file mode 100644 index 0000000000..cd43856ceb --- /dev/null +++ b/files/ko/web/html/element/address/index.html @@ -0,0 +1,128 @@ +--- +title: <address> +slug: Web/HTML/Element/address +tags: + - Element + - HTML + - HTML sections + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><address></code> 요소</strong>는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</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><code><address></code> 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.</p> + +<p><code><address></code>는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, {{HTMLElement("article")}} 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다음의 요소는 사용할 수 없습니다.<br> + 다른 <code><address></code>, 제목 콘텐츠 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 구획 콘텐츠 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), {{HTMLElement("header")}}, {{HTMLElement("footer")}} 요소.</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>를 허용하는 모든 요소. 단, <code><address></code> 요소 제외.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>기존 명세에서의 <code><address></code> 요소는 문서 작성자의 연락처만 나타내는 요소였습니다. 그러나 최신 명세에서 임의의 연락처를 포함할 수 있도록 수정됐습니다.</li> + <li>연락처 외의 정보(출판일 등)를 담아서는 안됩니다.</li> + <li>보통, 현재 구획에 {{htmlelement("footer")}} 요소가 존재하면 <code><address></code>를 그 안에 배치할 수 있습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <code><address></code>를 사용해 글 작성자의 연락처를 구별하는 모습을 보입니다.</p> + +<pre class="brush: html notranslate"><address> + You can contact author at <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com"> + contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA +</address> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "300", "200")}}</p> + +<p>비록 겉보기는 {{HTMLElement("i")}}나 {{HTMLElement("em")}} 요소와 같지만, <code><address></code> 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 <code><address></code>가 더 적합합니다.</p> + +<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', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.address")}}</p> diff --git a/files/ko/web/html/element/applet/index.html b/files/ko/web/html/element/applet/index.html new file mode 100644 index 0000000000..274b0635db --- /dev/null +++ b/files/ko/web/html/element/applet/index.html @@ -0,0 +1,115 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +<div>{{obsolete_header}}</div> + +<h2 id="개요">개요</h2> + +<p>HTML의 Applet 태그 (<code><applet></code>) 는 자바 애플릿을 보이게 하는 곳에 쓰입니다.</p> + +<div class="note"> +<p><strong>사용시 참고: </strong>This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the more generic {{HTMLElement("object")}} element.</p> +</div> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, and <strong>texttop</strong>.</dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code><applet></code> element may also be rendered as alternative text.</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>This attribute specifies the height, in pixels, that the applet needs.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>This attribute specifies the URL of a serialized representation of an applet.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>This attribute specifies in pixels the width that the applet needs.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>죄송합니다. 이 게임을 플레이하려면 자바가 설치되어 있어야 합니다.</b> +</applet> +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notes">Notes</h2> + +<p>The W3C specification does not encourage the use of <code><applet></code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/area/index.html b/files/ko/web/html/element/area/index.html new file mode 100644 index 0000000000..4c3f6d93a7 --- /dev/null +++ b/files/ko/web/html/element/area/index.html @@ -0,0 +1,184 @@ +--- +title: <area> +slug: Web/HTML/Element/area +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><area></code> 요소</strong>는 이미지의 핫스팟 영역을 정의하고 {{glossary("hyperlink", "하이퍼링크")}}를 추가할 수 있습니다. {{htmlelement("map")}} 요소 안에서만 사용할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</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> + <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>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 존재해야 하며 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소. 단, 조상 중 {{htmlelement("map")}} 요소가 존재해야 합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{htmlattrxref("href", "area")}} 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAreaElement")}}</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("alt")}}</dt> + <dd>이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. {{htmlattrxref("href", "area")}} 특성이 존재할 경우 필수 사항입니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 <code>shape</code> 특성의 값에 따라 달라집니다.</dd> + <dd> + <ul> + <li><code>rect</code>: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다.</li> + <li><code>circle</code>: <code>x,y,r</code>로서 <code>x,y</code>는 원의 중심 좌표이며 <code>r</code>은 반지름입니다.</li> + <li><code>poly</code>: 다각형의 꼭지점을 나타내는 다수의 x, y 쌍(<code>x1,y1,x2,y2,x3,y3,...</code>)입니다.</li> + </ul> + 값의 단위는 CSS 픽셀입니다.</dd> + <dt>{{htmlattrdef("download")}}</dt> + <dd>특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. {{htmlelement("a")}}의 {{htmlattrxref("download", "a")}} 특성 설명에서 전체 설명을 볼 수 있습니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd><code><area></code> 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 <code><area></code> 요소는 하이퍼링크를 나타내지 않습니다.</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>연결한 리소스의 언어를 나타냅니다. 가능한 값은 <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>에 따릅니다. {{htmlattrxref("href", "area")}} 특성이 존재할 때만 사용하세요.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 <code>PING</code>으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li> + <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li> + <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다. + <ul> + <li><code>_self</code>: 결과를 현재 HTML4 프레임 또는 HTML5 브라우징 컨텍스트에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.</li> + <li><code>_blank</code>: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.</li> + <li><code>_parent</code>: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.</li> + <li><code>_top</code>: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.</li> + </ul> + 이 속성은 <strong>href</strong> 속성이 존재할떄만 사용합니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd> + <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt> + <dd>Indicates that no hyperlink exists for the associated area. + <div class="note"> + <p><strong>Note: </strong>Since HTML5, omitting the <code>href</code> attribute is sufficient.</p> + </div> + </dd> + <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt> + <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but <a href="https://html.spec.whatwg.org/multipage/#the-area-element">the canonical HTML specification</a> doesn’t, and it has no effect in any user agents.)</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><map name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 360, 160)}}</p> + +<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.area")}}</p> diff --git a/files/ko/web/html/element/article/index.html b/files/ko/web/html/element/article/index.html new file mode 100644 index 0000000000..6602a7722e --- /dev/null +++ b/files/ko/web/html/element/article/index.html @@ -0,0 +1,137 @@ +--- +title: <article> +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><article></code> 요소</strong>는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.</span> 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.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> + +<p>하나의 문서가 여러 개의 <code><article></code>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <code><article></code> 요소가 되며, 그 안에는 또 여러 개의 {{htmlelement("section")}}이 존재할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></dfn></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>가능한 콘텐츠</dfn></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>태그 생략</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>가능한 부모 요소</dfn></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br> + <code><article></code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ariarole("article")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>각각의 <code><article></code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code><article></code>의 자식으로 포함하는 방법을 사용합니다.</li> + <li><code><article></code> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <code><article></code> 요소 안에 중첩한 <code><article></code>로 나타낼 수 있습니다.</li> + <li><code><article></code> 요소의 작성자 정보를 {{HTMLElement("address")}} 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 <code><article></code>에는 적용되지 않습니다.</li> + <li><code><article></code> 요소의 작성일자와 시간은 {{HTMLElement("time")}} 요소의 {{htmlattrxref("datetime", "time")}} 속성을 이용하여 설명할 수 있습니다. 참고로 {{HTMLElement("time")}} 요소의 {{htmlattrxref("pubdate", "time")}} 속성은 더 이상 {{glossary("W3C")}} {{glossary("HTML5")}} 표준안에 포함되지 않습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. + </p> + </footer> +</article> +</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', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.article")}}</p> diff --git a/files/ko/web/html/element/aside/index.html b/files/ko/web/html/element/aside/index.html new file mode 100644 index 0000000000..416f1d5edc --- /dev/null +++ b/files/ko/web/html/element/aside/index.html @@ -0,0 +1,122 @@ +--- +title: '<aside>: 별도 구획 요소' +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><aside></code> 요소</strong>는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br> + <code><aside></code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 요소</th> + <td>{{ARIARole("feed")}}, {{ariarole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 <code><aside></code>로 나타내선 안됩니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="<aside>_사용하기"><code><aside></code> 사용하기</h3> + +<p>다음 예제는 글 내의 문단을 <code><aside></code>로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.</p> + +<pre class="brush: html"><article> + <p> + 디즈니 만화영화 <em>인어 공주</em>는 + 1989년 처음 개봉했습니다. + </p> + <aside> + 인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다. + </aside> + <p> + 영화에 대한 정보... + </p> +</article></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<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', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 구획과 개요 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/element/audio/index.html b/files/ko/web/html/element/audio/index.html new file mode 100644 index 0000000000..57056b3230 --- /dev/null +++ b/files/ko/web/html/element/audio/index.html @@ -0,0 +1,417 @@ +--- +title: <audio> +slug: Web/HTML/Element/audio +tags: + - Element + - HTML + - HTML embedded content + - HTML5 + - Media + - Multimedia + - Reference + - Web + - 소리 + - 오디오 +translation_of: Web/HTML/Element/audio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><audio></code> 요소</strong>는 문서에 소리 콘텐츠를 포함할 때 사용합니다.</span> <code>src</code> 특성 또는 {{htmlelement("source")}} 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. {{domxref("MediaStream")}}을 사용하면 미디어 스트림을 바라볼 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</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> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>지정한 경우, 전체 오디오 파일의 다운로드를 기다리지 않고 가능한 빠른 시점에 재생을 시작합니다. + <div class="note"><strong>참고</strong>: 오디오 및 오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 피해야 합니다. 반드시 자동 재생을 제공해야 한다면 사용자의 명시적인 동의를 얻어야 하도록 해야 합니다. 그러나, 미디어 소스가 사용자의 선택에 의해 나중에 정해지는 경우라면 자동 재생이 유용할 수 있습니다. <a href="/ko/docs/Web/Media/Autoplay_guide">자동 재생 안내서</a>를 방문하고 추가 정보와 적절한 사용법을 알아보세요.</div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>지정한 경우 오디오 재생, 볼륨, 탐색, 일시 정지 컨트롤을 브라우저에서 제공합니다.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>CORS를 사용해 지정한 오디오 파일을 가져올지 나타내는 열거형 특성. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X.509 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + </dl> + 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin:</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 anonymous 키워드를 사용한 것으로 간주합니다.</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p>Reading <code>currentTime</code> returns a double-precision floating-point value indicating the current playback position, in seconds, of the audio. If the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—<code>currentTime</code> instead indicates, and can be used to change, the time at which playback will begin. Otherwise, setting <code>currentTime</code> sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.</p> + + <p>If the audio is being streamed, it's possible that the {{Glossary("user agent")}} may not be able to obtain some parts of the resource if that data has expired from the media buffer. Other audio may have a media timeline that doesn't start at 0 seconds, so setting <code>currentTime</code> to a time before that would fail. For example, if the audio's media timeline starts at 12 hours, setting <code>currentTime</code> to 3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail. The {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} method can be used to determine the beginning point of the media timeline's reference frame.</p> + </dd> + <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt> + <dd>A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> for more information. + <p class="note">In Safari, you can use <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> as a fallback.</p> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>A double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. If no media is present on the element, or the media is not valid, the returned value is <code>NaN</code>. If the media has no known end (such as for live streams of unknown duration, web radio, media incoming from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, and so forth), this value is <code>+Infinity</code>.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is <code>false</code>.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: + <ul> + <li><code>none</code>: Indicates that the audio should not be preloaded.</li> + <li><code>metadata</code>: Indicates that only audio metadata (e.g. length) is fetched.</li> + <li><code>auto</code>: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.</li> + <li><em>empty string</em>: A synonym of the <code>auto</code> value.</li> + </ul> + + <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> + + <div class="note"><strong>Usage notes:</strong> + + <ul> + <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the audio for playback.</li> + <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the audio to embed. This is subject to <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. This is optional; you may instead use the {{htmlelement("source")}} element within the audio block to specify the audio to embed.</dd> +</dl> + +<p>Time offsets are specified as float values indicating the number of seconds to offset.</p> + +<div class="note"><strong>Note:</strong> The time offset value definition has not yet been completed in the HTML5 specification and is subject to change.</div> + +<h2 id="이벤트">이벤트</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">이벤트 이름</th> + <th scope="col">발생 조건</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>Playback has stopped because of a temporary lack of data</td> + </tr> + </tbody> +</table> + +<h2 id="사용_일람">사용 일람</h2> + +<p>Browsers don't all support the same <a href="/en-US/docs/Web/Media/Formats/Containers">file types</a> and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is + a <a href="myAudio.mp4">link to the audio</a> instead.</p> +</audio></pre> + +<p>We offer a substantive and thorough <a href="/en-US/docs/Web/Media/Formats">guide to media file types</a> and the <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs that can be used within them</a>. Also available is <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a guide to the codecs supported for video</a>.</p> + +<p>Other usage notes:</p> + +<ul> + <li>If you don't specify the <code>controls</code> attribute, the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API.</li> + <li>To allow precise control over your audio content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>. This also provides a way to monitor the audio's fetching process so you can watch for errors or detect when enough is available to begin to play or manipulate it.</li> + <li>You can also use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files.</li> + <li><code><audio></code> elements can't have subtitles or captions associated with them in the same way that <code><video></code> elements can. See <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> by Ian Devlin for some useful information and workarounds.</li> +</ul> + +<p>A good general source of information on using HTML <code><audio></code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> + +<h3 id="Styling_with_CSS">Styling with CSS</h3> + +<p>The <code><audio></code> element has no intrinsic visual output of its own unless the <code>controls</code> attribute is specified, in which case the browser's default controls are shown.</p> + +<p>The default controls have a {{cssxref("display")}} value of <code>inline</code> by default, and it is often a good idea set the value to <code>block</code> to improve control over positioning and layout, unless you want it to sit within a text block or similar.</p> + +<p>You can style the default controls with properties that affect the block as a single unit, so for example you can give it a {{cssxref("border")}} and {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.</p> + +<p>To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the {{domxref("HTMLMediaElement")}} API to wire up their functionality.</p> + +<p><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques — it is written in the context of <code><video></code>, but much of it is equally applicable to <code><audio></code>.</p> + +<h3 id="Detecting_addition_and_removal_of_tracks">Detecting addition and removal of tracks</h3> + +<p>You can detect when tracks are added to and removed from an <code><audio></code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code><audio></code> element itself. Instead, they're sent to the track list object within the <code><audio></code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Even though it's an <code><audio></code> element, it still has video and text track lists, and can in fact be used to present video, although the use interface implications can be odd.</p> +</div> + +<p>For example, to detect when audio tracks are added to or removed from an <code><audio></code> element, you can use code like this:</p> + +<pre class="brush: js">var elem = document.querySelector("audio"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> + +<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p> + +<h2 id="예제">예제</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<p>The following example shows simple usage of the <code><audio></code> element to play an OGG file. It will autoplay due to the <code>autoplay</code> attribute—if the page has permission to do so—and also includes fallback content.</p> + +<pre class="brush: html"><!-- Simple audio playback --> +<audio + src="AudioTest.ogg" + autoplay> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<p>For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our <a href="/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>.</p> + +<h3 id="<audio>_element_with_<source>_element"><audio> element with <source> element</h3> + +<p>This example specifies which audio track to embed using the <code>src</code> attribute on a nested <code><source></code> element rather than directly on the <code><audio></code> element. It is always useful to include the file's MIME type inside the <code>type</code> attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.</p> + +<pre class="brush: html"><audio controls> + <source src="foo.wav" type="audio/wav"> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<h3 id="<audio>_with_multiple_<source>_elements"><audio> with multiple <source> elements</h3> + +<p>This example includes multiple <code><source></code> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:</p> + +<pre class="brush: html"><audio controls> + <source src="foo.opus" type="audio/ogg; codecs=opus"/> + <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="foo.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p> + +<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p> + +<p>The <code><audio></code> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a {{HTMLElement("video")}} element, which does support WebVTT.</p> + +<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.</p> + +<pre>1 +00:00:00 --> 00:00:45 +[Energetic techno music] + +2 +00:00:46 --> 00:00:51 +Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? + +16 +00:00:52 --> 00:01:02 +[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch? +</pre> + +<p>Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <code><audio></code> element is not supported:</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p> + Your browser doesn't support HTML5 audio. + Here is a <a href="myAudio.mp4">link to download the audio</a> instead. + </p> +</audio> + +</pre> + +<ul> + <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<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>. {{htmlattrxref("controls", "audio")}} 특성을 가진 경우, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 및 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>{{htmlattrxref("src", "audio")}} 특성을 가진 경우 0개 이상의 {{htmlelement("track")}} 요소와 그 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p> + + <p>그 외의 경우 0개 이상의 {{HTMLElement("source")}} 요소와 0개 이상의 {{HTMLElement("track")}} 요소, 그리고 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAudioElement")}}</td> + </tr> + </tbody> +</table> + +<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', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a> + + <ul> + <li><a href="/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> + <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li> + <li><a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> +</ul> diff --git a/files/ko/web/html/element/b/index.html b/files/ko/web/html/element/b/index.html new file mode 100644 index 0000000000..e7d54271fa --- /dev/null +++ b/files/ko/web/html/element/b/index.html @@ -0,0 +1,121 @@ +--- +title: <b> +slug: Web/HTML/Element/b +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/b +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><b></code> 요소</strong>는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.</span> 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <code><b></code>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS {{cssxref("font-weight")}}를 사용해 굵은 글씨체를 적용하거나, {{htmlelement("strong")}} 요소를 사용해 특별히 중요한 텍스트를 나타내세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 <code><b></code>를 사용하세요.</li> + <li><code><b></code> 요소와 {{HTMLElement("strong")}}, {{HTMLElement("em")}}, {{HTMLElement("mark")}} 요소를 혼동하지 않도록 주의하세요. {{HTMLElement("strong")}} 요소는 <strong>중요</strong>한 글을, {{HTMLElement("em")}} 요소는 약간의 강조가 필요한 글을, {{HTMLElement("mark")}} 요소는 관련성이 있는 글을 나타냅니다. <code><b></code> 요소는 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용하세요.</li> + <li>비슷한 이유로 <code><b></code> 요소로만 제목을 만들어선 안됩니다. 제목은 {{HTMLElement("h1")}}에서 {{HTMLElement("h6")}} 태그로 표현하세요. 특히 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글씨체일 필요는 없습니다.</li> + <li class="hidden">It is a good practice to use the <strong>class</strong> attribute on the <code><b></code> in order to convey additional semantic information (for example <code><b class="lede"></code> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.</li> + <li>과거 <code><b></code> 요소는 굵을 글씨를 만들 때 사용했습니다. HTML4부터 스타일 정보는 사용하지 않으므로 <code><b></code> 요소의 의미도 바뀌었습니다.</li> + <li><b>의 의미와 관계 없이 굵은 글씨를 사용하고 있다면, CSS {{cssxref("font-weight")}} 속성의 <code>"bold"</code> 값을 사용하는 방법을 고려하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p> + This article describes several <b class="keywords">text-level</b> elements. + It explains their usage in an <b class="keywords">HTML</b> document. +</p> +Keywords are displayed with the default style of the <b>element, likely in bold</b>.</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<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', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.b")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags"><b>와 <i> 요소 사용하기 (W3C)</a></li> +</ul> diff --git a/files/ko/web/html/element/base/index.html b/files/ko/web/html/element/base/index.html new file mode 100644 index 0000000000..0a126d67f4 --- /dev/null +++ b/files/ko/web/html/element/base/index.html @@ -0,0 +1,136 @@ +--- +title: <base> +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><base></code> 요소</strong>는 문서 안의 모든 상대 {{glossary("URL")}}이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <code><base></code> 요소만 존재할 수 있습니다.</p> + +<p>문서의 기준 URL을 스크립트에서 접근해야할 땐 {{domxref('document.baseURI')}}을 사용할 수 있습니다. 문서에 <code><base></code> 요소가 존재하지 않을 때 <code>baseURI</code>의 기본값은 {{domxref("location.href")}}입니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>다른 <code><base></code> 요소를 포함하지 않는 {{htmlelement("head")}} 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBaseElement")}}</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><span style="line-height: 21px;">을 포함합니다.</span></p> + +<div class="blockIndicator warning"> +<p><span style="line-height: 21px;">다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 <code><base></code>가 앞에 위치해야 합니다.</span></p> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><code>target</code> 속성을 명시하지 않은 {{htmlelement("a")}}, {{htmlelement("area")}}, 또는 {{htmlelement("form")}} 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 {{glossary("browsing context", "브라우징 맥락")}}. <strong>키워드</strong>나 <strong>저작자 정의 이름</strong>으로 지정합니다.</dd> + <dd>다음 키워드는 특별한 의미를 갖습니다. + <ul> + <li><code>_self</code> (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.</li> + <li><code>_blank</code>: 결과를 새로 생성한, 이름 없는 브라우징 맥락에 보여줍니다.</li> + <li><code>_parent</code>: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 <code>_self</code>와 동일합니다.</li> + <li><code>_top</code>: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 <code>_self</code>와 동일합니다.</li> + </ul> + </dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="다중_<base>_요소">다중 <code><base></code> 요소</h3> + +<p><code><base></code> 요소가 여러 개 존재하는 경우 첫 <code>href</code>와 첫 <code>target</code>만 사용하며 나머지는 모두 무시합니다.</p> + +<h3 id="페이지_내부_앵커">페이지 내부 앵커</h3> + +<p><code><a href="#some-id"></code>처럼, 문서 프래그먼트를 가리키는 링크 주소도 <code><base></code>를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,</p> + +<ol> + <li><code><base href="https://example.com"></code>을 가정</li> + <li><code><a href="#anchor">Anker</a></code>를 가정</li> + <li>2번의 링크는 <code>https://example.com/#anchor</code>를 가리킵니다.</li> +</ol> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="https://ogp.me/">Open Graph</a> 태그는 <code><base></code>를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<base target="_blank"> +<base target="_target" href="http://www.example.com/page.html"> +</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', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/ko/web/html/element/bdo/index.html b/files/ko/web/html/element/bdo/index.html new file mode 100644 index 0000000000..5a2ffa7887 --- /dev/null +++ b/files/ko/web/html/element/bdo/index.html @@ -0,0 +1,111 @@ +--- +title: '<bdo>: 양방향 텍스트 재정의 요소' +slug: Web/HTML/Element/bdo +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 쓰기 방향 +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><bdo></code> 요소</strong>는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다. + <ul> + <li><code>ltr</code>: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다.</li> + <li><code>rtl</code>: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.</li> + </ul> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- 쓰기 방향 바꾸기 --> +<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p> +<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ko/web/html/element/blockquote/index.html b/files/ko/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..d5392594f4 --- /dev/null +++ b/files/ko/web/html/element/blockquote/index.html @@ -0,0 +1,131 @@ +--- +title: '<blockquote>: 인용 블록 요소' +slug: Web/HTML/Element/blockquote +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference + - Web + - 인용 +translation_of: Web/HTML/Element/blockquote +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><blockquote></code> 요소</strong>는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 {{anch("사용 일람")}}을 참고하세요) 인용문의 출처 URL은 {{htmlattrxref("cite", "blockquote")}} 특성으로, 출처 텍스트는 {{htmlelement("cite")}} 요소로 제공할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</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/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLQuoteElement")}}</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("cite")}}</dt> + <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p>인용문의 들여쓰기를 바꾸려면 {{glossary("CSS")}} {{cssxref("margin-left")}}와 {{cssxref("margin-right")}}, 혹은 {{cssxref("margin")}} 단축 속성을 사용하세요.</p> + +<p>별도의 블록을 쓰지 않아도 될 짧은 인용문은 {{htmlelement("q")}} 요소를 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <code><blockquote></code> 요소를 사용해 {{RFC(1149)}} <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.</cite></p> + +<pre class="brush: html"><blockquote cite="https://tools.ietf.org/html/rfc1149"> + <p>Avian carriers can provide high delay, low + throughput, and low altitude service. The + connection topology is limited to a single + point-to-point path for each carrier, used with + standard carriers, but many carriers can be used + without significant interference with each other, + outside of early spring. This is because of the 3D + ether space available to the carriers, in contrast + to the 1D ether used by IEEE802.3. The carriers + have an intrinsic collision avoidance system, which + increases availability.</p> +</blockquote> +</pre> + +<p>{{EmbedLiveSample("예제", 640, 180)}}</p> + +<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', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.blockquote")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li> + <li>인용문 출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/body/index.html b/files/ko/web/html/element/body/index.html new file mode 100644 index 0000000000..d7d031bcb2 --- /dev/null +++ b/files/ko/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: 문서 본문 요소' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><body></code> 요소</strong>는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <code><body></code> 요소만 존재할 수 있습니다.</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/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">구획 루트</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>태그 내의 첫번째 것이 공백, 주석, {{HTMLElement("script")}}요소, {{HTMLElement("style")}}요소가 아닐경우 시작태그를 생략할수 있습니다. body 요소가 시작태그를 가지고있고, 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("html")}} 요소의 두번째 요소여야 합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Document_Role"><code>document</code></a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li><code><body></code> 요소는 {{domxref("HTMLBodyElement")}} 인터페이스를 노출합니다.</li> + <li>{{domxref("document.body")}} 속성을 통해 <code><body></code> 요소에 접근할 수 있습니다.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>선택한 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":active")}}의 조합을 대신 사용하세요.</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>배경 이미지의 URI. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>배경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background-color")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>아래쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-bottom")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>왼쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-left")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>방문하지 않은 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":link")}}의 조합을 대신 사용하세요.</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>사용자가 문서를 출력한 뒤 호출할 함수.</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>사용자가 문서 출력을 요청했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>문서를 처분<sup>unload</sup>하기 직전에 호출할 함수.</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>문서가 포커스를 상실했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>문서를 제대로 불러오지 못했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>문서가 포커스를 받을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>문서의 현재 주소 중 Fragment identifier part(해시(<code>'#'</code>) 문자로 시작)가 변경됐을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>선호 언어 변경 시 호출할 함수.</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>문서를 다 불러왔을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>문서가 메시지를 받았을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>네트워크 연결이 실패했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>네트워크 연결을 복구했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>사용자가 세션 기록을 따라 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 다시 이후로 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>문서의 크기가 바뀔 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>저장 영역이 변경되었을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 이전으로 이동했을 때 호출할 함수.</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>문서를 처분(unload) 중일 때 호출할 함수.</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>오른쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-right")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>글자의 전경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>위쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-top")}} 속성을 대신 적용하세요.</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>방문했던 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":visited")}}의 조합을 대신 사용하세요.</em></dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><html> + <head> + <title>문서 제목</title> + </head> + <body> + <p>문단입니다</p> + </body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">명세</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', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Changed the list of non-conforming features.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> and <code>marginbottom</code>. Added the <code>on*</code> attributes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> and <code>vlink</code> attributes.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/ko/web/html/element/br/index.html b/files/ko/web/html/element/br/index.html new file mode 100644 index 0000000000..918a0c7486 --- /dev/null +++ b/files/ko/web/html/element/br/index.html @@ -0,0 +1,130 @@ +--- +title: '<br>: 줄바꿈 요소' +slug: Web/HTML/Element/br +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><br></code> 요소</strong>는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.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> + +<p>위 예제에서 확인할 수 있듯, <code><br></code> 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. <code><br></code> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 문단 사이에 여백을 두기 위한 용도로 <code><br></code>을 사용하지 마세요. 대신 {{htmlelement("p")}} 요소로 감싼 후 <a href="/ko/docs/Web/CSS">CSS</a>의 {{cssxref("margin")}} 속성으로 여백의 크기를 조절하세요.</p> +</div> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><br></code> 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도, 외형도 없으므로 스타일을 적용할 것도 거의 없습니다.</p> + +<p><code><br></code> 요소에 {{cssxref("margin")}}을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS {{cssxref("line-height")}} 속성을 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("예제", "100%", "90")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>문단 구분을 <code><br></code>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <code><br></code>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.</p> + +<p>{{htmlelement("p")}} 요소와 함께 CSS {{cssxref("margin")}} 속성 등을 조합해 간격을 조절하세요.</p> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<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', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("address")}} 요소</li> + <li>{{HTMLElement("p")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/button/index.html b/files/ko/web/html/element/button/index.html new file mode 100644 index 0000000000..01f57291a9 --- /dev/null +++ b/files/ko/web/html/element/button/index.html @@ -0,0 +1,293 @@ +--- +title: '<button>: 버튼 요소' +slug: Web/HTML/Element/button +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><button></code> 요소</strong>는 클릭 가능한 버튼을 나타냅니다. 버튼은 <a href="/ko/docs/Learn/HTML/Forms">양식</a> 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.</span> 기본값의 HTML 버튼은 {{glossary("user agent", "사용자 에이전트")}}의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 <a href="/ko/docs/Web/CSS">CSS</a>로 변경할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</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> + +<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>, <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>, <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>를 제외한 <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><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 <strong>하나의 요소</strong>만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd> + <dt class="hidden">{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd class="hidden">This attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. Unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting <code>autocomplete="off"</code> disables this feature; see {{bug(654072)}}.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.</p> + + <p class="hidden">Firefox, unlike other browsers, <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 a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>버튼과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 버튼을 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("formaction")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("action","form")}} 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formenctype</code> 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다. + <ul> + <li><code>application/x-www-form-urlencoded</code>: 기본값.</li> + <li><code>multipart/form-data</code>: {{htmlattrxref("type","input")}} 특성이 <code>file</code>인 {{HTMLElement("input")}}이 존재하는 양식에서 사용하세요.</li> + <li><code>text/plain</code>: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.</li> + </ul> + + <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("enctype","form")}} 특성보다 우선합니다.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formmethod</code> 특성은 양식을 서버로 제출할 때 사용할 <a href="/ko/docs/Web/HTTP/Methods">HTTP 메서드</a>를 지정합니다. 가능한 값은 다음과 같습니다. + <ul> + <li><code>post</code>: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.</li> + <li><code>get</code>: 양식 <code>action</code> URL 뒤에 <code>?</code> 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.</li> + </ul> + + <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("method","form")}} 특성보다 우선합니다.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formnovalidate</code> 특성은 양식을 제출할 때 <a href="/ko/docs/Learn/Forms/Form_validation">유효성 검사</a>를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("novalidate","form")}} 특성보다 우선합니다.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd><code><button></code>이 제출 버튼인 경우, <code>formtarget</code> 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>버튼의 이름. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>버튼의 행동 방식. 가능한 값은 다음과 같습니다. + <ul> + <li><code>submit</code>: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.</li> + <li><code>reset</code>: <code><input type="reset"></code>처럼, 모든 컨트롤을 초깃값으로 되돌립니다.</li> + <li><code>button</code>: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>버튼의 초깃값. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd> +</dl> + +<h2 id="참고">참고</h2> + +<p><code><button></code> 요소는 {{HTMLElement("input")}} 요소보다 스타일을 적용하기 훨씬 수월합니다. <code><input></code>은 <code>value</code> 특성에 텍스트 값밖에 지정할 수 없지만, <code><button></code>은 내부 HTML 콘텐츠(<code><em></code>, <code><strong></code>, 심지어 <code><img></code>도)에 더해 {{Cssxref("::after")}}와 {{Cssxref("::before")}} 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.</p> + +<p>양식 제출용 버튼이 아니라면 <code>type</code> 특성을 <code>button</code>으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:html"><button name="button">눌러보세요</button> +</pre> + +<p>{{ EmbedLiveSample('예제', 200, 64) }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="아이콘_버튼">아이콘 버튼</h3> + +<p>아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.</p> + +<p>아이콘 버튼에 접근 가능한 이름을 부여하려면, <code><button></code> 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> + Add to favorites +</button> +</pre> + +<p id="Result_3">텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">CSS 속성을 조합</a>해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.</p> + +<p>그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="크기와_간격">크기와 간격</h3> + +<h4 id="크기">크기</h4> + +<p>버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a class="external external-icon" href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" rel="noopener">CSS 픽셀</a> 크기를 권고합니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h4 id="간격">간격</h4> + +<p>버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p> + +<p>간격은 {{cssxref("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<div class="hidden"> +<h3 id="Firefox">Firefox</h3> + +<p>Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <code><a href="/en-US/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a></code>.</p> + +<p>If overridden, it is important to <strong>ensure that the state change when focus is moved to the button is high enough</strong> that people experiencing low vision conditions will be able to perceive it.</p> + +<p>Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> +</div> + +<h3 id="클릭과_포커스">클릭과 포커스</h3> + +<p><code><button></code>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 {{HTMLElement("input")}}이 <code>type="button"</code> 또는 <code>type="submit"</code>일 때도 동일합니다.</p> + +<table> + <caption>{{HTMLElement("button")}}을 클릭했을 때 포커스를 부여하나?</caption> + <thead> + <tr> + <th>데스크톱 브라우저</th> + <th>Windows 8.1</th> + <th>OS X 10.X</th> + </tr> + </thead> + <tbody> + <tr> + <th>Firefox</th> + <td class="bc-supports-yes">예 - Firefox 30.0</td> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Firefox 63</td> + </tr> + <tr> + <th>Chrome</th> + <td class="bc-supports-yes">예 - Chrome 35</td> + <td class="bc-supports-yes">예 - Chrome 65</td> + </tr> + <tr> + <th>Safari</th> + <td style="background: #eee;">N/A</td> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Safari 12 (<a href="https://bugs.webkit.org/show_bug.cgi?id=22261">bug 22261</a>)</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td class="bc-supports-yes">예 - Internet Explorer 11</td> + <td style="background: #eee;">N/A</td> + </tr> + <tr> + <th>Presto</th> + <td class="bc-supports-yes">예 - Opera 12</td> + <td class="bc-supports-yes">예 - Opera 12</td> + </tr> + </tbody> +</table> + +<table> + <caption>{{HTMLElement("button")}}을 탭했을 때 포커스를 부여하나?</caption> + <thead> + <tr> + <th>모바일 브라우저</th> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <th>Safari Mobile</th> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td> + <td style="background-color: #eeeeee;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td> + <td class="bc-supports-yes">예</td> + </tr> + </tbody> +</table> + +<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', 'form-elements.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.button")}}</p> diff --git a/files/ko/web/html/element/canvas/index.html b/files/ko/web/html/element/canvas/index.html new file mode 100644 index 0000000000..c9b9305e52 --- /dev/null +++ b/files/ko/web/html/element/canvas/index.html @@ -0,0 +1,194 @@ +--- +title: '<canvas>: 그래픽 캔버스 요소' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><canvas></code> 요소</strong>는 <a href="/ko/docs/Web/HTML/Canvas">캔버스 스크립팅 API</a> 또는 <a href="/ko/docs/Web/API/WebGL_API">WebGL API</a>와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.</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>하지만 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>가 아닌 요소. 단, {{HTMLElement("a")}}, {{HTMLElement("button")}}, 그리고 {{HTMLElement("input")}} 중 {{htmlattrxref("type", "input")}} 특성이 <code>checkbox</code>, <code>radio</code>, <code>button</code>인 요소는 가능</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("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="대체_콘텐츠">대체 콘텐츠</h3> + +<p><code><canvas></code> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.</p> + +<h3 id="닫는_태그_필수">닫는 태그 필수</h3> + +<p>{{HTMLElement("img")}} 요소와 달리, <code><canvas></code> 요소는 닫는 태그(<code></canvas></code>)를 필요로 합니다.</p> + +<h3 id="캔버스_크기_조절_CSS_vs._HTML">캔버스 크기 조절: CSS vs. HTML</h3> + +<p>캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.</p> + +<p>따라서 <code><canvas></code> 요소의 <code>width</code>와 <code>height</code> 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.</p> + +<h3 id="최대_캔버스_크기">최대 캔버스 크기</h3> + +<p><code><canvas></code> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> 등)에서 수집한 값입니다.</p> + +<table> + <thead> + <tr> + <th scope="col">브라우저</th> + <th scope="col">최대 높이</th> + <th scope="col">최대 너비</th> + <th scope="col">최대 크기</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>472,907,776 픽셀 (i.e., 22,528 x 20,992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32,767 픽셀</td> + <td>32,767 픽셀</td> + <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>IE</td> + <td>8,192 픽셀</td> + <td>8,192 픽셀</td> + <td>?</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<p>이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.</p> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + 캔버스의 내용을 설명하는 대체 텍스트 +</canvas></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>그 다음, JavaScript 코드 내에서 {{domxref("HTMLCanvasElement.getContext()")}}를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_문제">접근성 문제</h2> + +<h3 id="대체_콘텐츠_2">대체 콘텐츠</h3> + +<p><code><canvas></code> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas 접근성 유즈 케이스</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas 엘리먼트 접근성 문제</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">대화형 캔버스 엘리먼트의 모범 사례</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</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', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Canvas">Canvas API</a></li> + <li><a href="/ko/docs/Web/HTML/Canvas/Tutorial">캔버스 자습서</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">캔버스 치트 시트</a></li> + <li><a href="/ko/docs/Web/Demos_of_open_web_technologies">캔버스 관련 데모</a></li> +</ul> diff --git a/files/ko/web/html/element/caption/index.html b/files/ko/web/html/element/caption/index.html new file mode 100644 index 0000000000..4766e0588e --- /dev/null +++ b/files/ko/web/html/element/caption/index.html @@ -0,0 +1,153 @@ +--- +title: '<caption>: 표 설명 요소' +slug: Web/HTML/Element/caption +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/caption +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><caption></code> 요소</strong>는 표의 설명 또는 제목을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-taller")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음</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>바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("table")}} 요소. 첫 번째 자식이어야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<p>The following attributes are obsolete and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt> + <dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values: + <dl> + <dt><code>left</code></dt> + <dd>The caption is displayed to the left of the table.</dd> + <dt><code>top</code></dt> + <dd>The caption is displayed above the table.</dd> + <dt><code>right</code></dt> + <dd>The caption is displayed to the right of the table.</dd> + <dt><code>bottom</code></dt> + <dd>The caption is displayed below the table.</dd> + </dl> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><caption></code> 요소는 부모 {{htmlelement("table")}} 요소의 첫 번째 자식이어야 합니다.</p> + +<p><code><caption></code> 요소를 가진 <code><table></code> 요소가 만약 {{HTMLElement("figure")}} 요소의 유일한 자식인 경우, {{htmlelement("figcaption")}}을 대신 사용하세요.</p> + +<h2 id="예제">예제</h2> + +<p>다음의 간단한 예제는 설명을 포함한 표를 보입니다.</p> + +<pre class="brush: html"><table> + <caption>Example Caption</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>user1</td> + <td>user1@sample.com</td> + </tr> + <tr> + <td>user2</td> + <td>user2@sample.com</td> + </tr> +</table></pre> + +<div class="hidden"> +<pre class="brush: css">caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +} +</pre> +</div> + +<p>{{EmbedLiveSample('예제', 650, 100)}}</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', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.caption")}}</p> diff --git a/files/ko/web/html/element/center/index.html b/files/ko/web/html/element/center/index.html new file mode 100644 index 0000000000..bd545b19f6 --- /dev/null +++ b/files/ko/web/html/element/center/index.html @@ -0,0 +1,51 @@ +--- +title: <center> +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div>{{deprecated_header()}}</div> + +<h2 id="개요">개요</h2> + +<p>이 HTML Center (<code><center></code>)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 <a href="/en-US/docs/HTML/Block-level_elements">블록속성(block-level)</a> 의 요소이다. 그리고 해당 <center> 요소안에 포함된 전체요소는 <center>의 내용안에 가운데 정렬이 된다. (통상적으로 {{HTMLElement("body")}}로 쓰임).</p> + +<p>이 태그는 HTML4(또는 XHTML 1)이후에는 잘사용되지 않고, CSS의 {{Cssxref("text-align")}} 속성이 즐겨 사용된다. {{HTMLElement("div")}} 요소나 {{HTMLElement("p")}}요소 같은 블록속성이 있는 요소에 사용될 수 있다.또 다른 방법으로는 CSS속성을 사용하여 {{Cssxref("margin-left")}} 또는 {{Cssxref("margin-right")}} 또는 margin을 자동(Css("margin") 를 <code>0 auto)</code>으로 설정한다.</p> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 {{domxref("HTMLElement")}} 인터페이스를 구현합니다.</p> + +<div class="note"> +<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p> +</div> + +<h2 id="Example_1" name="Example_1">예제 1</h2> + +<pre class="brush: html"><center>This text will be centered. +<p>So will this paragraph.</p></center> +</pre> + +<h2 id="Example_2" name="Example_2">예제 2 (CSS 대안)</h2> + +<pre class="brush: html"><div style="text-align:center">This text will be centered. +<p>So will this paragraph.</p></div> +</pre> + +<h2 id="Example_3" name="Example_3">예제 3 (CSS 대안)</h2> + +<pre class="brush: html"><p style="text-align:center">This line will be centered.<br> +And so will this line.</p> +</pre> + +<h2 id="Notes" name="Notes">메모</h2> + +<p>Applying {{Cssxref("text-align")}}<code>:center</code> to a<code> </code>{{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/cite/index.html b/files/ko/web/html/element/cite/index.html new file mode 100644 index 0000000000..c620f162f3 --- /dev/null +++ b/files/ko/web/html/element/cite/index.html @@ -0,0 +1,143 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 인용 + - 출처 +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><cite></code> 요소</strong>는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.</span> 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/cite.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><cite></code> 요소의 저작물로는 다음과 같은 예제를 들 수 있습니다.</p> + +<div class="threecolumns" id="creative-works"> +<ul> + <li>책</li> + <li>논문</li> + <li>에세이</li> + <li>시</li> + <li>악보</li> + <li>음악</li> + <li>대본</li> + <li>영화</li> + <li>TV 쇼</li> + <li>게임</li> + <li>조각</li> + <li>그림</li> + <li>연극</li> + <li>공연</li> + <li>오페라</li> + <li>뮤지컬</li> + <li>전시회</li> + <li>판례</li> + <li>컴퓨터 프로그램</li> + <li>웹사이트</li> + <li>웹페이지</li> + <li>블로그 글과 댓글</li> + <li>게시판 글과 댓글</li> + <li>트윗</li> + <li>Facebook 글</li> + <li>성명서</li> + <li>기타 등등</li> +</ul> +</div> + +<p>W3C 명세는 <code><cite></code> 요소로 저작물의 출처를 표기할 때 저작자도 표기할 수 있음을 명시하고 있습니다. 그러나 정반대로, WHATWG 명세는 사람 이름을 어떤 상황에서도 <strong>절대</strong> 포함하지 말아야 한다고 적혀있다는 점을 알아두는 것이 좋습니다.</p> + +<p>{{htmlelement("blockquote")}}, {{htmlelement("q")}} 요소가 가진 인용문의 출처를 나타내려면 {{htmlattrxref("cite", "blockquote")}} 특성을 사용하세요.</p> + +<p>보통 브라우저는 <code><cite></code> 요소를 그릴 때 기울임꼴로 표현합니다. 기울임꼴을 제거하려면 CSS {{cssxref("font-style")}} 속성을 <code><cite></code>에 적용하세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>More information can be found in <cite>[ISO-0000]</cite>.</p></pre> + +<h3 id="결과">결과</h3> + +<p><cite>{{EmbedLiveSample("예제", 640, 60)}}</cite></p> + +<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', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("html.elements.cite")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li> + <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/code/index.html b/files/ko/web/html/element/code/index.html new file mode 100644 index 0000000000..2295588149 --- /dev/null +++ b/files/ko/web/html/element/code/index.html @@ -0,0 +1,109 @@ +--- +title: '<code>: 인라인 코드 요소' +slug: Web/HTML/Element/code +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><code></code> 요소</strong>는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.</span> 기본 스타일은 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글씨체입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</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><span style="line-height: 21px;">만 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>함수 <code>selectAll()</code>는 입력 필드의 모든 텍스트를 선택하므로, +사용자가 복사 혹은 삭제를 손쉽게 할 수 있습니다.</p> +</pre> + +<p>{{EmbedLiveSample("예제", 640, 70)}}</p> + +<h2 id="참고">참고</h2> + +<p>여러 줄의 코드를 나타내려면 <code><code></code> 요소를 {{htmlelement("pre")}}로 감싸세요. 보통 상황에서 <code><code></code>는 코드 한 줄만 나타냅니다.</p> + +<p>CSS <code>code</code> 태그 선택자를 사용해 브라우저의 기본 글씨체를 바꿀 수 있습니다. 그러나 사용자 설정이 CSS보다 우선할 수도 있습니다.</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', 'semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/ko/web/html/element/col/index.html b/files/ko/web/html/element/col/index.html new file mode 100644 index 0000000000..01223aa13c --- /dev/null +++ b/files/ko/web/html/element/col/index.html @@ -0,0 +1,159 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><col></code> 요소</strong>는 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.</span> {{htmlelement("colgroup")}} 안에서 찾을 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlattrxref("span", "colgroup")}} 특성을 지정하지 않은 {{HTMLElement("colgroup")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd><code><col></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + </ul> + + <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong> + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: + + <ul> + <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored.</dd> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note:</strong> + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p><code><col></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p> + +<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', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.col")}}</p> diff --git a/files/ko/web/html/element/colgroup/index.html b/files/ko/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..24993546d1 --- /dev/null +++ b/files/ko/web/html/element/colgroup/index.html @@ -0,0 +1,142 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><colgroup></code> 요소</strong>는 표의 열을 묶는 그룹을 정의합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>{{htmlattrxref("span", "colgroup")}} 특성이 존재하는 경우 없음. {{glossary("empty element", "빈 요소")}}입니다.<br> + 그렇지 않은 경우 0개 이상의 {{htmlelement("col")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>첫 번째 자식이 {{htmlelement("col")}} 요소이며, 바로 앞의 요소가 닫는 태그를 생략한 <code><colgroup></code> 요소가 아닐 때, 여는 태그를 생략할 수 있습니다.<br> + 바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("table")}} 요소. <code><colgroup></code>은 모든 {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} 요소 앞에 위치해야 하며, <code><table></code> 안에 {{htmlelement("caption")}} 요소가 존재하는 경우 <code><caption></code> 뒤에 와야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>열 그룹의 배경색. '#' 문자로 시작하는 <a href="/ko/docs/Web/CSS/color_value#RGB_색상">6자리 16진수 RGB 코드</a> 또는 <a href="/ko/docs/Web/CSS/color_value#색상_키워드">사전 정의된 색상 키워드</a>를 사용할 수 있습니다. + <div class="note"><strong>참고:</strong> 표준 특성이 아니므로 사용하지 마세요. 배경색을 적용하려면 CSS {{cssxref("background-color")}} 특성을 사용해야 합니다.</div> + </dd> + <dt>{{htmlattrdef("span")}}</dt> + <dd><code><colgroup></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다. 내부에 {{htmlelement("col")}} 요소가 존재하면 사용할 수 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Do not use these attributes as they are obsolete (and not supported) in the latest standard.</p> +</div> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "colgroup")}} is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the {{htmlattrxref("align", "col")}} of the {{HTMLElement("col")}} which are members of this column group. + <div class="note"><strong>Note: </strong>To achieve the same effect as the <code>char</code> attribute, in CSS3, you can use the character set using the <code>char</code> attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <strong>char</strong> attribute.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong> + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p><code><colgroup></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p> + +<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', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.colgroup")}}</p> diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html new file mode 100644 index 0000000000..8353384f2a --- /dev/null +++ b/files/ko/web/html/element/command/index.html @@ -0,0 +1,111 @@ +--- +title: <command> +slug: Web/HTML/Element/command +tags: + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code><command></code></strong>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.</span> However, they can be used anywhere on the page.</p> + +<div class="note"> +<p>The <code><command></code> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, metadata content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The <span>start tag</span> is mandatory, but, as it is a void element, the <span>use of an end tag</span> is forbidden.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLCommandElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Indicates whether the command is selected. Must be omitted unless the <code>type</code> attribute is <code>checkbox </code>or <code>radio</code>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Iindicates that the command is not available.</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Gives a picture which represents the command.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>The name of the command as shown to the user.</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>This attribute gives the name of the group of commands, with a <code>type</code> of <code>radio</code>, that will be toggled when the command itself is toggled. This attribute must be omitted unless the <code>type</code> attribute is <code>radio</code>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute indicates the kind of command. This can be one of three values. + <ul> + <li> + <p><code>command</code> or empty which is the default state and indicates that this is a normal command.</p> + </li> + <li> + <p><code>checkbox</code> indicates that the command can be toggled using a checkbox.</p> + </li> + <li> + <p><code>radio</code> indicates that the command can be toggled using a radio button.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><command type="command" label="Save" + icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</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', '#commands')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.command")}}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/ko/web/html/element/content/index.html b/files/ko/web/html/element/content/index.html new file mode 100644 index 0000000000..31179154e3 --- /dev/null +++ b/files/ko/web/html/element/content/index.html @@ -0,0 +1,101 @@ +--- +title: <content> +slug: Web/HTML/Element/content +translation_of: Web/HTML/Element/content +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><content></code> element</strong>—an obsolete part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> suite of technologies—was used inside of <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML.</span> It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.</p> + +<div class="note"> +<p><strong>Note: </strong>Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt><code>select</code></dt> + <dd>A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <code><content></code> element.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>Here is a simple example of using the <code><content></code> element. It is an HTML file with everything needed in it.</p> + +<div class="note"> +<p><strong>Note:</strong> For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>If you display this in a web browser it should look like the following.</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="Specifications">Specifications</h2> + +<p>This element is no longer defined by any specifications.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.content")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/data/index.html b/files/ko/web/html/element/data/index.html new file mode 100644 index 0000000000..3841ae04fe --- /dev/null +++ b/files/ko/web/html/element/data/index.html @@ -0,0 +1,104 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><data></code> 요소</strong>는 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.</span> 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 {{htmlelement("time")}} 요소를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLDataElement")}}</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("value")}}</dt> + <dd>기계가 읽을 수 있는 형태의 콘텐츠 해석본.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>밑의 예제는 상품의 이름을 표시하면서, 각각의 상품 번호도 연결합니다.</p> + +<pre class="brush: html"><p>새로운 상품들</p> +<ul> + <li><data value="398">미니 케찹</data></li> + <li><data value="399">점보 케찹</data></li> + <li><data value="400">메가 점보 케찹</data></li> +</ul> +</pre> + +<h2 id="Specifications" name="Specifications">명세</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', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>HTML {{HTMLElement("time")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/datalist/index.html b/files/ko/web/html/element/datalist/index.html new file mode 100644 index 0000000000..dd17028126 --- /dev/null +++ b/files/ko/web/html/element/datalist/index.html @@ -0,0 +1,115 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - Element + - HTML + - HTML forms + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/datalist +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><datalist></code> 요소</strong>는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 {{htmlelement("option")}} 요소 여럿을 담습니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</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> + <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>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 또는 0개 이상의 {{htmlelement("option")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label> +<input list="browsers" id="myBrowser" name="myBrowser" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> + <option value="Microsoft Edge"> +</datalist> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="폴리필">폴리필</h2> + +<p><a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a>을 추가해 구형 브라우저에서 <code><datalist></code> 지원을 추가하세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("input")}} 요소와 {{htmlattrxref("list", "input")}} 특성</li> + <li>{{HTMLElement("option")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dd/index.html b/files/ko/web/html/element/dd/index.html new file mode 100644 index 0000000000..3129bef964 --- /dev/null +++ b/files/ko/web/html/element/dd/index.html @@ -0,0 +1,111 @@ +--- +title: <dd> +slug: Web/HTML/Element/dd +tags: + - Element + - HTML + - HTML grouping element + - Reference + - Web + - 요소 +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dd></code> 요소</strong>는 정의 목록 요소({{HTMLElement("dl")}})에서 앞선 용어({{htmlelement("dt")}})에 대한 설명, 정의, 또는 값을 제공합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 다음 요소가 <code><dd></code> 또는 {{HTMLElement("dt")}}거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("dl")}} 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 안의 {{htmlelement("div")}}</td> + </tr> + <tr> + <th scope="row">가능한 이전 형제 요소</th> + <td>{{HTMLElement("dt")}} 또는 다른 <code><dd></code>.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("definition")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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("nowrap")}} {{Non-standard_inline}}</dt> + <dd>값이 <code>yes</code>면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 <code>no</code>입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>예제를 보려면 <a href="/ko/docs/HTML/Element/dl#예제" title="HTML/Element/dl#examples"><code><dl></code> 예제</a>를 보세요.</p> + +<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', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/ko/web/html/element/del/index.html b/files/ko/web/html/element/del/index.html new file mode 100644 index 0000000000..47dd0c67da --- /dev/null +++ b/files/ko/web/html/element/del/index.html @@ -0,0 +1,140 @@ +--- +title: <del> +slug: Web/HTML/Element/del +tags: + - Element + - HTML + - HTML edits + - Reference + - Web +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><del></code> 요소</strong>는 문서에서 제거된 텍스트의 범위를 나타냅니다.</span> 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. {{htmlelement("ins")}} 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.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> + +<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>.</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("HTMLModElement")}}</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><span style="line-height: 21px;">을 포함</span>합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p><del>This text has been deleted</del>, +here is the rest of the paragraph.</p> +<del><p>This paragraph has been deleted.</p></del></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><del></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [제거 부분 시작] "; +} + +ins::after { + content: " [제거 부분 끝] "; +}</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삭제 여부가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<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', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>텍스트의 삽입을 위한 {{HTMLElement("ins")}} 요소</li> + <li>삭제 여부와 관계 없이 취소선을 위한 {{htmlelement("s")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/details/index.html b/files/ko/web/html/element/details/index.html new file mode 100644 index 0000000000..2ff1da8f03 --- /dev/null +++ b/files/ko/web/html/element/details/index.html @@ -0,0 +1,284 @@ +--- +title: <details> +slug: Web/HTML/Element/details +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><details></code> 요소</strong>는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.</span> 요약이나 레이블은 {{htmlelement("summary")}} 요소를 통해 제공할 수 있습니다.</p> + +<p>정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <code><details></code> 요소의 첫 번째 자식이 <code><summary></code> 요소라면, <code><summary></code>의 콘텐츠를 위젯의 레이블로 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/details.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> + +<div class="hidden"> +<div class="note"> +<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p> +</div> + +<p>A <code><details></code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code><summary></code> (or a {{Glossary("user agent")}}-defined default string if no <code><summary></code>). This might look like the following:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed <details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure> + +<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open <details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure> + +<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p> + +<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p> + +<div class="note"> +<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p> +</div> + +<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나의 {{htmlelement("summary")}}와, 그 뒤의 플로우 콘텐츠.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>상세 정보, 즉 <code><details></code> 요소의 콘텐츠가 현재 보이는 상태인지 나타냅니다. 기본값 <code>false</code>는 정보가 보이지 않는다는 뜻입니다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<p><code><details></code> 요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <code><details></code> 요소의 상태가 열기와 닫기로 바뀔 때 발생하는 {{event("toggle")}} 이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.</p> + +<p><code>toggle</code> 이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.</p> + +<pre class="brush: js">details.addEventListener("toggle", event => { + if (details.open) { + /* the element was toggled open */ + } else { + /* the element was toggled closed */ + } +});</pre> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<p>이번 예제는 요약 없는 <code><details></code> 요소를 보입니다.</p> + +<pre class="brush: html"><details> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>이렇게 사용하는 경우, 브라우저는 기본 요약 문자열("상세", "세부정보" 등)을 사용합니다. 아래에서 직접 확인해보세요.</p> + +<p>{{EmbedLiveSample("간단한_예제", 650, 150)}}</p> + +<h3 id="요약_제공하기">요약 제공하기</h3> + +<p>이번 예제는 이전 코드에 {{htmlelement("summary")}} 요소를 추가합니다.</p> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("요약_제공하기", 650, 150)}}</p> + +<h3 id="열려있는_상태로_만들기">열려있는 상태로 만들기</h3> + +<p><code><details></code>가 처음부터 열려있는 상태로 나타나게 하려면 <code>open</code> 특성을 지정하세요.</p> + +<pre class="brush: html"><details open> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("열려있는_상태로_만들기", 650, 150)}}</p> + +<h3 id="외형_바꾸기">외형 바꾸기</h3> + +<p>이제 CSS를 추가해서 외형을 바꿔보겠습니다.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">details { + font: 16px "Open Sans", Calibri, sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + cursor: pointer; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("외형_바꾸기", 650, 150)}}</p> + +<h3 id="위젯_바꾸기">위젯 바꾸기</h3> + +<p>넓게 지원되지는 않지만, 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있습니다. 요소의 표준화 과정 중 추가된 실험적 구현이기 때문에 브라우저의 지원에 차이가 있으므로, 당분간 여러 방식을 함께 사용해야 합니다.</p> + +<p>{{HTMLElement("summary")}} 요소는 {{cssxref("list-style")}} 단축 속성과, 그 본디 속성인 {{cssxref("list-style-type")}} 등을 지원하므로, {{cssxref("list-style-image")}} 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 <code>list-style: none</code>을 지정하면 됩니다.</p> + +<p>그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 <code>::-webkit-details-marker</code> <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용해야 합니다.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[12, 15-17]">details { + font: 16px "Open Sans", Calibri, sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + cursor: pointer; + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("위젯_바꾸기", 650, 150)}}</p> + +<h2 id="명세">명세</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', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.details")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/ko/web/html/element/dfn/index.html b/files/ko/web/html/element/dfn/index.html new file mode 100644 index 0000000000..fd4069a35e --- /dev/null +++ b/files/ko/web/html/element/dfn/index.html @@ -0,0 +1,196 @@ +--- +title: '<dfn>: 정의 요소' +slug: Web/HTML/Element/dfn +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/dfn +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><dfn></code> 요소</strong>는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.</span> <code><dfn></code>에서 가장 가까운 {{htmlelement("p")}}, {{htmlelement("dt")}}/{{htmlelement("dd")}} 쌍, {{htmlelement("section")}} 조상 요소를 용어 정의로 간주합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 {{htmlelement("dfn")}} 요소는 불가능.</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>{{ARIARole("definition")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><dfn></code> 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.</p> + +<h3 id="정의하고_있는_용어_지정하기">정의하고 있는 용어 지정하기</h3> + +<p>다음 규칙을 따라 현재 용어가 어느건지 판별합니다.</p> + +<ol> + <li><code><dfn></code> 요소가 {{htmlattrxref("title")}} 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. <code><dfn></code>은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말({{htmlelement("abbr")}})을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.</li> + <li><code><dfn></code>이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 <code>title</code> 특성을 가진{{htmlelement("abbr")}}인 경우, 자식 <code><abbr></code>의 <code>title</code> 특성 값을 현재 용어로 간주합니다.</li> + <li>모두 아닌 경우 <code><dfn></code>의 텍스트 콘텐츠를 현재 용어로 간주합니다. {{anch("기본적인 용어 식별", "아래의 첫 번째 예제")}}에서 확인할 수 있습니다.</li> +</ol> + +<div class="note"> +<p><strong>참고:</strong> <code><dfn></code> 요소가 <code>title</code> 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.</p> +</div> + +<h3 id="<dfn>_요소를_가리키는_링크"><code><dfn></code> 요소를 가리키는 링크</h3> + +<p><code><dfn></code> 요소에 {{htmlattrxref("id")}} 특성을 지정하면 {{HTMLElement("a")}} 요소로 <code><dfn></code>을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.</p> + +<p>{{anch("정의로 링크", "정의로 링크 예제")}}에서 확인할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다양한 상황의 예제를 살펴보겠습니다.</p> + +<h3 id="기본적인_용어_식별">기본적인 용어 식별</h3> + +<p>아래 코드는 간단하게 <code><dfn></code> 요소를 사용해, 정의 문단 내의 용어를 식별합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn>&lt;dfn&gt;</dfn></strong>) is used to indicate the +term being defined within the context of a definition phrase or +sentence.</p></pre> + +<p><code><dfn></code> 요소에 <code>title</code>이 없으므로 <code><dfn></code>의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.</p> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("기본적인_용어_식별", 650, 120)}}</p> + +<h3 id="정의로_링크">정의로 링크</h3> + +<p>용어의 정의로 링크하는 건 {{htmlelement("a")}} 요소로 다른 링크를 만드는 방법과 같습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is +used to indicate the term being defined within the context of a +definition phrase or sentence.</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece +donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: +constructio interrete. Scrupulum, inquam, abeunti; </p> + +<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? +Equidem e Cn. Quid de Pythagora? In schola desinis. </p> + +<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum +est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas +bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc +agere divinius? </p> + +<p>Because of all of that, we decided to use the +<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for +this project.</p></pre> + +<p>이번에는 {{htmlattrxref("id")}} 특성에 <code>"definition-dfn"</code>을 사용한 용어 정의입니다. 코드 뒤쪽에서는 <code><a></code> 태그와 {{htmlattrxref("href", "a")}} 특성 값 <code>"#definition-dfn"</code>으로, 정의를 가리키는 링크를 생성합니다.</p> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("정의로_링크", 650, 300)}}</p> + +<h3 id="준말과_정의_같이_사용하기">준말과 정의 같이 사용하기</h3> + +<p>어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 <code><dfn></code>과 {{HTMLElement("abbr")}} 요소를 조합하면 됩니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> +is among the most productive scientific instruments ever constructed. +It has been in orbit for over 20 years, scanning the sky and +returning data and photographs of unprecedented quality and +detail.</p> + +<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has +arguably done more to advance science than any device ever built.</p></pre> + +<p><code><dfn></code> 요소 안에 배치한 <code><abbr></code>을 주목하세요. <code><abbr></code>은 준말("HST")과 함께 <code>title</code> 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. <code><dfn></code>은 <code><abbr></code>의 준말을 현재 정의하고 있음을 나타냅니다.</p> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("준말과_정의_같이_사용하기", 650, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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', 'semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.dfn")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>용어 정의 관련 요소: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/ko/web/html/element/dialog/index.html b/files/ko/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d54f8e313f --- /dev/null +++ b/files/ko/web/html/element/dialog/index.html @@ -0,0 +1,180 @@ +--- +title: '<dialog>: 대화 상자 요소' +slug: Web/HTML/Element/dialog +tags: + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - polyfill + - 대화 상자 +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dialog></code> 요소</strong>는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code> </a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<div class="blockIndicator warning"> +<p><code>tabindex</code> 특성을 <code><dialog></code> 요소에 사용해서는 안됩니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. <code>open</code> 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li><code>method="dialog"</code> 특성을 사용한 {{htmlelement("form")}} 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 속성은 양식을 제출할 때 사용한 버튼의 {{htmlattrxref("value", "button")}}으로 설정됩니다.</li> + <li>CSS {{cssxref('::backdrop')}} <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용하면, {{domxref("HTMLDialogElement.showModal()")}} 메서드를 사용해 활성화한 <code><dialog></code> 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><dialog open> + <p>여러분 안녕하세요!</p> +</dialog> +</pre> + +<h3 id="고급_예제">고급 예제</h3> + +<p>다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- 간단한 양식을 포함한 팝업 대화 상자 --> +<dialog id="favDialog"> + <form method="dialog"> + <p><label>좋아하는 동물: + <select> + <option></option> + <option>아르테미아</option> + <option>레서판다</option> + <option>거미원숭이</option> + </select> + </label></p> + <menu> + <button value="cancel">취소</button> + <button id="confirmBtn" value="default">확인</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">상세정보 업데이트</button> +</menu> + +<output aria-live="polite"></output></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var updateButton = document.getElementById('updateDetails'); +var favDialog = document.getElementById('favDialog'); +var outputBox = document.getElementsByTagName('output')[0]; +var selectEl = document.getElementsByTagName('select')[0]; +var confirmBtn = document.getElementById('confirmBtn'); + +// “Update details” button opens the <dialog> modally +updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + alert("The <dialog> API is not supported by this browser"); + } +}); +// "Favorite animal" input sets the value of the submit button +selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; +}); +// "Confirm" button of form triggers "close" on dialog because of [method="dialog"] +favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString(); +});</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("고급_예제", "100%", 300)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>최초 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 호환성 표는 구조화된 데이터에서 자동 생성되었습니다. 이 데이터에 참여를 원하시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 으로 이동하셔서 pull request를 하시면 됩니다.</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="폴리필">폴리필</h2> + +<p>지원하지 않는 브라우저에서 <code><dialog></code>를 사용하려면 <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>을 추가하세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{event("close")}} 이벤트</li> + <li>{{event("cancel")}} 이벤트</li> + <li>{{cssxref("::backdrop")}} 의사 요소</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식</a> 안내서</li> +</ul> diff --git a/files/ko/web/html/element/div/index.html b/files/ko/web/html/element/div/index.html new file mode 100644 index 0000000000..3fd7ebd390 --- /dev/null +++ b/files/ko/web/html/element/div/index.html @@ -0,0 +1,147 @@ +--- +title: '<div>: 콘텐츠 분할 요소' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Layout + - Reference + - Web +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><div></code> 요소</strong>는 플로우 콘텐츠를 위한 통용 컨테이너입니다. {{glossary("CSS")}}로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.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> + +<p><code><div></code> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 {{htmlattrxref("class")}}나 {{htmlattrxref("id")}} 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시({{htmlattrxref("lang")}} 속성 사용)하는 등의 용도로 사용할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.<br> + 또는 ({{glossary("WHATWG")}} HTML에서): 부모가 {{HTMLElement("dl")}} 요소라면: 하나 이상의 {{HTMLElement("dt")}} 요소, 이후 하나 이상의 {{HTMLElement("dd")}} 요소, 선택적으로 {{HTMLElement("script")}}와 {{HTMLElement("template")}} 요소 혼합 가능.</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>를 허용하는 아무 요소.<br> + 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제" name="예제">사용 일람</h2> + +<ul> + <li><code><div></code> 요소는 의미를 가진 다른 요소({{htmlelement("article")}}, {{htmlelement("nav")}} 등)가 적절하지 않을 때만 사용해야 합니다.</li> +</ul> + +<h2 id="예제" name="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html notranslate"><div> + <p>어떤 콘텐츠든 좋습니다. + &lt;p&gt;, &lt;table&gt;같이 말이죠. 써보세요!</p> +</div></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{ EmbedLiveSample('간단한_예제') }}</p> + +<h3 id="스타일_예제">스타일 예제</h3> + +<p>다음 예제는 CSS로 <div>에 그림자를 입힙니다. <code><div></code>의 {{htmlattrxref("class")}} 속성을 통해 <code>"shadowbox"</code> 스타일을 적용한 점에 주목하세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="notranslate">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("스타일_예제", 650, 120)}}</p> + +<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', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes since the latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <code>align</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>의미를 지닌 구획 요소: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>구문 콘텐츠를 꾸밀 때 사용하는 {{HTMLElement("span")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dl/index.html b/files/ko/web/html/element/dl/index.html new file mode 100644 index 0000000000..13739239ed --- /dev/null +++ b/files/ko/web/html/element/dl/index.html @@ -0,0 +1,223 @@ +--- +title: <dl> +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dl></code> 요소</strong>는 설명 목록을 나타냅니다. <code><dl></code>은 {{htmlelement("dt")}}로 표기한 용어와 {{htmlelement("dd")}} 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. <code><dl></code>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>하나 이상의 {{htmlelement("dt")}} 요소와 하나 이상의 {{htmlelement("dd")}} 요소로 구성한 그룹 0개 이상. 선택적으로 {{htmlelement("script")}}와 {{htmlelement("template")}}을 혼합 가능.<br> + 또는, 하나 이상의 {{htmlelement("div")}}. 선택적으로 {{htmlelement("script")}}, {{htmlelement("template")}} 혼합 가능.</p> + </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/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="하나의_용어와_하나의_정의">하나의 용어와 하나의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("하나의_용어와_하나의_정의")}}</p> + +<h3 id="여러_개의_용어와_하나의_정의">여러 개의 용어와 하나의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("여러_개의_용어와_하나의_정의")}}</p> + +<h3 id="하나의_용어와_여러_개의_정의">하나의 용어와 여러 개의 정의</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + Mozilla 재단과 수 백명의 + 자원봉사자가 개발한 무료 + 오픈소스 크로스 플랫폼 + 그래픽 웹 브라우저. + </dd> + <dd> + 붉은 판다, 레서 판다, 랫서 판다, + 혹은 "Firefox"는 초식성 포유류이다. + 몸 길이는 애완용 고양이보다 약간 + 큰 정도인 60cm다. + </dd> + + <!-- 다른 용어 및 정의 --> +</dl> +</pre> + +<p>{{EmbedLiveSample("하나의_용어와_여러_개의_정의")}}</p> + +<h3 id="여러_개의_용어와_여러_개의_정의">여러 개의 용어와 여러 개의 정의</h3> + +<p>위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.</p> + +<h3 id="메타데이터">메타데이터</h3> + +<p><code><dl></code>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.</p> + +<pre class="brush: html"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.</p> + +<pre class="brush: css">dt:after { + content: ": "; +}</pre> + +<p>{{EmbedLiveSample("메타데이터")}}</p> + +<h3 id="이름-값_그룹을_htmlelementdiv로_감싸기">이름-값 그룹을 {{htmlelement("div")}}로 감싸기</h3> + +<p>{{glossary("WHATWG")}} HTML에서는 <code><dl></code> 안 각각의 이름-값 그룹을 {{htmlelement("div")}}로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.</p> + +<pre class="brush: html"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="참고">참고</h2> + +<p>페이지에서 들여쓰기를 하기 위한 목적으로 <code><dl></code> (또는 {{htmlelement("ul")}}) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.</p> + +<p>용어의 들여쓰기를 수정하려면 <a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("margin")}} 속성을 사용하세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>각각의 스크린 리더는 <code><dl></code>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <code><dl></code>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li> +</ul> + +<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', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("dt")}} 요소</li> + <li>{{HTMLElement("dd")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/dt/index.html b/files/ko/web/html/element/dt/index.html new file mode 100644 index 0000000000..0aa8c9d4d4 --- /dev/null +++ b/files/ko/web/html/element/dt/index.html @@ -0,0 +1,99 @@ +--- +title: <dt> +slug: Web/HTML/Element/dt +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><dt></code> 요소</strong>는 설명 혹은 정의 리스트에서 용어를 나타냅니다. {{htmlelement("dl")}} 요소 안에 위치해야 합니다</span>. 보통 {{htmlelement("dd")}} 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 {{htmlelement("dd")}} 요소로 한꺼번에 서술할 수 있습니다.</p> + +<p>뒤따르는 {{htmlelement("dd")}} 요소가 <code><dt></code>로 지정한 용어의 정의와 기타 관련 글을 제공합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}, {{htmlelement("footer")}}, 구획 콘텐츠, 제목 콘텐츠 자손은 불가능합니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 다음 요소가 {{htmlelement("dd")}} 또는 <code><dt></code>거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("dl")}} 안의, {{htmlelement("dd")}} 혹은 다른 <code><dt></code> 앞. 또는 ({{glossary("WHATWG")}} HTML에서) {{htmlelement("dl")}} 안의 {{htmlelement("div")}}.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td>{{ARIARole("term")}}</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="예제">예제</h2> + +<p><a href="/ko/docs/Web/HTML/Element/dl#예제"><dl> 요소의 예제</a>를 확인하세요.</p> + +<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', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.dt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html new file mode 100644 index 0000000000..be045093a5 --- /dev/null +++ b/files/ko/web/html/element/element/index.html @@ -0,0 +1,57 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p><span class="seoSummary">The obsolete <strong>HTML <code><element></code> element</strong> was part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> specification; it was intended to be used to define new custom DOM elements.</span> It was removed in favor of a JavaScript-driven approach for creating new custom elements.</p> + +<div class="warning"> +<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<p>The <code><element></code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.element")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li> +</ul> diff --git a/files/ko/web/html/element/em/index.html b/files/ko/web/html/element/em/index.html new file mode 100644 index 0000000000..7043cf1ce8 --- /dev/null +++ b/files/ko/web/html/element/em/index.html @@ -0,0 +1,124 @@ +--- +title: '<em>: 강세 요소' +slug: Web/HTML/Element/em +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><em></code> 요소</strong>는 텍스트의 강세를 나타냅니다. <code><em></code> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><em></code> 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.</p> + +<p><code><em></code>은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 <code><em></code>을 사용하면 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 {{htmlelement("cite")}}, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 {{htmlelement("i")}}를 사용하세요. 주변보다 훨씬 중요한 텍스트는 {{htmlelement("strong")}}으로 강조하면 됩니다.</p> + +<h3 id="<i>와_<em>"><code><i></code>와 <code><em></code></h3> + +<p>신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. <code><em></code>과 {{htmlelement("i")}}가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?</p> + +<p>기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. <code><em></code>은 콘텐츠를 강조하지만, <code><i></code>는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 {{htmlelement("cite")}}를 사용하세요.)</p> + +<p>그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.</p> + +<p><code><em></code>은 "Just <em>do</em> it already!"나 "We <em>had</em> to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.</p> + +<p><code><i></code>는 "The <em>Queen Mary</em> sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, <em>Queen Mary</em>라는 이름의 선박임을 나타낼 뿐입니다. "The word <em>the</em> is an article"도 좋은 예제가 되겠습니다.</p> + +<h2 id="예제">예제</h2> + +<p><code><em></code> 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.</p> + +<pre class="brush: html"><p> + 과거에 <em>block-level</em>이라 불렸던 + 콘텐츠는 HTML 5부터 <em>flow</em> 콘텐츠라고 + 말합니다. +</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/ko/web/html/element/embed/index.html b/files/ko/web/html/element/embed/index.html new file mode 100644 index 0000000000..33268299e2 --- /dev/null +++ b/files/ko/web/html/element/embed/index.html @@ -0,0 +1,81 @@ +--- +title: <embed> +slug: Web/HTML/Element/embed +tags: + - HTML + - HTML 포함된 컨텐츠 + - HTML5 + - 레퍼런스 + - 요소 + - 웹 +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><embed></code> 요소</strong>는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.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> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, 포함된 컨텐츠, 대화형 컨텐츠, palpable 컨텐츠.</li> + <li><dfn>허용된 컨텐츠</dfn> 없음. 이것은 {{Glossary("empty element")}}.</li> + <li><dfn>태그 생략</dfn> 시작 태그는 있어야 하며, 종료태그는 있어서는 안됩니다.</li> + <li><dfn>허용된 부모 요소</dfn> 포함된 컨텐츠를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLEmbedElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>리소스의 표시될 높이 길이를 CSS 픽셀로 지정</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>포함된 리소스의 URL</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>리소스의 표시될 가로 길이를 CSS 픽셀로 지정</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</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-iframe-element.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다양한 타입의 포함된 컨텐츠를 위해 사용되는 다른 요소들 {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> +</ul> diff --git a/files/ko/web/html/element/fieldset/index.html b/files/ko/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..951d0f385c --- /dev/null +++ b/files/ko/web/html/element/fieldset/index.html @@ -0,0 +1,151 @@ +--- +title: '<fieldset>: 필드셋 요소' +slug: Web/HTML/Element/fieldset +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><fieldset></code> 요소</strong>는 웹 양식의 여러 컨트롤과 레이블({{htmlelement("label")}})을 묶을 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.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> + +<p>위의 예제에서 보듯, <code><fieldset></code> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 {{htmlelement("legend")}} 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 {{htmlelement("form")}} 요소의 <code>id</code>를 받을 수 있는 <code>form</code> 특성으로, <code><form></code> 바깥의 <code><fieldset></code> 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 <code>disabled</code>로, <code><fieldset></code>의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, {{htmlelement("form")}}을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, {{htmlelement("legend")}} 안의 양식 요소는 비활성 상태로 전환되지 않습니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><fieldset></code> 요소와 연결할 {{htmlelement("form")}} 요소("양식 소유자")의 {{htmlattrxref("id")}}. <code><fieldset></code>이 해당 <code><form></code> 안에 위치하지 않아도 연결할 수 있습니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>그룹과 연관지을 이름. + <div class="note"><strong>참고:</strong> <code><fieldset></code>에 대한 설명은 자신이 포함한 첫 번째 {{htmlelement("legend")}} 요소가 담당합니다.</div> + </dd> +</dl> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><fieldset></code>에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.</p> + +<p><code><fieldset></code>의 {{cssxref("display")}} 속성의 값은 기본적으로 <code>block</code>이며, 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 형성합니다. 인라인형 <code>display</code> 값을 지정하면 <code>inline-block</code>, 그렇지 않으면 <code>block</code>처럼 행동합니다. <code><fieldset></code>은 기본 스타일로 콘텐츠를 감싸는 <code>2px</code> 너비의 <code>groove</code> 테두리, 작은 양의 내부 여백, 그리고 {{cssxref("min-inline-size", "min-inline-size: min-content")}}를 갖습니다.</p> + +<p>{{htmlelement("legend")}} 요소는 <code><fieldset></code>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. <code><legend></code> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. <code>display</code>는 항상 블록형이 됩니다. 즉, <code>display: inline</code>도 <code>block</code>처럼 동작합니다.</p> + +<p><code><fieldset></code>의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 <code><fieldset></code>으로부터 특정 속성을 상속합니다. <code><fielset></code>에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, <code>display: flex</code> 또는 <code>display: inline-flex</code>를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 {{htmlelement("fieldset")}} 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. <a href="https://github.com/w3c/csswg-drafts/issues/321">GitHub 이슈</a>에서 버그 추적 링크를 확인할 수 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_필드셋">간단한 필드셋</h3> + +<p>다음 예제는 {{htmlelement("legend")}}와 하나의 컨트롤을 가진 단순한 <code><fieldset></code>을 보입니다.</p> + +<pre class="brush: html"><form action="#"> + <fieldset> + <legend>Simple fieldset</legend> + <input type="radio" id="radio"> + <label for="radio">Spirit of radio</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('간단한_필드셋', '100%', '80') }}</p> + +<h3 id="비활성_필드셋">비활성 필드셋</h3> + +<p>다음 예제는 두 개의 컨트롤을 가진 비활성 <code><fieldset></code>을 보입니다. 각각의 컨트롤은 <code>disabled</code> 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.</p> + +<pre class="brush: html"><form action="#"> + <fieldset disabled> + <legend>Disabled fieldset</legend> + <div> + <label for="name">Name: </label> + <input type="name" id="text" value="Chris"> + </div> + <div> + <label for="pwd">Archetype: </label> + <input type="password" id="text" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('비활성_필드셋', '100%', '110') }}</p> + +<h2 id="Specifications" name="Specifications">기술 요약</h2> + +<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>선택적인 {{HTMLElement("legend")}} 요소와 그 이후의 <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>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">명세</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-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code>fieldset</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.fieldset")}}</p> diff --git a/files/ko/web/html/element/figcaption/index.html b/files/ko/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..467db8177b --- /dev/null +++ b/files/ko/web/html/element/figcaption/index.html @@ -0,0 +1,88 @@ +--- +title: <figcaption> +slug: Web/HTML/Element/figcaption +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><figcaption></code> 요소는 </strong>부모 {{HTMLElement("figure")}} 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("figure")}} 요소의 처음 혹은 마지막.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ariarole("group")}}, {{ariarole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<p><code><figcaption></code>에 대한 예제는 {{HTMLElement("figure")}} 페이지에 포함되어 있습니다.</p> + +<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', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("figure")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/figure/index.html b/files/ko/web/html/element/figure/index.html new file mode 100644 index 0000000000..3630515211 --- /dev/null +++ b/files/ko/web/html/element/figure/index.html @@ -0,0 +1,175 @@ +--- +title: <figure> +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><figure></code> 요소</strong>는 독립적인 콘텐츠를 표현합니다. {{htmlelement("figcaption")}} 요소를 사용해 설명을 붙일 수 있습니다.</span> 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.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> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>{{htmlelement("figcaption")}}과 뒤따르는 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐</a>츠.<br> + 혹은 플로우 콘텐츠를 뒤따르는 <code><figcaption></code>.<br> + 혹은 플로우 콘텐츠.</p> + </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/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>보통 <code><figure></code>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.</li> + <li><code><figure></code>는 구획 루트이므로 <code><figure></code> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.</li> + <li>안에 (처음이나 마지막 자식으로) {{HTMLElement("figcaption")}}을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <code><figcaption></code>을 설명으로 사용합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="이미지">이미지</h3> + +<pre class="brush: html"><code><!-- Just an image --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> +</figure> + +<!-- Image with a caption --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> + <figcaption>MDN Logo</figcaption> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("이미지", "100%", 250)}}</p> + +<h3 id="코드_조각">코드 조각</h3> + +<pre class="brush: html"><figure> + <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; +} + </pre> +</figure> +</pre> + +<p>{{EmbedLiveSample("코드_조각", "100%", 250)}}</p> + +<h3 id="인용문">인용문</h3> + +<figure> +<pre class="brush: html"><code><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>If debugging is the process of removing software bugs, + then programming must be the process of putting them in.</blockquote> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("인용문")}}</p> +</figure> + +<h3 id="시">시</h3> + +<figure> +<pre class="brush: html"><code><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></code> +</pre> + +<p>{{EmbedLiveSample("시", "100%", 250)}}</p> +</figure> + +<h2 id="Specifications" name="Specifications">명세</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', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>No changes from HTML 5.0.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("figcaption")}}</li> +</ul> diff --git a/files/ko/web/html/element/font/index.html b/files/ko/web/html/element/font/index.html new file mode 100644 index 0000000000..44d88447ae --- /dev/null +++ b/files/ko/web/html/element/font/index.html @@ -0,0 +1,48 @@ +--- +title: <font> +slug: Web/HTML/Element/font +tags: + - 요소 + - 폐기됨 +translation_of: Web/HTML/Element/font +--- +<div>{{obsolete_header}}</div> + +<h2 id="개요">개요</h2> + +<p><em>HTML에서의 Font 요소</em> (<code><font></code>) 는 본문의 글자 크기, 색상과 및면을 정의합니다.</p> + +<div class="note"> +<p><em>사용 참고: </em></p> + +<p><strong>이 요소를 사용하지 마세요! </strong>HTML 3.2에서 정규화되었지만, HTML 4.01에서는 사용되지 않는 요소로 지정되었으며, 동시에 스타일링과 관련된 모든 요소가 HTML5에서 폐기되었습니다.</p> + +<p>Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). For any new web development, styling should be written using <a href="/en-US/docs/CSS" title="CSS">CSS</a> only.</p> + +<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> CSS properties.</p> +</div> + +<h2 id="속성">속성</h2> + +<p>다른 HTML 요소들과 같게, 이 요소도 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">공용 속성</a>을 지원합니다.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>This attribute specifies the font size as either a numeric or relative value. Numeric values range from <code>1</code> to <code>7</code> with <code>1</code> being the smallest and <code>3</code> the default. It can be defined using a relative value, like <code>+2</code> or <code>-3</code>, which set it relative to the value of the {{htmlattrxref("size", "basefont")}} attribute of the {{HTMLElement("basefont")}} element, or relative to <code>3</code>, the default value, if none does exist.</dd> +</dl> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>This element implements the {{domxref("HTMLFontElement")}} interface.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.font")}}</p> + +<div>{{HTMLRef}}</div> diff --git a/files/ko/web/html/element/footer/index.html b/files/ko/web/html/element/footer/index.html new file mode 100644 index 0000000000..6c2e3973d0 --- /dev/null +++ b/files/ko/web/html/element/footer/index.html @@ -0,0 +1,109 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - HTML sections + - Reference +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><footer></code> 요소</strong>는 가장 가까운 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">구획 콘텐츠</a>나 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#Sectioning root">구획 루트</a>의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}와 다른 <code><footer></code>는 자손이 될 수 없습니다.</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/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code><footer></code> 요소는 {{htmlelement("address")}}, {{htmlelement("header")}}, 혹은 다른 <code><footer></code>의 자손일 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>{{HTMLElement("address")}} 요소로 감싼 작성자 정보를 <code><footer></code> 요소에 배치하세요.</li> + <li><code><footer></code> 요소는 구획 콘텐츠가 아니므로 <a href="/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD">개요</a>에 새로운 구획을 추가하지 않습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><footer> + Some copyright info or perhaps some author + info for an &lt;article&gt;? +</footer> +</pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><a href="https://help.apple.com/voiceover/mac">VoiceOver</a> 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <code><footer></code>에 <code>role="contentinfo"</code>를 추가하세요.</p> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li> +</ul> + +<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', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 구획 관련 요소들: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li> +</ul> diff --git a/files/ko/web/html/element/form/index.html b/files/ko/web/html/element/form/index.html new file mode 100644 index 0000000000..38ec4aa393 --- /dev/null +++ b/files/ko/web/html/element/form/index.html @@ -0,0 +1,186 @@ +--- +title: <form> +slug: Web/HTML/Element/form +tags: + - Element + - HTML + - HTML forms + - Reference + - Web + - 양식 +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><form></code> 요소</strong>는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.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> + +<p><code><form></code> 요소를 꾸밀 땐, 모든 {{domxref("HTMLFormElement.elements", "elements")}}의 유효성을 나타내는 CSS {{cssxref(":valid")}}와 {{cssxref(":invalid")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용할 수 있습니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>다른 <code><form></code> 요소를 제외한 <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>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">특성</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 class="hidden">{{htmlattrdef("accept")}} {{obsolete_inline}}</dt> + <dd class="hidden">A comma-separated list of content types that the server accepts. + <div class="note"><strong>사용시 주의:</strong> 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, {{HTMLElement("input")}} 요소의 <span class="st">{{htmlattrxref("accept", "input")}} 속성을 사용하세요.</span></div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 <a href="/ko/docs/Web/HTTP/Headers/Content-Encoding">페이지 인코딩</a>과 같습니다.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 <code>autocapitalize</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다. + <ul> + <li><code>none</code>: 자동 대문자 입력을 비활성화합니다.</li> + <li><code>sentences</code>: 문장의 첫 글자를 대문자로 변환합니다. 기본값.</li> + <li><code>words</code>: 각 단어의 첫 글자를 대문자로 변환합니다.</li> + <li><code>characters</code>: 모든 글자를 대문자로 변환합니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 <code>autocomplete</code> 특성이 <code><form></code>에 정의된 값을 재정의합니다. + <ul> + <li><code>off</code>: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)</li> + <li><code>on</code>: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd><code>method</code> 특성이 <code>post</code>인 경우, <code>enctype</code>은 양식 제출 시 데이터의 <a href="https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4_%ED%83%80%EC%9E%85">MIME 유형</a>을 나타냅니다. + <ul> + <li><code>application/x-www-form-urlencoded</code>: 기본값.</li> + <li><code>multipart/form-data</code>: <code><input type="file"></code>이 존재하는 경우 사용하세요.</li> + <li><code>text/plain</code>: HTML 5에서 디버깅 용으로 추가된 값.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formenctype", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>양식을 제출할 때 사용할 <a href="/ko/docs/Web/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> 메서드. + <ul> + <li><code>post</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 메서드</a>. 양식 데이터를 <a href="/ko/docs/Web/API/Body">요청 본문</a>으로 전송합니다.</li> + <li><code>get</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 메서드</a>. 양식 데이터를 <code>action</code> URL과 <code>?</code> 구분자 뒤에 이어 붙여서 전송합니다.</li> + <li>dialog: 양식이 {{htmlelement("dialog")}} 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formmethod", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>양식의 이름. HTML 4부터 사용 중단됐습니다. {{htmlattrxref("id")}}를 사용하세요.</dd> + <dt>{{htmlattrdef("novalidate")}}</dt> + <dd>지정한 경우 양식의 유효성 검증을 건너뜁니다. <code>novalidate</code> 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formnovalidate", "button")}} 특성으로 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + + <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- Form which will send a GET request to the current URL --> +<form> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form which will send a POST request to the current URL --> +<form method="post"> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form with fieldset, legend, and label --> +<form method="post"> + <fieldset> + <legend>Title</legend> + <label><input type="radio" name="radio"> Select me</label> + </fieldset> +</form> +</pre> + +<p>{{ EmbedLiveSample('예제', '100%', 110) }}</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-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.form")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><label><a href="/ko/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식 안내서</a></label></li> +</ul> diff --git a/files/ko/web/html/element/frame/index.html b/files/ko/web/html/element/frame/index.html new file mode 100644 index 0000000000..d6d8f8ef0e --- /dev/null +++ b/files/ko/web/html/element/frame/index.html @@ -0,0 +1,56 @@ +--- +title: <frame> +slug: Web/HTML/Element/frame +translation_of: Web/HTML/Element/frame +--- +<div>{{Deprecated_header}}</div> + +<h2 id="요약">요약</h2> + +<p><code><frame></code>은 다른 HTML 문서가 표시될 수 있는 특정 영역을 정의하는 element이다. frame은 {{HTMLElement("frameset")}}내에서 사용되어야 한다.</p> + +<p><frame> element의 사용은 screen reader 사용자들의 접근성 부족과같은 기능문제같은 특정 단점 때문에 권장되지 않는다<br> + <frame> element 대신에 {{HTMLElement("iframe")}} 가 아마 더 적합할것이다.</p> + +<h2 id="속성(Attributes)">속성(=Attributes)</h2> + +<p>다른 모든 HTML elments와 마찬가지로, <frame> element는 전역속성(<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>이 속성은 frame으로 표시될 문서를 기입합니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>이 속성은 프레임을 명명하는데 사용됩니다. 명명되지않은 모든 링크들은 그들이 속해있는 그 프레임 안에서 열릴것입니다</p> + </dd> + <dt> </dt> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>이 속성은 사용자가 프레임크기를 조정할수 없게합니다.</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd><br> + 이 속성은 스크롤바의 유무를 결정합니다. 이 속성을 사용하지않으면 특정상황에서 자동으로 브라우져에 스크롤바가 생깁니다.<br> + 두가지를 선택할 수 있습니다. "yes"면 항상 스크롤바를 보여주고 "no"면 항상 스크롤바를 보여주지 않습니다.</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>이 속성은 프레임 사이의 여백 높이를 정의할때 사용됩니다.</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>이 속성은 프레임 사이의 여백 넓이를 정의할때 사용됩니다.</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>이 속성을 사용하면 프레임에 대한 경계선을 넣을 수 있습니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset> +</pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/frameset/index.html b/files/ko/web/html/element/frameset/index.html new file mode 100644 index 0000000000..a65b4a20d7 --- /dev/null +++ b/files/ko/web/html/element/frameset/index.html @@ -0,0 +1,39 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +translation_of: Web/HTML/Element/frameset +--- +<div>{{Deprecated_header}}</div> + +<h2 id="요약">요약</h2> + +<p><code><frameset></code>은 HTML element로써 {{HTMLElement("frame")}} element을 포함하고 사용된다.</p> + +<p class="note"><strong>Note: </strong>frame의 사용이 지금 {{HTMLElement("iframe")}}의 사용에 따라줄어드는 추세이기 때문에 , 이 element는 최근 웹사이트에서 잘 쓰이지 않는다.</p> + +<h2 id="속성(Attributes)">속성(=Attributes)</h2> + +<p>다른 모든 HTML elments와 마찬가지로, <frameset> element는 전역속성(<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>이 속성은 프레임셋안의 가로공간의 갯수와 크기를 정합니다.</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>이 속성은 프레임셋안의 세로공간의 갯수와 크기를 정합니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset></pre> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/head/index.html b/files/ko/web/html/element/head/index.html new file mode 100644 index 0000000000..4dd99da8dd --- /dev/null +++ b/files/ko/web/html/element/head/index.html @@ -0,0 +1,129 @@ +--- +title: '<head>: 문서 메타데이터 (헤더) 요소' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference + - Web + - 요소 +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><head></code> 요소</strong>는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 <a href="/ko/docs/Web/HTML/Element/title">제목</a>, <a href="/ko/docs/Web/HTML/Element/script">스크립트</a>, <a href="/ko/docs/Web/HTML/Element/style">스타일 시트</a> 등이 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code><head></code>의 주 목적은 기계 처리를 위한 정보이고, 사람이 읽을 수 있는 정보가 아닙니다. 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 {{HTMLElement("header")}} 요소를 사용하세요.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td> + <p>현재 문서가 {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} 문서거나, 제목 정보가 더 높은 단계의 규약에 존재하는 경우(HTML 이메일의 제목처럼) 0개 이상의 메타에이터 콘텐츠.</p> + + <p>이외에는 하나 이상의 메타데이터 콘텐츠. 단, 정확히 한 개의 {{htmlelement("title")}} 요소를 포함해야 합니다.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><head></code> 요소 내의 첫 번째 것이 요소라면 여는 태그를 생략할 수 있습니다.<br> + <code><head></code> 요소 뒤의 첫 번째 항목이 공백문자나 주석이 아니라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("html")}} 요소의 첫 번째 자식으로 배치.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 요소</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHeadElement")}}</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> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><!doctype html> +<html> + <head> + <title>문서 제목</title> + </head> +</html> +</pre> + +<h2 id="참고">참고</h2> + +<p>HTML5 호환 브라우저는 <code><head></code>가 없는 경우 자동으로 생성합니다. 하지만 <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">오래된 구형 브라우저에서는 그렇지 않습니다.</a></p> + +<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', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><head></code> 안에 배치할 수 있는 요소 + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/header/index.html b/files/ko/web/html/element/header/index.html new file mode 100644 index 0000000000..51a8f41d1f --- /dev/null +++ b/files/ko/web/html/element/header/index.html @@ -0,0 +1,109 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><header></code> 요소</strong>는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</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> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다른 <code><header></code> 또는 {{htmlelement("footer")}}가 자손으로 올 수 없습니다.</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>를 허용하는 모든 요소. 단, {{htmlelement("address")}}, {{htmlelement("footer")}}, 또는 다른 <code><header></code>의 자손으로 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><header></code> 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목({{htmlelement("Heading_Elements", "<h1>-<h6>")}} 요소)을 감싸기 위한 요소지만, 필수 사항은 <strong>아닙니다</strong>.</p> + +<h3 id="역사적_사용처">역사적 사용처</h3> + +<p><code><header></code>는 {{glossary("HTML5")}}에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. <a href="http://info.cern.ch/">세계 최초의 웹사이트</a>에서 확인할 수 있듯 원래는 {{htmlelement("head")}}요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 <code><header></code>는 나중에 다른 역할을 맡을 수 있었습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="페이지_제목">페이지 제목</h3> + +<pre class="brush: html"><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h3 id="글_제목">글 제목</h3> + +<pre class="brush: html"><article> + <header> + <h2>The Planet Earth</h2> + <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p> + </header> + <p>We live on a planet that's blue and green, with so many things still unseen.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p> +</article> +</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', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.header")}}</p> diff --git a/files/ko/web/html/element/heading_elements/index.html b/files/ko/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..87e972e996 --- /dev/null +++ b/files/ko/web/html/element/heading_elements/index.html @@ -0,0 +1,242 @@ +--- +title: '<h1>–<h6>: HTML 구획 제목 요소' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><h1></code>–<code><h6></code> 요소</strong>는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <code><h1></code>이 가장 높고 <code><h6></code>은 가장 낮습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.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> + +<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>, 뚜렷한 콘텐츠.</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>를 허용하는 모든 요소. {{HTMLElement("hgroup")}} 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><code><h1></code>-<code><h6></code> 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있습니다.</li> + <li>글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 {{glossary("CSS")}}의 {{cssxref("font-size")}} 속성을 사용하세요.</li> + <li>제목 단계를 건너뛰는 것을 피하세요. 언제나 <code><h1></code>로 시작해서, <code><h2></code><code>,</code> 순차적으로 기입하세요.</li> + <li>페이지 당 하나의 <code><h1></code>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <code><h1></code>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <code><h1></code>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 {{glossary("SEO")}}에도 더 적합합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="모든_제목_단계">모든 제목 단계</h3> + +<p>다음 코드는 모든 단계의 제목을 보입니다.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>{{ EmbedLiveSample('모든_제목_단계', '280', '300', '') }}</p> + +<h3 id="예제_페이지">예제 페이지</h3> + +<p>다음 코드는 약간의 제목과 내용을 보여줍니다.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>{{ EmbedLiveSample('예제_페이지', '280', '480', '') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="탐색">탐색</h3> + +<p>스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.</p> + +<h4 id="하지_말것">하지 말것</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="할것">할것</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="중첩">중첩</h4> + +<p>하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="구획_콘텐츠_레이블">구획 콘텐츠 레이블</h3> + +<p>스크린 리더 사용자가 자주 사용하는 다른 기술은 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a>의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.</p> + +<p>콘텐츠 구획에는 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>와 {{htmlattrxref("id")}} 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">주 탐색창</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">하단 탐색창</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>위의 예제에서 스크린 리더는 두 개의 {{HTMLElement("nav")}} 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 <code><nav></code> 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<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', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/ko/web/html/element/hgroup/index.html b/files/ko/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..56244c233d --- /dev/null +++ b/files/ko/web/html/element/hgroup/index.html @@ -0,0 +1,105 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hgroup></code> 요소</strong>는 문서 구획의 다단계 제목을 나타냅니다. 다수의 <code>{{htmlelement("Heading_Elements", "<h1>-<h6>")}}</code> 요소를 묶을 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 제목 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나 이상의 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</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/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 규칙</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<div class="blockIndicator note"> +<p><code><hgroup></code> 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다.<br> + 다만, <code><hgroup></code> 요소의 주요 목적이 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 명세의 개요 알고리즘</a>에서 제목의 표시 방법을 설정하기 위함이며, <strong>어떠한 브라우저도 개요 알고리즘을 구현하지 않았음</strong>을 고려할 때, <code><hgroup></code>의 의미는 이론적으로만 유효합니다.<br> + W3C HTML5 명세에서 <code><hgroup></code> 없이 <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">부제, 보조 제목, 태그라인의 마크업 방법</a>에 대한 조언을 제공하고 있습니다.</p> +</div> + +<p><code><hgroup></code> 요소는 문서 구획의 주 제목과 2차 제목을 연결해, 제목-부제목과 같은 "다단계 제목"을 만들 수 있습니다.</p> + +<p>다른 말로 하면, <code><hgroup></code> 요소는 자신의 2차 <code>{{htmlelement("Heading_Elements", "<h1>-<h6>")}}</code>이 문서 개요에 자신의 구획을 생성하는 것을 방지합니다.</p> + +<p>따라서 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 개요 알고리즘</a>이 생성한 추상적 개요 내에서, <code><hgroup></code>은 논리적인 단일 제목을 형성하고, <code><hgroup></code>의 자식 제목 요소가 그 안에 하나로 포함됩니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><hgroup> + <h1>주요 제목</h1> + <h2>부제목</h2> +</hgroup> +</pre> + +<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', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>구획 관련 다른 요소: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 문서의 구획과 개요</a>.</li> +</ul> diff --git a/files/ko/web/html/element/hr/index.html b/files/ko/web/html/element/hr/index.html new file mode 100644 index 0000000000..80163cd763 --- /dev/null +++ b/files/ko/web/html/element/hr/index.html @@ -0,0 +1,131 @@ +--- +title: <hr> +slug: Web/HTML/Element/hr +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hr></code> 요소</strong>는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> + + + +<p>역사적으로 <code><hr></code>은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empt element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLHRElement")}}</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("align")}} {{deprecated_inline}}</dt> + <dd>줄의 정렬을 지정합니다. 기본값은 <code>left</code>입니다.</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>Sets the rule to have no shading.</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>줄의 높이를 픽셀 단위로 지정합니다.</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +</p> + +<hr> + +<p> +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +</p> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">명세</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', 'semantics.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code><hr></code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("p")}}</li> +</ul> diff --git a/files/ko/web/html/element/html/index.html b/files/ko/web/html/element/html/index.html new file mode 100644 index 0000000000..a9c634ebc5 --- /dev/null +++ b/files/ko/web/html/element/html/index.html @@ -0,0 +1,123 @@ +--- +title: '<html>: HTML 문서 / 루트 요소' +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML Root Element + - Reference + - Web +translation_of: Web/HTML/Element/html +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><html></code> 요소</strong>는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <code><html></code> 요소의 후손이어야 합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>하나의 {{HTMLElement("head")}} 요소와 그 뒤를 따르는 하나의 {{HTMLElement("body")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><html></code> 요소 내부의 첫 번째 것이 주석이 아니라면 시작 태그를 생략할 수 있습니다.<br> + <code><html></code> 요소 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>없음. <code><html></code>이 문서의 루트 요소입니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 역할</th> + <td>{{domxref("HTMLHtmlElement")}}</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><span style="line-height: 21px;">을 포함합니다.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 <a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">애플리케이션 캐시 사용하기</a>를 보세요.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>문서의 {{glossary("XML")}} {{glossary("네임스페이스")}}를 지정합니다. 기본값은 <code>"http://www.w3.org/1999/xhtml"</code>입니다. XML {{glossary("parser", "구문 분석기")}}로 분석한 문서에는 필수이고, <code>text/html</code> 문서에서는 선택사항입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="ko"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><code>html</code> 요소의 {{htmlattrxref("lang")}} 특성에 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">유효한 IETF 언어 식별 태그</a>를 지정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다. 아무런 값도 지정하지 않을 시 보통 운영체제의 언어 설정을 따라가므로, 잘못된 발음을 사용할 수 있습니다.</p> + +<p>또한 <code><html></code> 요소에 유효한 <code>lang</code> 선언이 존재해야 {{htmlelement("title")}}과 같은 {{htmlelement("head")}} 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>MathML 최상위 요소 {{MathMLElement("math")}}</li> + <li>SVG 최상위 요소 {{SVGElement("svg")}}</li> +</ul> diff --git a/files/ko/web/html/element/i/index.html b/files/ko/web/html/element/i/index.html new file mode 100644 index 0000000000..583115a20f --- /dev/null +++ b/files/ko/web/html/element/i/index.html @@ -0,0 +1,119 @@ +--- +title: <i> +slug: Web/HTML/Element/i +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/i +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><i></code> 요소</strong>는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.</span> 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>일반 산문과 다른 문체를 가진 텍스트에 <code><i></code> 요소를 사용하세요. 주위 텍스트와 다른 의미를 가진 텍스트에 적용하면 됩니다.</li> + <li>초기 HTML 명세의 <code><i></code> 요소는, {{htmlelement("b")}} 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였습니다. 그러나 지금은 글자 외형에 그치지 않고 특정한 의미를 지니는 요소이므로 시각적인 강조에 그치지 않습니다. 보통, 브라우저가 여전히 <code><i></code> 요소의 글자를 기울이겠지만, 명세에 따르면 꼭 그렇게 표시할 필요는 없습니다.</li> + <li><code><i></code> 요소가 글자를 기울이기는 하지만, 기울임꼴을 적용하기 위한 용도로 사용해서는 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요.</li> + <li>강조하려는 텍스트가 다른 요소에 더 적합하지 않은지 고려하세요. + <ul> + <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li> + <li>{{htmlelement("strong")}} 요소는 보다 강한 강조를 나타냅니다.</li> + <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li> + <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li> + <li>{{htmlelement("dfn")}} 요소는 정의 대상인 용어를 나타냅니다.</li> + </ul> + </li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 외국어를 강조하기 위해 <code><i></code> 요소를 사용합니다.</p> + +<pre class="brush: html"><p>라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.i")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> +</ul> diff --git a/files/ko/web/html/element/iframe/index.html b/files/ko/web/html/element/iframe/index.html new file mode 100644 index 0000000000..bb4ecec354 --- /dev/null +++ b/files/ko/web/html/element/iframe/index.html @@ -0,0 +1,253 @@ +--- +title: '<iframe>: 인라인 프레임 요소' +slug: Web/HTML/Element/iframe +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><iframe></code> 요소</strong>는 중첩 {{glossary("browsing context", "브라우징 맥락")}}을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</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>삽입된 브라우징 맥락은 각자 자신만의 <a href="/ko/docs/Web/API/History">세션 기록</a>과 <a href="/ko/docs/Web/API/Document">문서</a>를 가집니다. 다른 브라우징 맥락을 포함하고 있는 맥락은 "부모 브라우징 맥락"이라고 부릅니다. 부모를 가지지 않는, 즉 최상위 브라우징 맥락은 대개 브라우저 창으로서, {{domxref("Window")}} 객체로 나타냅니다.</p> + +<div class="blockIndicator warning"> +<p>각각의 브라우징 맥락은 완전한 문서 환경이므로, 페이지에 <code><iframe></code>을 추가할 때마다 메모리 및 기타 컴퓨터 자원 사용량이 늘어납니다. 이론상으로는 원하는 만큼 <code><iframe></code>을 사용할 수 있지만, 성능 문제가 없는지 확인하세요.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>내장 콘텐츠를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Specifies a <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a> for the <code><iframe></code>. See the article <a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a> for details on security issues and how <code><iframe></code> works with Feature Policy to keep systems safe.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Set to <code>true</code> if the <code><iframe></code> can activate fullscreen mode by calling the {{domxref("Element.requestFullscreen", "requestFullscreen()")}} method.</dd> + <dd> + <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="fullscreen"</code>.</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Set to <code>true</code> if a cross-origin <code><iframe></code> should be allowed to invoke the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>.</dd> + <dd> + <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd>A <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> enforced for the embedded resource. See {{domxref("HTMLIFrameElement.csp")}} for details.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>The height of the frame in CSS pixels. Default is <code>150</code>.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>The download priority of the resource in the <code><iframe></code>'s <code>src</code> attribute. Allowed values: + <dl> + <dt><code>auto</code> (default)</dt> + <dd>No preference. The browser uses its own heuristics to decide the priority of the resource.</dd> + <dt><code>high</code></dt> + <dd>The resource should be downloaded before other lower-priority page resources.</dd> + <dt><code>low</code></dt> + <dd>The resource should be downloaded after other higher-priority page resources.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>Indicates how the browser should load the iframe: + <ul> + <li><code>eager</code>: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).</li> + <li><code><font face="consolas, Liberation Mono, courier, monospace">lazy</font></code>: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>A targetable name for the embedded browsing context. This can be used in the <code>target</code> attribute of the {{HTMLElement("a")}}, {{HTMLElement("form")}}, or {{HTMLElement("base")}} elements; the <code>formtarget</code> attribute of the {{HTMLElement("input")}} or {{HTMLElement("button")}} elements; or the <code>windowName</code> parameter in the {{domxref("Window.open()","window.open()")}} method.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource: + <ul> + <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li> + <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li> + <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li> + <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> + <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li> + <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> + <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> + </ul> + + <div class="note"><strong>Notes about sandboxing:</strong> + + <ul> + <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> + <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> + <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code><iframe></code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd> +</dl> + +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>The alignment of this element with respect to the surrounding context.</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code><iframe></code> borders.</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd> + <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt> + <dd>Indicates when the browser should provide a scrollbar for the frame: + <ul> + <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li> + <li><code>yes</code>: Always show a scrollbar.</li> + <li><code>no</code>: Never show a scrollbar.</li> + </ul> + </dd> +</dl> + +<h3 id="Non-standard_attributes_non-standard_inline">Non-standard attributes {{non-standard_inline}}</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div> + Makes the <code><iframe></code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br> + <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> +</dl> + +<h2 id="스크립팅">스크립팅</h2> + +<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p> + +<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> + +<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p> + +<p>Script access to a frame's content is subject to the {{Glossary("same-origin policy")}}. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_프레임">간단한 프레임</h3> + +<p>An <code><iframe></code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" + title="iframe Example 1" width="400" height="300"> +</iframe></pre> +</div> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('간단한_프레임', 640,400)}}</p> + +<h3 id="프레임_안의_링크를_다른_탭에서_열기">프레임 안의 링크를 다른 탭에서 열기</h3> + +<div> +<pre class="brush: html"><iframe id="Example2" + title="iframe Example 2" + width="400" height="300" + style="border:none" + src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> +</iframe></pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('프레임_안의_링크를_다른_탭에서_열기', 640, 400)}}</p> +</div> + +<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-iframe-element.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.iframe", 3)}}</p> diff --git a/files/ko/web/html/element/img/index.html b/files/ko/web/html/element/img/index.html new file mode 100644 index 0000000000..bedbe7b074 --- /dev/null +++ b/files/ko/web/html/element/img/index.html @@ -0,0 +1,389 @@ +--- +title: '<img>: 이미지 삽입 요소' +slug: Web/HTML/Element/img +tags: + - Element + - HTML + - HTML embedded content + - Multimedia + - Reference + - Web + - 사진 + - 이미지 +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><img></code> 요소</strong>는 문서에 이미지를 넣습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</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>위의 예제를 통해 <code><img></code> 요소의 사용법을 알 수 있습니다.</p> + +<ul> + <li><code>src</code> 특성은 <strong>필수</strong>이며, 포함하고자 하는 이미지로의 경로를 지정합니다.</li> + <li><code>alt</code> 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 <code>alt</code>의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 <strong>매우 유용</strong>합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.</li> +</ul> + +<div class="hidden"> +<p>다양한 목적을 위한 많은 수의 속성이 더 존재합니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} control for security and privacy: see {{htmlattrxref("crossorigin", "img")}} and {{htmlattrxref("referrerpolicy", "img")}}.</li> + <li>Setting an {{glossary("intrinsic size")}} using {{htmlattrxref("width", "img")}}, {{htmlattrxref("height", "img")}}, and {{htmlattrxref("intrinsicsize", "img")}}: this sets the space taken up by an image to ensure the page layout is stable before it loads.</li> + <li>Responsive image hints with {{htmlattrxref("sizes", "img")}} and {{htmlattrxref("srcset", "img")}} (see also the {{htmlelement("picture")}} element and our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li> +</ul> +</div> + +<h2 id="지원하는_이미지_형식">지원하는 이미지 형식</h2> + +<p>HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 {{glossary("user agent", "사용자 에이전트")}}는 서로 다른 형식을 지원합니다. 전체 목록은 <a href="/ko/docs/Web/Media/Formats/Image_types">웹 브라우저가 지원하는 이미지 형식 안내서</a>를 참고하세요.</p> + +<h2 id="이미지를_가져올_수_없을_때">이미지를 가져올 수 없을 때</h2> + +<p>이미지를 불러오거나 그릴 때 오류가 발생했고, {{htmlattrxref("onerror")}} 속성에 오류 처리기를 등록했다면 {{event("error")}} 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.</p> + +<ul> + <li>{{htmlattrxref("src", "img")}} 속성이 비었거나 {{jsxref("null")}}임.</li> + <li><code>src</code>의 URL이 현재 사용자가 보는 페이지의 URL과 같음.</li> + <li>지정한 이미지가 손상돼 불러올 수 없음.</li> + <li>이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, <code><img></code> 요소의 속성에도 크기를 지정하지 않음.</li> + <li>{{Glossary("user agent", "사용자 에이전트")}}가 지원하지 않는 이미지 형식임.</li> +</ul> + +<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("alt")}}</dt> + <dd>이미지의 대체 텍스트 설명. + <div class="note"> + <p><strong>참고:</strong> 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,</p> + + <ul> + <li>비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)</li> + <li>사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)</li> + <li>유효하지 않은 이미지거나, <a href="/ko/docs/Web/HTML/Element/img#지원하는_이미지_형식">지원하지 않는 형식</a></li> + </ul> + + <p>위와 같은 경우 브라우저가 이미지를 <code>alt</code> 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 <code>alt</code> 특성에 항상 유용한 값을 제공해야 합니다.</p> + </div> + + <p><code>alt</code> 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(<code>alt=""</code>)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 <strong>아니므로</strong>(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 {{glossary("Rendering engine", "렌더링")}}을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 <code>alt</code> 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.</p> + + <p>이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 <code>alt</code>의 값을 사용합니다.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, {{httpheader("Origin")}} {{glossary("HTTP")}} 헤더를 쿠키, <a href="https://tools.ietf.org/html/rfc5280">X.509 인증서</a>, <a href="/ko/docs/Web/HTTP/Authentication#Basic_인증_스킴">HTTP Basic 인증</a> 없이 전송합니다. 서버에서 {{httpheader("Access-Control-Allow-Origin")}} HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Credentials</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd> + </dl> + 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 <code>anonymous</code> 키워드를 사용한 것으로 간주합니다.</dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd>이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>sync</code></dt> + <dd>다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.</dd> + <dt><code>async</code></dt> + <dd>다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.</dd> + <dt><code>auto</code></dt> + <dd>선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.</dd> + <dd> + <p><code>auto</code>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.</p> + + <p><code>high</code>: 이미지가 <strong>높은</strong> 우선순위를 지님.</p> + + <p><code>low</code>: 이미지가 <strong>낮은</strong> 우선순위를 지님.</p> + </dd> + <dt class="hidden">{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt> + <dd class="hidden">This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>이미지가 <a href="https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%AF%B8%EC%A7%80_%EB%A7%B5">서버 사이드 맵</a>의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다. + <div class="note"> + <p><strong>참고:</strong> 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, <code>ismap</code>은 <code><img></code> 요소가 유효한 {{htmlattrxref("href", "a")}} 특성을 가진 {{htmlelement("a")}} 요소의 자손인 경우에만 사용 가능합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("loading")}}</dt> + <dd>브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. + <ul> + <li><code>eager</code>: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lazy</span></font>: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열. + <ul> + <li><code>no-referrer:</code> {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>no-referrer-when-downgrade:</code> TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 <code>Referer</code> 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.</li> + <li><code>origin:</code> <code>Referer</code> 헤더가 요청 출처의 {{glossary("schema", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}}를 포함합니다.</li> + <li><code>origin-when-cross-origin:</code> 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.</li> + <li><code>unsafe-url:</code> <code>Referrer</code> 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 <strong>안전하지 않습니다</strong>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다. + <ol> + <li><a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 조건</a>. 마지막 항목에서는 생략해야 합니다.</li> + <li>소스 크기 값.</li> + </ol> + + <p>미디어 조건은 이미지의 속성이 아니라<strong> {{glossary("viewport", "뷰포트")}}</strong> 속성을 가리킵니다. 예를 들어, <code>(max-height: 500px) 1000px</code>은 1000px 너비의 소스를 사용하려면 <strong>뷰포트</strong>가 500px 이하여야 한다는 뜻입니다.</p> + + <p>소스 크기는 의도한 이미지 표시 크기를 지정합니다. {{glossary("user agent", "사용자 에이전트")}}는 현재 소스 크기를 사용해, 너비(<code>w</code>) 서술자를 사용한 <code>srcset</code> 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 {{glossary("intrinsic size", "고유 크기")}}({{glossary("CSS")}} 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. <code>srcset</code>이 비어있거나 너비 서술자를 사용하지 않은 경우, <code>sizes</code> 특성은 아무 효과도 없습니다.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>이미지의 {{glossary("URL")}}. 필수 사항입니다. <code>srcset</code>을 지원하는 {{glossary("Browser", "브라우저")}}의 <code>srcset</code>에 픽셀 밀도 <code>1x</code>와 <code>w</code> 서술자가 없는 경우, <code>src</code>는 픽셀 밀도 <code>1x</code>의 이미지 후보로 취급합니다.</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다. + <ol> + <li>이미지의 {{glossary("URL")}}.</li> + <li>선택적으로, 공백과 함께 그 뒤를 잇는... + <ul> + <li>너비 서술자(양의 정수와 바로 뒤의 '<code>w</code>' 문자). 너비 서술자의 값을 <code>sizes</code> 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.</li> + <li>픽셀 밀도 서술자(양의 실수와 바로 뒤의 '<code>x</code>' 문자).</li> + </ul> + </li> + </ol> + + <p>서술자를 포함하지 않은 경우 기본값인 <code>1x</code>로 간주합니다.</p> + + <p>같은 <code>srcset</code> 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.</p> + + <p>사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지 자습서</a>를 방문해 예제를 살펴보세요.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>요소와 연결할 <a href="/ko/docs/HTML/Element/map">이미지 맵</a>의 프래그먼트. + <div class="note"> + <p><strong>참고: </strong><code><img></code> 요소가 {{htmlelement("a")}} 또는 {{HTMLElement("button")}} 요소의 자손이면 사용할 수 없습니다.</p> + </div> + </dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd>Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: top</code> or <code style="white-space: nowrap;">vertical-align: text-top</code></dd> + <dt><code>middle</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd> + <dt><code>bottom</code></dt> + <dd>The default, equivalent to <code style="white-space: nowrap;">vertical-align: unset</code> or <code style="white-space: nowrap;">vertical-align: initial</code></dd> + <dt><code>left</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: left</code></dd> + <dt><code>right</code></dt> + <dd>Equivalent to <code style="white-space: nowrap;">float: right</code></dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd>A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}. + <div class="note"> + <p><strong>Note:</strong> This attribute is mentioned in the latest {{glossary("W3C")}} version, <a class="external external-icon" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, but has been removed from the {{glossary("WHATWG")}}’s <a class="external external-icon" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a>. It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>A name for the element. Use the {{htmlattrxref("id")}} attribute instead.</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.</dd> +</dl> +</div> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><img></code>는 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>입니다. 기본적으로 {{cssxref("display")}}는 <code>inline</code>이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 <code>inline-block</code>처럼 보입니다. {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}} 등의 속성을 이미지에 지정할 수 있습니다.</p> + +<p><code><img></code>는 기준선을 갖지 않으므로, {{cssxref("vertical-align")}}<code>: baseline</code>을 지정한 인라인 서식 맥락에서는 이미지의 아래쪽 모서리가 텍스트 기준선으로 가게 됩니다.</p> + +<p>요소 박스 내의 이미지 위치는 {{cssxref("object-position")}} 속성으로 바꿀 수 있습니다. 크기는 {{cssxref("object-fit")}} 속성을 통해 요소 크기에 맞출지, 요소를 채울지 등을 지정할 수 있습니다.</p> + +<p>이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, {{glossary("SVG")}} 요소는 루트 {{svgelement("svg")}} 요소에 <code>width</code>와 <code>height</code>가 없는 경우 고유 크기를 가지지 않습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="보조_텍스트">보조 텍스트</h3> + +<p>페이지에 이미지를 삽입하고, 접근성을 높이기 위해 대체 텍스트를 제공하는 간단한 예제입니다.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN logo"></pre> + +<p>{{ EmbedLiveSample('보조_텍스트', '100%', '70') }}</p> + +<h3 id="이미지_링크">이미지 링크</h3> + +<p>이 예제는 이전 코드에 더해 이미지를 링크로 바꾸는 법을 보입니다. 단순히 <code><img></code> 태그를 {{htmlelement("a")}} 안에 넣기만 하면 됩니다. 다만 고려할 점 하나는, 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것입니다.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visit the MDN site"> +</a></pre> + +<p>{{ EmbedLiveSample('이미지_링크', '100%', '70') }}</p> + +<h3 id="srcset_특성_사용하기"><code>srcset</code> 특성 사용하기</h3> + +<p>이번 예제에서는 {{htmlattrxref("srcset", "img")}} 특성에 고해상도 버전 로고를 추가했습니다. 그러면 고해상도 장치에서는 일반 <code>src</code> 이미지 대신 고해상도 이미지를 사용합니다. <code>srcset</code> 특성을 지원하는 {{glossary("user agent", "사용자 에이전트")}}는 <code>src</code> 특성을 <code>srcset</code> <code>1x</code> 로 간주합니다.</p> + +<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon72.png" + alt="MDN logo" + srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + +<p>{{EmbedLiveSample("srcset_특성_사용하기", "100%", "160")}}</p> + +<h3 id="srcset과_sizes_특성_사용하기"><code>srcset</code>과 <code>sizes</code> 특성 사용하기</h3> + +<p>{{htmlattrxref("srcset", "img")}}를 지원하는 {{glossary("user agent", "사용자 에이전트")}}는, <code>srcset</code>에 <code>w</code> 서술자를 사용한 경우 <code>src</code> 특성을 무시합니다. 다음 코드는 미디어 조건 <code>(max-width: 600px)</code>을 만족할 때 200px 너비의 이미지를 불러오고, 그 외의 경우엔 다른 이미지(400px)를 불러옵니다.</p> + +<pre class="brush: html"><img src="/files/16864/clock-demo-200px.png" + alt="Clock" + srcset="/files/16864/clock-demo-200px.png 200w, + /files/16797/clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("srcset과_sizes_특성_사용하기", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p>직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 <a href="https://mdn.mozillademos.org/ko/docs/Web/HTML/Element/img$samples/srcset%EA%B3%BC_sizes_%ED%8A%B9%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">별도 페이지</a>를 방문하세요.</p> +</div> + +<h2 id="보안_및_개인정보_고려사항">보안 및 개인정보 고려사항</h2> + +<p><code><img></code> 요소를 사용하는 것에는 문제가 없으나, 의도치 않게 사용자 개인정보와 보안에 악영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer 헤더: 개인정보 및 보안 고려사항</a> 문서를 방문해 더 많은 정보를 알아보세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="적합한_대체_설명_작성">적합한 대체 설명 작성</h3> + +<p>{{htmlattrxref("alt", "img")}} 특성의 값은 이미지 콘텐츠를 간단하고 명료하게 설명해야 합니다. 그러나 이미지의 존재 여부나, 이미지 파일의 이름을 나타내서는 안됩니다. 이미지를 텍스트로 설명할 방법이 없어서 의도적으로 <code>alt</code>를 지정하지 않은 경우, 해당 이미지가 나타내려는 바를 알려줄 수 있는 다른 방법을 고려해보세요.</p> + +<h4 id="부적절">부적절</h4> + +<pre class="brush: html example-bad"><img alt="이미지" src="penguin.jpg"> +</pre> + +<h4 id="적절">적절</h4> + +<pre class="brush: html example-good"><img alt="해변에 서있는 바위뛰기펭귄." src="penguin.jpg"> +</pre> + +<p>일부 스크린 리더는 <code>alt</code> 특성을 가지지 않는 이미지를 보면 파일 이름을 표현하는 경우가 있는데, 이 때 파일의 이름이 이미지의 콘텐츠를 설명하지 않는다면 사용자가 혼란스러울 수 있습니다.</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="title_특성"><code>title</code> 특성</h3> + +<p>{{htmlattrxref("title")}} 특성은 {{htmlattrxref("alt", "img")}} 특성을 적합하게 대체할 수 없습니다. 또한, <code>alt</code>의 값을 <code>title</code>에도 반복하는 것을 피해야 합니다. 같은 값을 지정할 경우 일부 스크린 리더가 설명을 두 번씩 읽게 되므로 사용자가 혼란스러울 수 있습니다.</p> + +<p><code>title</code> 요소를 사용해 <code>alt</code> 설명에 대한 부연 설명을 제공해서도 안됩니다. 이미지가 설명을 필요로 하는 경우 {{htmlelement("figure")}}와 {{htmlelement("figcaption")}} 요소를 사용하세요.</p> + +<p><code>title</code> 특성은 보통 툴팁, 즉 사용자가 커서를 이미지 위에 올리고 가만히 있으면 짧은 시간 뒤에 나타나는 형태로 표현합니다. 따라서 추가 정보를 제공할 수는 있겠으나 터치 화면, 또는 키보드만 사용하는 경우도 존재하므로 사용자가 툴팁을 볼 수 있을 것이라고 기대해서는 안됩니다. 사용자에게 많이 중요한 정보를 포함해야 하면 <code>title</code> 특성 대신 위에 명시한 다른 방법을 사용하세요.</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<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>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_콘텐츠">뚜렷한 콘텐츠</a>. <code>usemap</code> 특성을 가진 경우 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</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("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 요소</li> + <li>이미지 관련 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/ko/web/html/element/index.html b/files/ko/web/html/element/index.html new file mode 100644 index 0000000000..9ecf2abe63 --- /dev/null +++ b/files/ko/web/html/element/index.html @@ -0,0 +1,102 @@ +--- +title: HTML 요소 참고서 +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - Reference + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}<br> + <span class="seoSummary">이 페이지는 {{glossary("tag", "태그")}}를 사용해 만들 수 있는 모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 제공합니다.</span> 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순으로 정렬된 목록도 확인할 수 있습니다.</p> + +<h2 id="메인_루트">메인 루트</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="문서_메타데이터" style="line-height: 30px; font-size: 2.14285714285714rem;">문서 메타데이터</h2> + +<p>{{glossary("metadata", "메타데이터")}}는 스타일, 스크립트, 각종 소프트웨어({{Glossary("search engine", "검색 엔진")}}, {{glossary("browser", "브라우저")}} 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.</p> + +<p>{{HTMLRefTable("HTML document metadata")}}</p> + +<h2 id="구획_루트" style="line-height: 30px; font-size: 2.14285714285714rem;">구획 루트</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="콘텐츠_구획" style="line-height: 30px; font-size: 2.14285714285714rem;">콘텐츠 구획</h2> + +<p>콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.</p> + +<p>{{HTMLRefTable("HTML sections")}}</p> + +<h2 id="텍스트_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">텍스트 콘텐츠</h2> + +<p>HTML 텍스트 콘텐츠를 사용하여 여는 {{htmlelement("body")}}와 닫는 <code></body></code> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 {{glossary("accessibility", "접근성")}}과 {{glossary("SEO")}}에 중요합니다.</p> + +<p>{{HTMLRefTable("HTML grouping content")}}</p> + +<h2 id="인라인_텍스트_시멘틱" style="line-height: 30px; font-size: 2.14285714285714rem;">인라인 텍스트 시멘틱</h2> + +<p>HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.</p> + +<p>{{HTMLRefTable("HTML text-level semantics")}}</p> + +<h2 id="이미지_멀티미디어" style="line-height: 30px; font-size: 2.14285714285714rem;">이미지 & 멀티미디어</h2> + +<p>HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다..</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="내장_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">내장 콘텐츠</h2> + +<p>HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="스크립트" style="line-height: 30px; font-size: 2.14285714285714rem;">스크립트</h2> + +<p>HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.</p> + +<p>{{HTMLRefTable("HTML scripting")}}</p> + +<h2 id="수정사항_표시" style="line-height: 30px; font-size: 2.14285714285714rem;">수정사항 표시</h2> + +<p>텍스트의 특정 부분이 수정됐다는 것을 표시할 수 있습니다.</p> + +<p>{{HTMLRefTable("HTML edits")}}</p> + +<h2 id="표_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">표 콘텐츠</h2> + +<p>표 형식의 데이터를 생성하고 처리할 때 사용합니다.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="양식" style="line-height: 30px; font-size: 2.14285714285714rem;">양식</h2> + +<p>HTML은 여러가지 입력 가능한 요소를 제공합니다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있습니다. <a href="/ko/docs/Learn/HTML/Forms">HTML 폼 안내서</a>에 더욱 다양한 내용이 있습니다.</p> + +<p>{{HTMLRefTable("HTML forms")}}</p> + +<h2 id="대화형_요소" style="line-height: 30px; font-size: 2.14285714285714rem;">대화형 요소</h2> + +<p>HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원합니다.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="웹_컴포넌트" style="line-height: 30px; font-size: 2.14285714285714rem;">웹 컴포넌트</h2> + +<p>웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML 요소의 맞춤 버전을 만들 수도 있습니다.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> + +<h2 id="폐기됐거나_사용하지_않는_요소들" style="line-height: 30px; font-size: 2.14285714285714rem;">폐기됐거나 사용하지 않는 요소들</h2> + +<div class="warning" style="font-size: 14px;"> +<p><strong>경고</strong>: 다음은 더 이상 사용하지 않고, 사용해서도 안되는 오래된 HTML 요소입니다. <strong>새로운 프로젝트에서 절대 사용해서는 안되고, 오래된 프로젝트에서도 가능한 빨리 대체해야 합니다.</strong> 아래 목록은 정보성 목적으로만 존재합니다.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> 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><input></code> 요소의 <code>button</code> 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <code><button></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><input type="button"></code> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="클릭하세요"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p><code>value</code>를 지정하지 않으면 빈 버튼이 됩니다.</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="버튼_사용하기">버튼 사용하기</h2> + +<p><code><input type="button"></code> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <code><a href="/ko/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>과 <code><a href="/ko/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code>은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.</p> + +<h3 id="간단한_버튼">간단한 버튼</h3> + +<p>{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 <code>value</code>와 문단 내용을 바꾸는 것입니다.)</p> + +<pre class="brush: html"><form> + <input type="button" value="기계 켜기"> +</form> +<p>기계가 멈췄습니다.</p></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><input></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"><form> + <input type="button" value="기계 켜기" accesskey="s"> +</form> +<p>기계가 멈췄습니다.</p> +</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"><input type="button" value="Disable me" disabled></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"><input type="button" value="활성"></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><fieldset></code>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></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"><div class="toolbar"> + <input type="color" aria-label="펜 색상"> + <input type="range" min="2" max="50" value="30" aria-label="펜 크기"><span class="output">30</span> + <input type="button" value="캔버스 지우기"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></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)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</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"><input type="text"></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"><input type="date" value="2017-06-01"></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><input type="date"></code>의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. ({{anch("미지원 브라우저 처리하기")}}로 가세요.)</p> + +<div class="blockIndicator note"> +<p>모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.</p> +</div> + +<h3 id="기본_예제">기본 예제</h3> + +<p><code><input type="date"></code>의 가장 간단한 사용법은 아래 코드처럼 하나의 <code><input></code>과 그 {{htmlelement("label")}}로 이뤄집니다.</p> + +<pre class="brush: html"><form action="https://example.com"> + <label> + Enter your birthday: + <input type="date" name="bday"> + </label> + + <p><button>Submit</button></p> +</form></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"><form> + <label for="party">Choose your preferred party date: + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> +</form></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><input type="date"></code>는 {{htmlattrxref("size", "input")}} 등의 크기 조절 특성을 지원하지 않습니다. <a href="/ko/docs/Web/CSS">CSS</a>를 사용하세요.</p> + +<h2 id="유효성_검사">유효성 검사</h2> + +<p><code><input type="date"></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"><form> + <label> + Choose your preferred party date (required, April 1st to 20th): + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </label> + + <p> + <button>Submit</button> + </p> +</form></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"><form> + <label for="bday">Enter your birthday: + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> + <span class="validity"></span> + </label> + <p> + <button>Submit</button> + </p> +</form></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><input type="date"></code> 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 {{htmlelement("select")}} 요소를 이용한 것입니다.</p> + +<p>{{EmbedLiveSample('예제', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML은 다음과 같습니다.</p> + +<pre class="brush: html"><form> + <label class="nativeDatePicker">Enter your birthday: + <input type="date" name="bday"> + <span class="validity"></span> + </label> + + <fieldset class="fallbackDatePicker" hidden> + <legend class="fallbackLabel">Enter your birthday:</legend> + + <label> + Day: + <select name="day"></select> + </label> + + <label> + Month: + <select name="month"> + <option>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </label> + + <label> + Year: + <select name="year"></select> + </label> + </fieldset> +</form></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><input type="date"></code> 지원 여부를 알아내기 위한 기능 탐지 부분입니다.</p> + +<p>우선 새로운 {{htmlelement("input")}} 요소를 만들고, <code>type</code>을 <code>date</code>로 설정해봅니다. 그리고 즉시 <code><input></code>의 유형을 검사하는데, 지원하지 않는 브라우저에서 <code>date</code>는 <code>text</code>로 대체되므로 <code>text</code>를 반환합니다. <code><input type="date"></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 <option>s into the <select> + 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 > 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 <select> + daySelect.options = Array.from({ length: 100 }, function(index) { + return index + year; + }); +} + +// when the month or year <select> 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)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</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><input></code>은 다음과 같은 형태를 갖게 됩니다.</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></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"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="파일_입력_칸_사용하기">파일 입력 칸 사용하기</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose file to upload</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Submit</button> + </div> +</form></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><input></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"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choose file to upload</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Submit</button> + </div> +</form></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><input type="file"></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"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Choose images to upload (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>No files currently selected for upload</p> + </div> + <div> + <button>Submit</button> + </div> +</form></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 > 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><input></code>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <code><input></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><div></code>에 존재하는 이전 파일의 미리보기를 제거합니다.</li> + <li>선택한 모든 파일의 정보를 들고 있는 {{domxref("FileList")}} 객체를 가져온 후 <code>curFiles</code> 변수에 저장합니다.</li> + <li><code>curFiles.length</code>가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, <code><div></code>에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.</li> + <li>반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 <code><div></code>에 출력합니다. 참고할 점:</li> + <li>뒤에서 작성할 <code>validFileType()</code> 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 <code>accept</code> 특성에 속한 파일인지 판별합니다.</li> + <li>올바른 파일이라면, + <ul> + <li><code><div></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 < 1024) { + return number + 'bytes'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number >= 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)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</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><input type="file"></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><input></code> 요소</strong>는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.</span> {{glossary("user agent", "사용자 에이전트")}}에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <code><input></code> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + + + +<h2 id="<input>_유형"><code><input></code> 유형</h2> + +<p><code><input></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"> +<input type="button" name="button" /></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"> +<input type="checkbox" name="checkbox"/></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"> +<input type="color" name="color"/></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"> +<input type="date" name="date"/></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"> +<input type="datetime-local" name="datetime-local"/></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"> +<input type="email" name="email"/></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"> +<input type="file" accept="image/*, text/*" name="file"/></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"> +<input type="image" name="image" src="" alt="image input"/></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"> +<input type="month" name="month"/></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"> +<input type="number" name="number"/></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"> +<input type="password" name="password"/></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"> +<input type="radio" name="radio"/></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"> +<input type="range" name="range" min="0" max="25"/></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"> +<input type="reset" name="reset"/></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"> +<input type="search" name="search"/></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"> +<input type="submit" name="submit"/></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"> +<input type="tel" name="tel"/></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"> +<input type="text" name="text"/></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"> +<input type="time" name="time"/></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"> +<input type="url" name="url"/></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"> +<input type="week" name="week"/></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"> +<input type="datetime" name="datetime"/></pre> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><code><input></code> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 {{htmlattrxref("type", "input")}} 속성이 제일 중요합니다. 모든 <code><input></code> 요소는 유형에 상관하지 않고 {{domxref("HTMLInputElement")}} 인터페이스에 기반하므로, 기술적으로는 모든 <code><input></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"><form action="page.html" method="post"> + <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> + <input type="submit"/> +</form> +<!-- page.html?fruit=cherry&fruit.dir=ltr --></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><input></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><form></code> element in the same document. If this attribute isn't specified, the <code><input></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><datalist></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"><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></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><input></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><input type="number" min="10" step="2"></code> any even integer, 10 or great, is valid. If omitted, <code><input type="number"></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><input type="number" min="-5.2"></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("<input> 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"><!-- A basic input --> +<input type="text" name="input" value="Type here"> +</pre> + +<p><input></p> + +<h3 id="A_common_use-case_scenario">A common use-case scenario</h3> + +<pre class="brush: html notranslate"><!-- A common form that includes input tags --> +<form action="getform.php" method="get"> + <label>First name: <input type="text" name="first_name" /></label><br /> + <label>Last name: <input type="text" name="last_name" /></label><br /> + <label>E-mail: <input type="email" name="user_email" /></label><br /> + <input type="submit" value="Submit" /> +</form> +</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', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</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"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></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"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form> +<pre id="log"> +</pre> +</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><input></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"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></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><label></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"><form> + <fieldset> + <legend>Please select your preferred contact method:</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> + </fieldset> +</form></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)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</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> diff --git a/files/ko/web/html/element/ins/index.html b/files/ko/web/html/element/ins/index.html new file mode 100644 index 0000000000..669da42046 --- /dev/null +++ b/files/ko/web/html/element/ins/index.html @@ -0,0 +1,137 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - HTML edits + - Reference + - Web +translation_of: Web/HTML/Element/ins +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><ins></code> 요소</strong>는 문서에 추가된 텍스트의 범위를 나타냅니다.</span> {{htmlelement("del")}} 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ins.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> + +<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>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>투명.</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("HTMLModElement")}}</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><span style="line-height: 21px;">을 포함</span>합니다.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><ins>This text has been inserted</ins></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><ins></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [추가 부분 시작] "; +} + +ins::after { + content: " [추가 부분 끝] "; +}</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<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', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ins")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>문서에서 삭제된 부분을 나타내는 {{HTMLElement("del")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/kbd/index.html b/files/ko/web/html/element/kbd/index.html new file mode 100644 index 0000000000..55f724224e --- /dev/null +++ b/files/ko/web/html/element/kbd/index.html @@ -0,0 +1,208 @@ +--- +title: '<kbd>: 키보드 입력 요소' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/kbd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><kbd></code> 요소</strong>는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.</span> 관례에 따라 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row">콘텐츠 카테고리</th> + <td><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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><kbd></code> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.</p> + +<ul> + <li><code><kbd></code> 요소를 다른 <code><kbd></code> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 {{anch("입력 안의 키입력 나타내기")}} 예제를 참고하세요.</li> + <li><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 {{anch("재출력된 입력")}} 예제를 참고하세요.</li> + <li>반면, <code><samp></code> 요소를 <code><kbd></code> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 {{anch("화면에 표시된 입력 옵션 나타내기")}} 예제를 참고하세요.</li> +</ul> + +<div class="blockIndicator note"> +<p>사용자 지정 CSS 파일을 정의해 <code><kbd></code> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html"><p><kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를 확인하세요.</p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("기본_예제", 350, 80)}}</p> + +<h3 id="입력_안의_키입력_나타내기">입력 안의 키입력 나타내기</h3> + +<p>다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <code><kbd></code> 요소를 중첩할 수 있습니다. 바깥 <code><kbd></code>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <code><kbd></code>로 나타냅니다.</p> + +<h4 id="스타일_없이">스타일 없이</h4> + +<p>우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><p>새로운 문서는 키보드 단축키 +<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>으로 만들 수 있습니다.</p> +</pre> + +<p>단축키 조합 전체를 하나의 <code><kbd></code>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <code><kbd></code>로 감싼 모습입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 꼭 이렇게 중첩할 필요는 없습니다. 바깥 <code><kbd></code>를 생략하고, <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code>로 작성하더라도 완벽하게 유효한 표기법입니다.</p> + +<p>다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.</p> +</div> + +<h5 id="결과_2">결과</h5> + +<p>스타일 시트 없는 출력은 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("스타일_없이", 650, 80)}}</p> + +<h4 id="스타일_적용">스타일 적용</h4> + +<p>CSS를 좀 더해서 명확하게 바꿀 수 있습니다.</p> + +<h5 id="CSS">CSS</h5> + +<p>키보드 버튼을 렌더링 할 때 사용할 수 있는, <code><kbd></code> 요소의 <code>"key"</code> 스타일을 추가합니다.</p> + +<pre class="brush: css">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>HTML을 업데이트해 앞선 스타일을 적용합니다.</p> + +<pre class="brush: html"><p>새로운 문서는 키보드 단축키 +<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>으로 만들 수 있습니다.</p> +</pre> + +<h5 id="결과_3">결과</h5> + +<p>원하던 바로 그 결과입니다!</p> + +<p>{{EmbedLiveSample("스타일_적용", 650, 80)}}</p> + +<h3 id="재출력된_입력">재출력된 입력</h3> + +<p><code><kbd></code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.</p> + +<pre class="brush: html"><p>구문 오류가 발생하면, 오류 원인을 찾을 수 있도록 +입력받은 명령을 다시 출력합니다.</p> +<blockquote> + <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> +</blockquote> +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("재출력된_입력", 650, 120)}}</p> + +<h3 id="화면에_표시된_입력_옵션_나타내기">화면에 표시된 입력 옵션 나타내기</h3> + +<p>{{htmlelement("samp")}} 요소를 <code><kbd></code> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.</p> + +<p>예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.</p> + +<pre class="brush: html"><p>새로운 파일을 생성하려면, <kbd> +<kbd><samp>파일</samp></kbd>⇒<kbd><samp>새 문서</samp></kbd> +</kbd> 메뉴를 선택하세요. + +<p>파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd>을 +누르는 걸 잊지 마세요.</p> +</pre> + +<p>흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 <code><kbd></code> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 <code><kbd></code>와 <code><samp></code>로 표시한 것을 볼 수 있습니다. <code><kbd></code> 안에 <code><samp></code>가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.</p> + +<h4 id="결과_4">결과</h4> + +<p>{{EmbedLiveSample("화면에_표시된_입력_옵션_나타내기", 650, 120)}}</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', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Expanded to include any user input, like voice input and individual keystrokes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> diff --git a/files/ko/web/html/element/keygen/index.html b/files/ko/web/html/element/keygen/index.html new file mode 100644 index 0000000000..45910b8a24 --- /dev/null +++ b/files/ko/web/html/element/keygen/index.html @@ -0,0 +1,122 @@ +--- +title: <keygen> +slug: Web/HTML/Element/keygen +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/keygen +--- +<p>{{HTMLRef}}{{Obsolete_Header}}</p> + +<p>The HTML <code><keygen></code> element exists to facilitate generation of key material, and submission of the public key as part of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a>. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <code><keygen></code> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, interactive content, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">resettable</a> <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLKeygenElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("autofocus")}}</dt> + <dd>This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <code>autofocus</code> attribute, which is a Boolean.</dd> + <dt>{{HTMLAttrDef("challenge")}}</dt> + <dd>A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd>This Boolean attribute indicates that the form control is not available for interaction.</dd> + <dt>{{HTMLAttrDef("form")}}</dt> + <dd>The form element that this element is associated with (its <em>form owner</em>). The value of the attribute must be an <code>id</code> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><keygen> </code>elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{HTMLAttrDef("keytype")}}</dt> + <dd>The type of key generated. The default value is <code>RSA</code>.</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> +</dl> + +<p>The element is written as follows:</p> + +<pre class="brush: html"><keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" + keyparams="<var>pqg-params</var>"></pre> + +<p>The <code>keytype</code> parameter is used to specify what type of key is to be generated. Valid values are "<code>RSA</code>", which is the default, "<code>DSA</code>" and "<code>EC</code>". The <code>name</code> and <code>challenge</code> attributes are required in all cases. The <code>keytype</code> attribute is optional for RSA key generation and required for DSA and EC key generation. The <code>keyparams</code> attribute is required for DSA and EC key generation and ignored for RSA key generation. <code>PQG</code> is a synonym for <code>keyparams</code>. That is, you may specify <code>keyparams="pqg-params"</code> or <code>pqg="pqg-params"</code>.</p> + +<p>For RSA keys, the <code>keyparams</code> parameter is not used (ignored if present). The user may be given a choice of RSA key strengths. Currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits).</p> + +<p>For DSA keys, the <code>keyparams</code> parameter specifies the DSA PQG parameters which are to be used in the keygen process. The value of the <code>pqg</code> parameter is the the BASE64 encoded, DER encoded Dss-Parms as specified in IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. The user may be given a choice of DSA key sizes, allowing the user to choose one of the sizes defined in the DSA standard.</p> + +<p>For EC keys, the <code>keyparams</code> parameter specifies the name of the elliptic curve on which the key will be generated. It is normally a string from the table in <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Note that only a subset of the curves named there may actually be supported in any particular browser.) If the <code>keyparams</code> parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "<code>secp384r1</code>" for high, and the curve named "<code>secp256r1</code>" for medium keys. (Note: choice of the number of key strengths, default values for each strength, and the UI by which the user is offered a choice, are outside of the scope of this specification.)</p> + +<p>The <code><keygen></code> element is only valid within an HTML form. It will cause some sort of selection to be presented to the user for selecting key size. The UI for the selection may be a menu, radio buttons, or possibly something else. The browser presents several possible key strengths. Currently, two strengths are offered, high and medium. If the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk.</p> + +<p>When the submit button is pressed, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database.</p> + +<pre>PublicKeyAndChallenge ::= SEQUENCE { + spki SubjectPublicKeyInfo, + challenge IA5STRING +} +SignedPublicKeyAndChallenge ::= SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + signature BIT STRING +}</pre> + +<p>The public key and challenge string are DER encoded as <code>PublicKeyAndChallenge</code>, and then digitally signed with the private key to produce a <code>SignedPublicKeyAndChallenge</code>. The <code>SignedPublicKeyAndChallenge</code> is {{Glossary("Base64")}} encoded, and the ASCII data is finally submitted to the server as the value of a form name/value pair, where the name is <var>name</var> as specified by the <code>name</code> attribute of the <code>keygen</code> element. If no challenge string is provided, then it will be encoded as an <code>IA5STRING</code> of length zero.</p> + +<p>Here is an example form submission as it would be delivered to a CGI program by the HTTP server:</p> + +<pre> commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.& + orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US& + key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre> + +<h2 id="Specifications">Specifications</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("HTML5 W3C", "forms.html#the-keygen-element", 'the <code><keygen></code> element')}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.keygen")}}</p> diff --git a/files/ko/web/html/element/label/index.html b/files/ko/web/html/element/label/index.html new file mode 100644 index 0000000000..2d99a140c5 --- /dev/null +++ b/files/ko/web/html/element/label/index.html @@ -0,0 +1,189 @@ +--- +title: <label> +slug: Web/HTML/Element/label +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><label></code> 요소</strong>는 사용자 인터페이스 항목의 설명을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.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><code><label></code> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:</p> + +<ul> + <li>label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. </li> + <li>관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.</li> +</ul> + +<p><code><label></code> 을 <code><input></code> 요소와 연관시키려면, <code><input></code> 에 <code>id</code> 속성을 넣어야합니다. 그런 다음 <code><label></code> 에 <code>id</code> 와 같은 값의 <code>for</code> 속성을 넣어야합니다. </p> + +<p>또는, <code><label></code> 안에 <code><input></code> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 <code>for</code> 및 <code>id</code>속성이 필요없습니다.</p> + +<pre class="brush: html"><label>Do you like peas? + <input type="checkbox" name="peas"> +</label> +</pre> + +<p>다른 사용법 메모:</p> + +<ul> + <li>label 이 붙여진 양식 컨트롤(form control) 은 <em>레이블된 제어 labeled control</em> 라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.</li> + <li>연관된 양식 컨트롤(form control) 이 있는 <code><label></code> 이 클릭되거나 터치되면, 이 label의 <code>click</code> 이벤트는 연관된 control 도 동작시킵니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>같은 문서 내의 <code><label></code> 요소로서, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>한 form-related 요소의 {{htmlattrxref("id")}}. 레이블 가능한 요소일 때, <code>for</code> 속성값과 일치하는 <code>id</code>를 가진 문서의 첫 번째 요소는 그 label 요소의 <em>라벨 제어(labeled control)</em>라고 합니다. label을 지정할 수 없으면 <code>for</code> 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 <code>id</code> 값과 일치하는 다른 요소들은 무시합니다. + <div class="note"> <code><label></code> 요소는 <code>for</code> 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 <code>for</code> 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.</div> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>label과 연관된 {{htmlelement ( "form")}} 요소(<em>양식 소유자 form owner</em>). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 {{HTMLElement ( "form")}} 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.</dd> +</dl> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><label></code> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_label_예제">간단한 label 예제</h3> + +<pre class="brush: html"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> + +<h3 id="for_속성_예제">"for" 속성 예제</h3> + +<pre class="brush: html"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="인터랙티브_콘텐츠">인터랙티브 콘텐츠</h3> + +<p>Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a <code>label</code>. Doing so makes it difficult for people to activate the form input associated with the <code>label</code>.</p> + +<p><code>label</code> 안에 {{HTMLElement ( "a", "anchors")}} 또는 {{HTMLElement ( "button", "buttons")}}와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 <code>label</code>과 관련된 양식을 입력하기 어렵습니다.</p> + +<h4 id="하지_마세요">하지 마세요</h4> + +<pre class="brush: html example-bad"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a> +</label> +</pre> + +<h4 id="이렇게_하세요">이렇게 하세요</h4> + +<pre class="brush: html example-good"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the Terms and Conditions +</label> +<p> + <a href="terms-and-conditions.html">Read our Terms and Conditions</a> +</p> +</pre> + +<h3 id="제목">제목</h3> + +<p>제목은 일반적으로 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">탐색 목적</a>의 보조 도구로 사용되므로 <code><label></code> 내에 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">제목 요소</a>를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, <code><label></code> 요소에 적용된 CSS 클래스를 사용하십시오.</p> + +<p><a href="/en-US/docs/Web/HTML/Element/form">양식(form)</a> 또는 양식의 섹션에 제목이 필요한 경우 {{HTMLElement ( "fieldset")}} 내에 배치 된 {{HTMLElement ( "legend")}} 요소를 사용하십시오.</p> + +<h4 id="하지_마세요_2">하지 마세요</h4> + +<pre class="brush: html example-bad"><label for="your-name"> + <h3>Your name</h3> + <input id="your-name" name="your-name" type="text"> +</label> +</pre> + +<h4 id="이렇게_하세요_2">이렇게 하세요</h4> + +<pre class="brush: html example-good"><label class="large-label" for="your-name"> + Your name + <input id="your-name" name="your-name" type="text"> +</label> </pre> + +<h3 id="버튼">버튼</h3> + +<p><code>type="button"</code>선언과 유효한 <code>value</code> 속성을 가진 {{HTMLElement ( "input")}} 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. {{HTMLElement ( "button")}} 요소에도 동일하게 적용됩니다.</p> + +<h2 id="기술_요약">기술 요약</h2> + +<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>, <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>. 단, 다른 <code><label></code> 요소는 자손으로 올 수 없습니다. 레이블을 지정한 컨트롤 외의 다른 <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("HTMLLabelElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</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', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>최초 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.label")}}</p> diff --git a/files/ko/web/html/element/legend/index.html b/files/ko/web/html/element/legend/index.html new file mode 100644 index 0000000000..522f96e610 --- /dev/null +++ b/files/ko/web/html/element/legend/index.html @@ -0,0 +1,91 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/legend +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><legend></code> 요소</strong>는 부모 {{HTMLElement("fieldset")}} 콘텐츠의 설명을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/legend.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</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>{{htmlelement("fieldset")}} 요소. <code><legend></code>가 첫 번째 자식이어야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLLegendElement")}}</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>만<span style="line-height: 21px;"> 포함합니다.</span></p> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("form")}}의 예제를 참고하세요.</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-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definition of the <code>legend</code> element</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.legend")}}</p> diff --git a/files/ko/web/html/element/li/index.html b/files/ko/web/html/element/li/index.html new file mode 100644 index 0000000000..03d7df653a --- /dev/null +++ b/files/ko/web/html/element/li/index.html @@ -0,0 +1,154 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><li></code> 요소</strong>는 목록의 항목을 나타냅니다.</span> 반드시 정렬 목록({{htmlelement("ol")}}), 비정렬 목록({{htmlelement("ul")}}, 혹은 메뉴({{htmlelement("menu")}}) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>다른 <code><li></code> 요소 바로 뒤따르거나 자신이 부모의 마지막 자식인 경우 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>{{HTMLElement("ol")}} 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. <code>value</code>를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. <code>value</code> 속성은 비정렬 목록({{HTMLElement("ul")}})과 메뉴({{HTMLElement("menu")}})에서는 아무 의미가 없습니다. + <div class="note"><strong>참고</strong>: HTML4에서는 <code>value</code>의 사용을 중단했지만 HTML5에서 다시 도입했습니다.</div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>넘버링 타입을 나타내는 문자. + <ul> + <li><code>a</code>: 소문자 글자</li> + <li><code>A</code>: 대문자 글자</li> + <li><code>i</code>: 소문자 로마 숫자</li> + <li><code>I</code>: 대문자 문자 숫자</li> + <li><code>1</code>: 숫자</li> + </ul> + 부모 {{HTMLElement("ol")}} 요소에서 지정하는 유형을 덮어씁니다. + + <div class="note"><strong>참고:</strong> 이 속성은 사용 중단됐습니다. 대신 CSS {{cssxref("list-style-type")}} 속성을 사용하세요.</div> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>더 자세한 예제는 {{htmlelement("ol")}}과 {{htmlelement("ul")}}을 참고하세요.</p> + +<h3 id="정렬_목록">정렬 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("정렬_목록")}}</p> + +<h3 id="사용자_지정_값을_가진_정렬_목록">사용자 지정 값을 가진 정렬 목록</h3> + +<pre class="brush: html"><ol type="I"> + <li value="3">third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("사용자_지정_값을_가진_정렬_목록")}}</p> + +<h3 id="비정렬_목록">비정렬 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul></pre> + +<p>{{EmbedLiveSample("비정렬_목록")}}</p> + +<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', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>type</code> attribute has been deprecated.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.li")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}.</li> + <li><code><li></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/link/index.html b/files/ko/web/html/element/link/index.html new file mode 100644 index 0000000000..fcbf91c85b --- /dev/null +++ b/files/ko/web/html/element/link/index.html @@ -0,0 +1,365 @@ +--- +title: '<link>: 외부 리소스 연결 요소' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - favicon + - metadata + - 메타데이터 + - 파비콘 +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><link></code></strong> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <code><link></code>는 {{glossary("CSS", "스타일 시트")}}를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</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>외부 스타일 시트를 연결하려면 {{htmlelement("head")}} 안에 다음과 같은 <code><link></code> 요소를 배치하세요.</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>위의 간단한 예제는 <code>href</code> 특성에 스타일 시트의 경로를, <code>rel</code> 특성에 <code>stylesheet</code>을 사용합니다. <code>rel</code>은 관계(<em>rel</em>ationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 <code><link></code> 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 참고서에서 볼 수 있듯 관계에는 다양한 종류가 있습니다.</p> + +<p>그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>아이콘을 위한 <code>rel</code> 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p><code>sizes</code> 특성은 아이콘 크기를, <code>type</code> 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.</p> + +<p><code>media</code> 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>새로운 성능 및 보안 관련 기능도 <code><link></code> 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p><code>rel</code>의 <code>preload</code> 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것(자세한 정보는 <a href="/ko/docs/Web/HTML/Preloading_content">이 문서</a>를 참고하세요)을 나타내고, <code>as</code> 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. <code>crossorigin</code> 특성은 리소스를 {{glossary("CORS")}} 요청으로 불러와야 하는지에 대한 값입니다.</p> + +<div class="hidden"> +<p>Other usage notes:</p> + +<ul> + <li>A <code><link></code> element can occur either in the {{HTMLElement("head")}} or {{HTMLElement("body")}} element, depending on whether it has a <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">link type</a> that is <strong>body-ok</strong>. For example, the <code>stylesheet</code> link type is body-ok, and therefore <code><link rel="stylesheet"></code> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <code><link></code> elements from your body content, putting them in the <code><head></code>.</li> + <li>When using <code><link></code> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</li> + <li>The HTML and XHTML specifications define event handlers for the <code><link></code> element, but it is unclear how they would be used.</li> + <li>Under XHTML 1.0, empty elements such as <code><link></code> require a trailing slash: <code><link /></code>.</li> + <li>WebTV supports the use of the value <code>next</code> for <code>rel</code> to preload the next page in a document series.</li> +</ul> +</div> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd><code><link></code> 요소에 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code> 특성을 지정했을 때만 사용합니다. <code>as</code> 특성은 <code><link></code> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, <code>rel="preload"</code>는 <code>as</code> 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">적용 대상</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio</code></td> + <td><code><audio></code> 요소</td> + </tr> + <tr> + <td><code>document</code></td> + <td><code><iframe></code>과 <code><frame></code> 요소</td> + </tr> + <tr> + <td><code>embed</code></td> + <td><code><embed></code> 요소</td> + </tr> + <tr> + <td><code>fetch</code></td> + <td> + <p><code>fetch</code>, XHR</p> + + <div class="blockIndicator note"> + <p><code>fetch</code> 값은 <code><link></code> 요소에 <code>crossorigin</code> 특성도 요구합니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>font</code></td> + <td>CSS <code>@font-face</code></td> + </tr> + <tr> + <td><code>image</code></td> + <td><code>srcset</code> 또는 <code>imageset</code> 특성을 가진 <code><img></code>와 <code><picture></code> 요소, SVG <code><image></code> 요소, CSS <code>*-image</code> 규칙</td> + </tr> + <tr> + <td><code>object</code></td> + <td><code><object></code> 요소</td> + </tr> + <tr> + <td><code>script</code></td> + <td><code><script></code> 요소, 워커 <code>importScripts</code></td> + </tr> + <tr> + <td><code>style</code></td> + <td><code><link rel=stylesheet></code> 요소, CSS <code>@import</code></td> + </tr> + <tr> + <td><code>track</code></td> + <td><code><track></code> 요소</td> + </tr> + <tr> + <td><code>video</code></td> + <td><code><video></code> 요소</td> + </tr> + <tr> + <td><code>worker</code></td> + <td>워커, 공유 워커</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. <a href="/ko/docs/Web/HTML/CORS_Enabled_Image">CORS 활성화 이미지</a>는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다. + <dl> + <dt><code>anonymous</code></dt> + <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd> + <dt><code>use-credentials</code></dt> + <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd> + </dl> + <code> crossorigin</code> 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 <strong>anonymous</strong>를 지정한 것으로 간주합니다. <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 특성</a> 문서에서 더 자세한 정보를 알아보세요.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p><code>rel="stylesheet"</code>에 한정하여, <code>disabled</code> 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 <code>disabled</code>를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 <code>disabled</code> 특성이 <code>false</code>로 바뀌거나 아예 제거될 때는 불러옵니다.</p> + + <p>DOM에서 <code>disabled</code> 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>에 따릅니다. {{htmlattrxref("href", "link")}} 특성이 존재할 때만 사용하세요.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.</dd> + <dd> + <p><strong><code>auto</code></strong>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 리소스의 우선순위를 결정합니다.</p> + + <p><strong><code>high</code></strong>: 브라우저에게 리소스가 <strong>높은</strong> 우선순위를 지님을 알려줍니다.</p> + + <p><strong><code>low</code></strong>: 브라우저에게 리소스가 <strong>낮은</strong> 우선순위를 지님을 알려줍니다.</p> + + <div class="blockIndicator note"> + <p><strong>참고: </strong><code>importance</code> 특성은 <code><link></code> 요소가 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code>를 가지고 있어야 사용할 수 있습니다.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. <code>media</code> 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다. + <div class="note"><strong>참고: </strong> + <ul> + <li>HTML 4에서는 이 특성의 값으로 사용할 수 있는<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(<a href="/en-US/docs/CSS/@media">media types and groups</a>)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의<a href="/en-US/docs/CSS/Media_queries">media queries</a>든 사용할 수 있습니다.</li> + <li><a href="/en-US/docs/CSS/Media_queries">CSS3 Media Queries</a>를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li> + <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> + <li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> + <li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>연결할 리소스와 현재 문서의 관계. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a>의 값을 공백으로 구분한 리스트를 지정해야 합니다.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: + <ul> + <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> + <li>a white-space separated list of sizes, each in the format <code><em><width in pixels></em>x<em><height in pixels></em></code> or <code><em><width in pixels></em>X<em><height in pixels></em></code>. Each of these sizes must be contained in the resource.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p> + </div> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="/ko/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/ko/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은<strong> text/html</strong>, <strong>text/css</strong>와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.</dd> +</dl> + +<h3 id="비표준_특성">비표준 특성</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<div class="hidden"> +<h3 id="폐기된_특성">폐기된 특성</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p> + </div> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="스타일_시트_포함하기">스타일 시트 포함하기</h3> + +<p>페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.</p> + +<pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="대체_스타일시트_제공하기">대체 스타일시트 제공하기</h3> + +<p><a href="/en-US/docs/Web/CSS/Alternative_style_sheets">대체 스타일시트</a>를 제공할 수도 있습니다.</p> + +<p>유저는 View>Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.</p> + +<pre class="brush: html notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> + +<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> + +<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="스타일_시트_load_이벤트">스타일 시트 load 이벤트</h3> + +<p>당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다:</p> + +<pre class="brush: html notranslate"><script> +function sheetLoaded() { + // Do something interesting; the sheet has been loaded +} + +function sheetError() { + alert("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>참고:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td>메타데이터 콘텐츠를 허용하는 모든 요소. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<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', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes from latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP 헤더</li> +</ul> diff --git a/files/ko/web/html/element/main/index.html b/files/ko/web/html/element/main/index.html new file mode 100644 index 0000000000..3ac94eb7d0 --- /dev/null +++ b/files/ko/web/html/element/main/index.html @@ -0,0 +1,172 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML grouping content + - HTML sections + - Reference +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><main></code> 요소</strong>는 문서 {{HTMLElement("body")}}의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.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> + +<p>{{htmlattrxref("hidden")}} 속성 없이는 문서에 하나보다 많은 <code><main></code> 요소가 존재해선 안됩니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</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/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 요소. 단, <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">구조적으로 올바른 <code><main></code> 요소</a>여야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>기본적으로 <code>main</code> 역할 포함, {{ARIARole("presentation")}} 가능.</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><main></code> 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.</p> + +<p><code><main></code>은 요소 개요에 영향을 주지 않습니다. {{htmlelement("body")}} 등의 요소나 {{htmlelement("h2")}}와 같은 제목 요소와 달리 <code><main></code>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><!-- other content --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- other content --></pre> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<h3 id="랜드마크">랜드마크</h3> + +<p><code><main></code> 요소는 <a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> 랜드마크</a> 역할과 동일하게 행동합니다. <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">랜드마크</a>는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, <code>role="main"</code>보다 <code><main></code> 요소를 사용하세요.</p> + +<h3 id="건너뛰기_링크">건너뛰기 링크</h3> + +<p>건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.</p> + +<p><code><main></code> 요소에 {{htmlattrxref("id")}} 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.</p> + +<pre class="brush: html"><body> + <a href="#main-content">Skip to main content</a> + + <!-- navigation and header content --> + + <main id="main-content"> + <!-- main page content --> + </main> +</body> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> +</ul> + +<h3 id="읽기_모드">읽기 모드</h3> + +<p>브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 <code><main></code> 요소와 더불어 <a href="/ko/docs/Web/HTML/Element/Heading_Elements">제목</a>과 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a> 요소를 사용합니다.</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Building websites for Safari Reader Mode and other reading apps.</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</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', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>대부분의 브라우저에서 <code><main></code> 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <code><main></code> 요소에 <code>"main"</code> {{glossary("ARIA")}} 역할을 명시해 접근성을 확보하는 것이 좋습니다.</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + + + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>기본 구조 요소: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>구획 관련 요소: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}}</li> + <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: Main role</a></li> +</ul> diff --git a/files/ko/web/html/element/map/index.html b/files/ko/web/html/element/map/index.html new file mode 100644 index 0000000000..a990f09dce --- /dev/null +++ b/files/ko/web/html/element/map/index.html @@ -0,0 +1,121 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Element + - HTML + - HTML embedded content + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/map +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><map></code> 요소</strong>는 {{htmlelement("area")}} 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/map.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> + +<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>, 뚜렷한 콘텐츠.</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("HTMLMapElement")}}</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("name")}}</dt> + <dd>맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야 하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안됩니다. <code>name</code> 특성은 문서 내의 모든 <code><map></code>에서 유일해야 합니다. {{htmlattrxref("id")}} 특성이 존재하는 경우 <code>name</code>과 값이 동일해야 합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html"> + <area shape="circle" coords="275,75,75" href="right.html"> +</map> +<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "350", "150")}}</p> + +<h3 id="예상_결과">예상 결과</h3> + +<p>키보드의 탭을 눌렀을 때, 위의 예제는 아래 사진처럼 나와야 합니다.</p> + +<p><code>left.html</code> 링크:<br> + <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p> + +<p><code>right:html</code> 링크:<br> + <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></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', 'embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.map")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/ko/web/html/element/mark/index.html b/files/ko/web/html/element/mark/index.html new file mode 100644 index 0000000000..77a5325fc5 --- /dev/null +++ b/files/ko/web/html/element/mark/index.html @@ -0,0 +1,161 @@ +--- +title: <mark> +slug: Web/HTML/Element/mark +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><mark></code> 요소</strong>는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>일반적인 <code><mark></code> 요소의 사용처는 다음과 같습니다.</p> + +<ul> + <li>인용문({{HTMLElement("q")}}, {{HTMLElement("blockquote")}})에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.</li> + <li>다른 경우, <code><mark></code>는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.</li> + <li><code><mark></code>를 표시만을 위한 용도로 사용하지 마세요. {{htmlelement("span")}}과 적절한 CSS를 대신 사용해야 합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><code><mark></code>와 {{HTMLElement("strong")}} 요소의 차이점을 기억하세요. 텍스트에서, <code><mark></code>는 연관성을 가진 부분을, <code><strong></code>은 중요도를 가진 부분을 나타낼 때 사용합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="관심_부분_표시하기">관심 부분 표시하기</h3> + +<p>첫 예제의 <code><mark></code> 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.</p> + +<pre class="brush: html"><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote></pre> + +<p>{{EmbedLiveSample("관심_부분_표시하기", 650, 130)}}</p> + +<h3 id="상황에_맞는_구절_식별">상황에 맞는 구절 식별</h3> + +<p>다음 예제는 글의 검색 결과를 강조할 용도로 <code><mark></code>를 사용합니다.</p> + +<pre class="brush: html"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<p>다른 <code><mark></code>와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 <code>"match"</code>를 추가로 적용했습니다.</p> + +<p>{{EmbedLiveSample("상황에_맞는_구절_식별", 650, 130)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><mark></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">mark::before, +mark::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +mark::before { + content: " [강조 시작] "; +} + +mark::after { + content: " [강조 끝] "; +} +</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<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', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.mark")}}</p> diff --git a/files/ko/web/html/element/menu/index.html b/files/ko/web/html/element/menu/index.html new file mode 100644 index 0000000000..c6034eb98e --- /dev/null +++ b/files/ko/web/html/element/menu/index.html @@ -0,0 +1,132 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p><strong>HTML <code><menu></code> 요소</strong>는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. Additionally, if in the <em>list menu</em> state, palpable content. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.<br> + If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("label")}}</dt> + <dd>사용자에게 보여지는 메뉴의 이름입니다. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>This attribute indicates the kind of menu being declared, and can be one of two values. + <ul> + <li><code>context</code>: The <em>context menu</em> state, which represents a group of commands activated through another element. This might be through the {{htmlattrxref("menu", "button")}} attribute of a {{HTMLElement("button")}}, or an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. When nesting {{HTMLElement("menu")}} elements directly within one another, this is the missing value default if the parent is already in this state.</li> + <li><code>list</code>: The <em>list menu</em> state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</li> + </ul> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: html"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="dropdown-menu"> + Dropdown +</button> + +<menu type="context" id="dropdown-menu"> + <menuitem label="Action"> + <menuitem label="Another action"> + <hr> + <menuitem label="Separated action"> +</menu> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example_1')}}</p> + +<h3 id="Example_2">Example 2</h3> + +<pre class="brush: html"><!-- A context menu for a simple editor, containing two menu buttons. --> +<menu> + <li> + <button type="menu" value="File" menu="file-menu"> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" value="Edit" menu="edit-menu"> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h3 id="Result_2">Result</h3> + +<p>{{EmbedLiveSample('Example_2')}}</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', 'interactive-elements.html#the-menu-element', '<menu>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-menu-element', '<menu>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} and the obsolete {{HTMLElement("dir")}}.</li> + <li>The <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with the <code>context</code> {{htmlattrxref("type","menu")}}.</li> +</ul> diff --git a/files/ko/web/html/element/meta/index.html b/files/ko/web/html/element/meta/index.html new file mode 100644 index 0000000000..3454e4d866 --- /dev/null +++ b/files/ko/web/html/element/meta/index.html @@ -0,0 +1,151 @@ +--- +title: '<meta>: 문서 레벨 메타데이터 요소' +slug: Web/HTML/Element/meta +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - metadata +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meta></code> 요소</strong>는 {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}과 같은 다른 메타관련 요소로 나타낼 수 없는 {{glossary("Metadata", "메타데이터")}}를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code><head></code> 내의 {{htmlelement("noscript")}} 요소도 가능합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p><code>meta</code> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.</p> + +<ul> + <li>{{htmlattrxref("name", "meta")}} 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.</li> + <li>{{htmlattrxref("http-equiv", "meta")}} 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.</li> + <li>{{htmlattrxref("charset", "meta")}} 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.</li> + <li>{{htmlattrxref("itemprop")}} 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{htmlattrxref("name", "meta")}} 특성은 <code><meta></code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code><meta></code> 요소에서, {{htmlattrxref("itemprop", "meta")}} 특성을 {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("charset", "meta")}} 특성과 함께 설정할 수 없습니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "<code>utf-8</code>"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>{{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("name", "meta")}} 특성의 값을 담습니다.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>프래그마 지시문을 정의합니다. 특성의 이름(<code><strong>http-equiv</strong>(alent)</code>)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.</p> + + <ul> + <li><code>content-security-policy</code> + + <p>현재 페이지의 <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">콘텐츠 정책</a>을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.</p> + </li> + <li><code>content-type</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>text/html; charset=utf-8</code>"이어야 합니다. <strong>참고:</strong> <code>text/html</code> <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.</p> + </li> + <li><code>default-style</code> + <p>기본 <a href="/ko/docs/Web/CSS">CSS 스타일 시트</a> 세트의 이름을 지정합니다.</p> + </li> + <li><code>x-ua-compatible</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>IE=edge</code>"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.</p> + </li> + <li><code>refresh</code> + <div>다음을 지정합니다.</div> + + <ul> + <li>{{htmlattrxref("content", "meta")}} 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.</li> + <li>{{htmlattrxref("content", "meta")}} 특성이 양의 정수 값을 가지고 그 뒤를 문자열 <code>;url=</code>과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.</li> + </ul> + + <h5 id="접근성_고려사항">접근성 고려사항</h5> + + <div><code>refresh</code> 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p><code>name</code>과 <code>content</code> 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. <code>name</code>은 이름, <code>content</code>는 값을 담당합니다.</p> + + <p><a href="/ko/docs/Web/HTML/Element/meta/name">표준 메타데이터 이름</a> 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- 3초 후 리다이렉트 --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<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', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added <code>itemprop</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/ko/web/html/element/meta/name/index.html b/files/ko/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..76333202b1 --- /dev/null +++ b/files/ko/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 표준 메타데이터 이름 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata + - 메타데이터 +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("meta")}} 요소는 {{htmlattrxref("name", "meta")}} 특성을 메타데이터 이름으로, {{htmlattrxref("content", "meta")}} 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.</span></p> + +<h3 id="HTML_명세가_정의하는_표준_메타데이터_이름">HTML 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.</p> + +<ul> + <li> + <p><code>application-name</code>: 웹 페이지에서 구동 중인 애플리케이션의 이름.</p> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. {{htmlelement("title")}} 요소 역시 보통 애플리케이션 이름을 포함하지만, <code>application-name</code>과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.</li> + <li>단순한 웹 페이지에서는 <code>application-name</code>을 지정하지 말아야 합니다.</li> + </ul> + </div> + </li> + <li><code>author</code>: 문서 저작자.</li> + <li><code>description</code>: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 <code>description</code> 메타데이터를 사용합니다.</li> + <li><code>generator</code>: 페이지를 생성한 소프트웨어의 식별자.</li> + <li><code>keywords</code>: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.</li> + <li><code>referrer</code>: 문서에서 시작하는 요청의 HTTP {{httpheader("Referer")}} 헤더를 아래 표와 같이 통제합니다. + <table class="standard-table"> + <caption><code><meta name="referrer"></code> 특성에 대한 <code>content</code> 특성의 값</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>문서의 {{glossary("origin", "출처")}}를 전송합니다.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code><meta name="referrer"></code>의 값을 {{domxref("Document.write", "document.write()")}} 또는 {{domxref("Node.appendChild", "appendChild()")}}를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.</li> + <li>여러 정책이 서로 충돌할 경우에는 <code>no-referrer</code> 정책을 사용합니다.</li> + </ul> + </div> + </li> + <li><code><a href="/ko/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. <code>content</code> 특성은 유효한 CSS {{cssxref("<color>")}} 색상을 포함해야 합니다.</li> +</ul> + +<h3 id="다른_명세가_정의하는_표준_메타데이터_이름">다른 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>color-scheme</code>: 문서와 호환되는 하나 이상의 색채 조합.</p> + + <p>브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <code><meta name="color-scheme"></code>의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.</p> + + <p><code>color-scheme</code>과 사용 가능한 {{htmlattrxref("content", "meta")}} 특성의 값은 다음과 같습니다.</p> + + <dl> + <dt><code>normal</code></dt> + <dd>문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.</dd> + <dt><code>only light</code></dt> + <dd>문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 <code>only dark</code>는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.</dd> + </dl> + + <p>예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p><code>name="color-scheme"</code>은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS {{cssxref("color-scheme")}} 속성은 개별 요소 단위로 지정합니다. CSS {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.</p> + </li> +</ul> + +<p>CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>viewport</code>: {{glossary("viewport", "뷰포트")}}의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.</p> + + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">가능한 하위 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>양의 정수 또는 <code>device-width</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>양의 정수 또는 <code>device-height</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>장치 너비(세로 모드에서는 <code>device-width</code>, 가로 모드에서는 <code>device-height</code>)와 뷰포트 너비의 비율을 정의합니다.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최대 확대 비율을 정의합니다. <code>minimum-scale</code> 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최소 확대 비율을 정의합니다. <code>maximum-scale</code> 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> 또는 <code>no</code></td> + <td><code>no</code>인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 <code>yes</code>입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>, <code>contain</code>, <code>cover</code></td> + <td> + <p><code>auto</code> 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.</p> + + <p><code>contain</code> 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.</p> + + <p><code>cover</code> 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. <a href="/ko/docs/Web/CSS/env">안전 영역</a> 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>비록 표준은 아니지만, <code>viewport</code>의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.</li> + <li>장치와 브라우저마다 기본값이 다를 수 있습니다.</li> + </ul> + </div> + + <h5 id="Accessibility_concerns_with_viewport_scaling">Accessibility concerns with viewport scaling</h5> + + <div><code>user-scalable</code>을 <code>no</code>로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="같이_보기">같이 보기</h5> + + <p>CSS {{cssxref("@viewport")}} @-규칙</p> + </li> +</ul> + +<h3 id="다른_메타데이터_이름">다른 메타데이터 이름</h3> + +<p><a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions 페이지</a>는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.</p> + +<ul> + <li><code>creator</code>: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 {{HTMLElement("meta")}} 요소를 사용해야 합니다.</li> + <li><code>googlebot</code>은 <code>robots</code>의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..</li> + <li><code>publisher</code>: 문서를 출판한 자의 이름.</li> + <li><code>robots</code>: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다 + <table class="standard-table"> + <caption><code><meta name="robots"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">설명</th> + <th scope="col">사용처</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>크롤러가 페이지를 색인할 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>크롤러가 페이지를 색인하지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>all</code></td> + <td><code>index, follow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td><code>noindex, nofollow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code>와 동일합니다.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.</li> + <li>메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 {{glossary("robots.txt")}}를 사용하세요.</li> + <li>이미 등록된 페이지를 검색 결과에서 제거할 수단으로 <code>noindex</code>를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 <code>robots.txt</code> 파일이 방문을 방지하고 있지는 않은지 확인하세요.</li> + <li><code>index</code>와 <code>noindex</code>, <code>follow</code>와 <code>nofollow</code>처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.</li> + <li>Google과 Bing 등 일부 크롤러는 위의 값을 HTTP <code>X-Robot-Tags</code> 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.</li> + </ul> + </div> + </li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.meta.name")}}</p> diff --git a/files/ko/web/html/element/meter/index.html b/files/ko/web/html/element/meter/index.html new file mode 100644 index 0000000000..c2f6a8fcbf --- /dev/null +++ b/files/ko/web/html/element/meter/index.html @@ -0,0 +1,142 @@ +--- +title: <meter> +slug: Web/HTML/Element/meter +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meter></code> 요소</strong>는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</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> + +<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>. 단, 다른 <code><meter></code> 요소는 사용할 수 없습니다.</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("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>현재의 값. 최소와 최댓값(<code>min</code>과 <code>max</code> 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 <code>0</code>으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다. + <div class="note"><strong>참고: </strong><code>value</code>가 <code>0</code> 이상 <code>1</code> 이하가 아닌 이상, <code>min</code>과 <code>max</code>를 정의해 <code>value</code> 값이 그 안에 들어가도록 해야 합니다.</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>측정 범위의 가능한 최솟값. 지정할 경우 최댓값(<code>max</code> 특성) 미만이어야 합니다. 지정하지 않은 경우 <code>0</code>입니다.</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>측정 범위의 가능한 최댓값. 지정할 경우 최솟값(<code>min</code> 특성)을 초과해야 합니다. 지정하지 않은 경우 <code>1</code>입니다.</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(<code>min</code> 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 <code>high</code>와 <code>max</code> 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(<code>max</code> 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 <code>low</code>와 <code>min</code> 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>이상적인 값. <code>min</code>과 <code>max</code> 특성으로 정의한 범위 내에 위치해야 합니다. <code>low</code>와 <code>high</code> 특성을 함께 사용한 경우, <code>optimum</code>은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 <code>min</code>과 <code>low</code> 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><meter></code>와 연결할 {{htmlelement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a>의 값 범위를 보여주는 등 <code><meter></code>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" + value="350">350 degrees</meter>.</p> +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("간단한_예제", 300, 60)}}</p> + +<p>Google Chrome에서는 다음 그림처럼 보입니다.</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="높은_범위와_낮은_범위">높은 범위와 낮은 범위</h3> + +<p>{{htmlattrxref("min", "meter")}} 특성의 기본값이 0이므로 생략한 것을 참고하세요.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("높은_범위와_낮은_범위", 300, 60)}}</p> + +<p>Google Chrome에서는 다음 그림처럼 보입니다.</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></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-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/ko/web/html/element/nav/index.html b/files/ko/web/html/element/nav/index.html new file mode 100644 index 0000000000..35a952cc43 --- /dev/null +++ b/files/ko/web/html/element/nav/index.html @@ -0,0 +1,101 @@ +--- +title: '<nav>: 탐색 구획 요소' +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - HTML sections + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><nav></code> 요소</strong>는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</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/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 규칙</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>문서의 모든 링크가 <code><nav></code> 요소 안에 있을 필요는 없습니다. <code><nav></code> 요소는 주요 탐색 링크 블록을 위한 요소입니다. 대개 {{htmlelement("footer")}} 요소가 <code><nav></code>에 들어가지 않아도 되는 링크를 포함합니다.</li> + <li><code><nav></code> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 {{HTMLElement("nav")}} 태그를 가질 수 있습니다. 이럴 때 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>를 사용해 접근성을 향상할 수 있습니다.</li> + <li>스크린 리더 등 장애를 가진 사용자를 위한 사용자 에이전트는 최초 렌더링에서 탐색 전용 콘텐츠를 제외할지 결정할 때 <code><nav></code>를 참고합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush:xml"><nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<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', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since latest W3C snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.nav")}}</p> diff --git a/files/ko/web/html/element/noscript/index.html b/files/ko/web/html/element/noscript/index.html new file mode 100644 index 0000000000..b4045a4008 --- /dev/null +++ b/files/ko/web/html/element/noscript/index.html @@ -0,0 +1,113 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><noscript></code> 요소</strong>는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.</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> + <p>스크립트가 비활성 상태이며 자신이 {{HTMLElement("head")}} 요소의 자손인 경우, 순서대로</p> + + <ul> + <li>0개 이상의 {{htmlelement("link")}} 요소</li> + <li>0개 이상의 {{htmlelement("style")}} 요소</li> + <li>0개 이상의 {{htmlelement("meta")}} 요소</li> + </ul> + + <p>스크립트가 비활성 상태이나 <code><head></code> 요소의 자손이 아닌 경우 모든 투명 콘텐츠. 단, 다른 <code><noscript></code> 요소는 불가능합니다.</p> + + <p>그 외의 경우 플로우 콘텐츠와 구문 콘텐츠.</p> + </td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>구문 콘텐츠를 허용하는 모든 요소, 또는 {{htmlelement("head")}}. 단, 두 경우 모두 다른 <code><noscript></code> 요소가 존재하는 경우 불가능합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><noscript> + <!-- anchor linking to external file --> + <a href="http://www.mozilla.com/">External Link</a> +</noscript> +<p>Rocks!</p> +</pre> + +<h3 id="스크립트_활성화_상태에서의_결과">스크립트 활성화 상태에서의 결과</h3> + +<p>Rocks!</p> + +<h3 id="스크립트_비활성화_상태에서의_결과">스크립트 비활성화 상태에서의 결과</h3> + +<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> + +<p>Rocks!</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', 'scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/ko/web/html/element/object/index.html b/files/ko/web/html/element/object/index.html new file mode 100644 index 0000000000..b6b1c5da99 --- /dev/null +++ b/files/ko/web/html/element/object/index.html @@ -0,0 +1,117 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/object +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><object></code> 요소</strong>는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/object.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> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>, palpable 컨텐츠; 만약 요소가 <strong>usemap </strong>속성을 가지고 있다면, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</li> + <li><dfn>허용된 컨텐츠</dfn> 0개 이상의 {{HTMLElement("param")}} elements, then <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</li> + <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li> + <li><dfn>허용된 부모 요소</dfn><a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLObjectElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 속성은 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>A space-separated list of URIs for archives of resources for the object.</dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The width of a border around the control, in pixels.</dd> + <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</dd> + <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</dd> + <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The content type of the data specified by <strong>classid</strong>.</dd> + <dt>{{htmlattrdef("data")}}</dt> + <dd>리소스의 URL. 최소 하나의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd> + <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code><object></code> element. In HTML5, repeat the <object> element completely each that that the resource is reused.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>object 요소와 관련된 form 요소. 이 속성의 값은 같은 문서의 {{HTMLElement("form")}} 요소의 ID 속성의 값이여야 합니다.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>표시될 리소스의 높이를 CSS 픽셀 단위로 지정합니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>유효한 브라우징 컨텍스트의 이름(HTML5) 또는, 컨트롤의 이름(HTML 4)</dd> + <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>A message that the browser can show while loading the object's implementation and data.</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><strong>data</strong>에 의해 지정된 리소스의 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>. 최소 한 개의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd> + <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt> + <dd><strong>type</strong>와 리소스의 실제 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>이 일치해야되는지를 나타내는 불리언 속성</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>{{HTMLElement("map")}} 요소에 대한 해쉬-이름 참조; #와 그 뒤에 map 요소의 {{htmlattrxref("name", "map")}} 값이 붙음</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>표시될 리소스의 가로 길이를 CSS 픽셀단위로 지정합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="포함된_플래시_무비">포함된 플래시 무비</h3> + +<pre class="brush: html"><!-- Embed a flash movie --> +<object data="move.swf" type="application/x-shockwave-flash"></object> + +<!-- Embed a flash movie with parameters --> +<object data="move.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</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-iframe-element.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.object")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("param")}}</li> +</ul> diff --git a/files/ko/web/html/element/ol/index.html b/files/ko/web/html/element/ol/index.html new file mode 100644 index 0000000000..52f8ef6dca --- /dev/null +++ b/files/ko/web/html/element/ol/index.html @@ -0,0 +1,207 @@ +--- +title: <ol> +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ol></code> 요소</strong>는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</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> + +<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>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</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>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{DOMxRef("HTMLOListElement")}}</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("reversed")}}</dt> + <dd>목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.</dd> + <dt>{{htmlattrdef("start")}}</dt> + <dd>항목을 셀 때 시작할 수. <code>type</code>이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 <code>start="4"</code>를 사용하세요.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>항목을 셀 때 사용할 카운터 유형. + <ul> + <li><code>'a'</code>는 소문자 알파벳,</li> + <li><code>'A'</code>는 대문자 알파벳,</li> + <li><code>'i'</code>는 소문자 로마 숫자,</li> + <li><code>'I'</code>는 대문자 로마 숫자,</li> + <li><code>'1'</code> 는 숫자(기본값)을 나타냅니다.</li> + </ul> + + <p><code>type</code>은 아래의 모든 {{htmlelement("li")}}에 적용되지만, {{htmlattrxref("type", "li")}} 특성을 가진 <code><li></code>는 그 값을 대신 사용합니다.</p> + + <div class="note"><strong>참고:</strong> 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS {{cssxref("list-style-type")}} 속성을 대신 사용하세요.</div> + </dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p>보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p> + +<p><code><ol></code>과 {{htmlelement("ul")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p> + +<p><code><ol></code>과 {{htmlelement("ul")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code><ol></code>에서는 순서가 중요하다는 점입니다. 예를 들어,</p> + +<ul> + <li>단계별 요리법</li> + <li>내비게이션</li> + <li>영양정보에서 비율의 내림차순으로 정렬한 원재료 목록</li> +</ul> + +<p>항목의 순서를 바꿨을 때 의미도 바뀐다면 <code><ol></code>을 사용하세요. 그렇지 않으면 {{htmlelement("ul")}}을 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p> + +<h3 id="로마_숫자로_표기">로마 숫자로 표기</h3> + +<pre class="brush: html"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>{{EmbedLiveSample("로마_숫자로_표기", 400, 100)}}</p> + +<h3 id="start_특성_사용하기"><code>start</code> 특성 사용하기</h3> + +<pre class="brush: html"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("start_특성_사용하기", 400, 100)}}</p> + +<h3 id="중첩_목록">중첩 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("중첩_목록", 400, 150)}}</p> + +<h3 id="정렬_목록_안의_비정렬_목록">정렬 목록 안의 비정렬 목록</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("정렬_목록_안의_비정렬_목록", 400, 150)}}</p> + +<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', 'grouping-content.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><ol></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/optgroup/index.html b/files/ko/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..b735d6ec1b --- /dev/null +++ b/files/ko/web/html/element/optgroup/index.html @@ -0,0 +1,120 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><optgroup></code> 요소</strong>는 {{HTMLElement("select")}} 요소의 옵션을 묶을 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("option")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 다른 <code><optgroup></code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("select")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code><optgroup></code> 요소는 중첩할 수 없습니다.</p> +</div> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><select> + <optgroup label="Group 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Group 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Group 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.optgroup")}}</p> diff --git a/files/ko/web/html/element/option/index.html b/files/ko/web/html/element/option/index.html new file mode 100644 index 0000000000..8120464d9f --- /dev/null +++ b/files/ko/web/html/element/option/index.html @@ -0,0 +1,101 @@ +--- +title: <option> +slug: Web/HTML/Element/option +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><option></code> 요소</strong>는 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소의 항목을 정의합니다.</span> 그러므로, <code><option></code>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/option.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>텍스트. 이스케이프 처리한 문자(<code>&eacute;</code> 등)도 가능.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 {{htmlelement("optgroup")}}, 다른 <code><option></code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. <code><option></code>에 <code>disabled</code> 특성을 추가하지 않더라도, {{HTMLElement("optgroup")}} 등 조상 요소로 인해 비활성화될 수 있습니다.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. {{htmlattrxref("multiple", "select")}}를 지정하지 않은 {{HTMLElement("select")}} 요소의 자손인 경우, 하나의 <code><option></code>만 <code>selected</code> 특성을 가질 수 있습니다.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("select")}} 요소를 참고하세요.</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-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.option")}}</p> 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> diff --git a/files/ko/web/html/element/p/index.html b/files/ko/web/html/element/p/index.html new file mode 100644 index 0000000000..9a993c089e --- /dev/null +++ b/files/ko/web/html/element/p/index.html @@ -0,0 +1,175 @@ +--- +title: <p> +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - HTML grouping content + - Reference + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><p></code> 요소</strong>는 하나의 문단을 나타냅니다.</span> 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.</p> + +<p>문단은 블록 레벨 요소이며, 자신의 닫는 태그(<code></p></code>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>시작 태그는 필수입니다. 닫는 태그는 {{HTMLElement("p")}} 요소의 바로 뒤에 {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, {{HTMLElement("p")}} 요소가 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가 {{HTMLElement("a")}} 요소가 아닐 때 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>첫 번째 문단입니다. + 첫 번째 문단입니다. + 첫 번째 문단입니다. + 첫 번째 문단입니다.</p> +<p>두 번째 문단입니다. + 두 번째 문단입니다. + 두 번째 문단입니다. + 두 번째 문단입니다.</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="문단_꾸미기">문단 꾸미기</h2> + +<p>브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 {{glossary("CSS")}}를 통해 사용할 수 있습니다.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, +첫 줄 들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 +공간과 종이를 아끼기 위해 사용합니다.</p> + +<p>학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다. +그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.</p> + +<p>아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로 +구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.</p> + +<p>얼마나 읽기 힘들까요? 직접 알아보세요. + <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button> +</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('pilcrow'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="결과_2">결과</h3> + +<p>{{EmbedLiveSample('문단_꾸미기')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.</p> + +<p>빈 <code><p></code> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.</p> + +<p>여분의 공간이 필요하다면 {{cssxref("margin")}} 등 {{glossary("CSS")}} 속성을 통해 적용하세요.</p> + +<pre class="brush: html">p { + margin-bottom: 2em; // 문단 다음 여백을 늘림 +}</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', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/ko/web/html/element/param/index.html b/files/ko/web/html/element/param/index.html new file mode 100644 index 0000000000..73cc02c32f --- /dev/null +++ b/files/ko/web/html/element/param/index.html @@ -0,0 +1,116 @@ +--- +title: '<param>: 객체 매개변수 요소' +slug: Web/HTML/Element/param +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/param +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><param></code> 요소</strong>는 {{HTMLElement("object")}} 요소의 매개변수를 정의합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리 </a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{HTMLElement("object")}}. 모든 <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("HTMLParamElement")}}</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("name")}}</dt> + <dd>매개변수의 이름.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>매개변수의 값.</dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>Only used if the <code>valuetype</code> is set to <code>ref</code>. Specifies the MIME type of values found at the URI specified by value.</dd> + <dt>{{htmlattrdef("valuetype")}} {{deprecated_inline}}</dt> + <dd>Specifies the type of the <code>value</code> attribute. Possible values are: + <ul> + <li><code>data</code>: Default value. The value is passed to the object's implementation as a string.</li> + <li><code>ref</code>: The value is a URI to a resource where run-time values are stored.</li> + <li><code>object</code>: An ID of another {{HTMLElement("object")}} in the same document.</li> + </ul> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<p>{{HTMLElement("object")}} 페이지의 예제를 확인해주세요.</p> + +<h2 id="Specifications" name="Specifications">명세</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', 'iframe-embed-object.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.param")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("object")}}</li> +</ul> diff --git a/files/ko/web/html/element/pre/index.html b/files/ko/web/html/element/pre/index.html new file mode 100644 index 0000000000..9cc0ef51ca --- /dev/null +++ b/files/ko/web/html/element/pre/index.html @@ -0,0 +1,150 @@ +--- +title: <pre> +slug: Web/HTML/Element/pre +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><pre></code> 요소</strong>는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.</span> 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLPreElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.</dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>CSS로 글자 색을 바꾸는건 쉽습니다.</p> +<pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p><code><pre></code> 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.</p> + +<p>시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.</p> + +<p>{{htmlelement("figure")}}과 {{htmlelement("figcaption")}}에 더해 {{htmlattrxref("id")}}와 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code>과 <code>aria-labelledby</code> 특성을 조합하면 <code><pre></code>를 마치 이미지처럼 표현하면서 <code><figcaption></code>을 대체 설명으로 사용할 수 있습니다.</p> + +<h3 id="예제_2">예제</h3> + +<pre><figure role="img" aria-labelledby="cow-caption"> + <pre> + _______________________ +< 나는 이 분야의 전문가다. > + ----------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="cow-caption"> + 소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다. + </figcaption> +</figure> +</pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<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', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No significant change from {{SpecName("HTML WHATWG")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>No significant change from {{SpecName("HTML4.01")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>cols</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li> +</ul> diff --git a/files/ko/web/html/element/progress/index.html b/files/ko/web/html/element/progress/index.html new file mode 100644 index 0000000000..c586671c0d --- /dev/null +++ b/files/ko/web/html/element/progress/index.html @@ -0,0 +1,122 @@ +--- +title: <progress> +slug: Web/HTML/Element/progress +tags: + - Element + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><progress></code> 요소</strong>는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.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> + +<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>, 레이블 가능, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC#%EA%B5%AC%EB%AC%B8_%EC%BD%98%ED%85%90%EC%B8%A0">.</a> 단, 다른 <code><progress></code> 요소는 사용할 수 없습니다.</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("HTMLProgressElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd><code><progress></code> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd><code><progress></code> 요소가 나타내는 작업을 완료한 양. 유효현 부동소수점 숫자여야 하고, <code>max</code> 특성을 지정한 경우 0 이상 <code>max</code> 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. <code>value</code> 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> {{htmlelement("meter")}} 요소와 달리, 최솟값은 항상 0이며 <code>min</code> 특성을 지정할 수 없습니다.</p> +</div> + +<div class="note"> +<p><strong>참고:</strong> CSS {{cssxref(":indeterminate")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}를 사용해 <code>value</code> 특성을 제거해야 합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample("예제", 200, 50) }}</p> + +<p>Windows 7에서는 다음과 같은 모습으로 나타납니다.</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></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-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/ko/web/html/element/q/index.html b/files/ko/web/html/element/q/index.html new file mode 100644 index 0000000000..2634e98b63 --- /dev/null +++ b/files/ko/web/html/element/q/index.html @@ -0,0 +1,111 @@ +--- +title: '<q>: 인라인 인용문 요소' +slug: Web/HTML/Element/q +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><q></code>요소</strong>는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.</span> 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <code><q></code>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 {{htmlelement("blockquote")}} 요소를 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>참고:</strong> 오래된 브라우저에서는 앞뒤 따옴표를 적용하려면 추가 스타일을 사용해야 할 수 있습니다.</p> +</div> + +<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("cite")}}</dt> + <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><p>Mozilla 재단의 웹사이트에 따르면, + <q + cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 + 은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q></p></pre> + +<p>{{EmbedLiveSample('예제')}}</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', 'semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.q")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li> + <li>출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/rb/index.html b/files/ko/web/html/element/rb/index.html new file mode 100644 index 0000000000..b34272a9e3 --- /dev/null +++ b/files/ko/web/html/element/rb/index.html @@ -0,0 +1,150 @@ +--- +title: '<rb>: 루비 베이스 요소' +slug: Web/HTML/Element/rb +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Text + - Web +translation_of: Web/HTML/Element/rb +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rb></code> 요소</strong>는 {{HTMLElement("ruby")}} 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.</span> 하나의 <code><rb></code> 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.</p> + +<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>{{htmlelement("ruby")}} 요소의 자손.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}}, 다른 <code><rb></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rb></code> 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.</li> + <li><code><rb></code>는 {{glossary("empty element", "빈 요소")}}가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.</li> + <li>각각의 <code><rb></code> / 기반 조각 하나마다 {{htmlelement("rt")}} 요소 하나를 작성해야 합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.</p> + +<pre class="brush: html"><ruby> + <rb>景<rb>福<rb>宮 + <rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp> +</ruby></pre> + +<p>세 개의 <code><rb></code> 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 {{htmlelement("rt")}} 요소를 사용합니다.</p> + +<p>세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 <code><rb></code> 요소를 사용하지 않아도 됩니다.</p> + +<pre class="brush: html"><ruby> + 景 <rp>(</rp><rt>경</rt><rp>)</rp> + 福 <rp>(</rp><rt>복</rt><rp>)</rp> + 宮 <rp>(</rp><rt>궁</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<div id="with-ruby"> +<pre class="brush: html"><ruby> <rb>景<rb>福<rb>宮 <rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp> </ruby> +</pre> + +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">景福宮 (경복궁)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<div class="note"> +<p><strong>참고</strong>: {{HTMLElement("ruby")}} 요소 참고서를 방문해 다른 예제도 살펴보세요.</p> +</div> + +<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('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '<rb>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rb")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/ko/web/html/element/rp/index.html b/files/ko/web/html/element/rp/index.html new file mode 100644 index 0000000000..9a803de3c5 --- /dev/null +++ b/files/ko/web/html/element/rp/index.html @@ -0,0 +1,134 @@ +--- +title: '<rp>: 루비 대체 괄호 요소' +slug: Web/HTML/Element/rp +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rp></code> 요소</strong>는 {{htmlelement("ruby")}} 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.</span> {{htmlelement("rt")}} 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 <code><rp></code> 요소로 나타내야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>텍스트.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, 다른 <code><rp></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소. <code><rp></code>는 {{htmlelement("rt")}} 요소의 바로 앞 또는 바로 뒤에 위치해야 합니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</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> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rp></code> 요소는 {{htmlelement("ruby")}} 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.</p> + +<div id="with-ruby"> +<pre class="brush: html"><ruby> + 景 <rp>(</rp><rt>경</rt><rp>)</rp> + 福 <rp>(</rp><rt>복</rt><rp>)</rp> + 宮 <rp>(</rp><rt>궁</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">景 (경) 福 (복) 宮 (궁)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</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', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/ko/web/html/element/rt/index.html b/files/ko/web/html/element/rt/index.html new file mode 100644 index 0000000000..5cde18c84c --- /dev/null +++ b/files/ko/web/html/element/rt/index.html @@ -0,0 +1,129 @@ +--- +title: '<rt>: 루비 텍스트 요소' +slug: Web/HTML/Element/rt +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Web +translation_of: Web/HTML/Element/rt +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><rt></code> 요소</strong>는 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</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>바로 뒤따르는 요소가 {{htmlelement("rp")}}, 다른 <code><rt></code> 요소거나 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 {{htmlelement("ruby")}} 요소를 사용해 한자의 발음을 표기합니다.</p> + +<div id="with-ruby"> +<pre class="brush: html"><ruby> + 漢 <rt>한</rt> + 字 <rt>자</rt> +</ruby> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("with-ruby", 600, 60)}}</p> + +<p>브라우저가 루비를 지원하지 않는 경우엔 다음처럼 보일 것입니다.</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢 한 字 자</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</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', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rt")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> +</ul> diff --git a/files/ko/web/html/element/rtc/index.html b/files/ko/web/html/element/rtc/index.html new file mode 100644 index 0000000000..9fd51a5c36 --- /dev/null +++ b/files/ko/web/html/element/rtc/index.html @@ -0,0 +1,121 @@ +--- +title: '<rtc>: 루비 텍스트 콘테이너 요소' +slug: Web/HTML/Element/rtc +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/rtc +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><rtc></code> 요소</strong>는 {{htmlelement("rb")}} 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다.</span> <code><rb></code>는 발음({{htmlelement("rt")}})과 의미(<code><rtc></code>) 둘 다 가질 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a> 또는 {{htmlelement("rt")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>바로 뒤따르는 요소가 {{htmlelement("rb")}}, {{htmlelement("rt")}}, 다른 <code><rtc></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{htmlelement("ruby")}} 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html highlight[8]"><div class="info"> + <ruby> + <rbc> + <rb>馬</rb><rt>마</rt> + <rb>來</rb><rt>래</rt> + <rb>西</rb><rt>서</rt> + <rb>亞</rb><rt>아</rt> + </rbc> + <rtc>말레이시아</rtc> + </ruby> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">.info { + padding-top: 10px; + font-size: 36px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("예제", 600, 120)}}</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('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.rtc")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rbc")}}</li> +</ul> diff --git a/files/ko/web/html/element/ruby/index.html b/files/ko/web/html/element/ruby/index.html new file mode 100644 index 0000000000..7a8dffa036 --- /dev/null +++ b/files/ko/web/html/element/ruby/index.html @@ -0,0 +1,110 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ruby></code> 요소</strong>는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="문자별_표기">문자별 표기</h3> + +<pre class="brush:html"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<p>{{EmbedLiveSample("문자별_표기")}}</p> + +<h3 id="단어별_표기">단어별 표기</h3> + +<pre class="brush:html"><ruby> + 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> +</ruby></pre> + +<p>{{EmbedLiveSample("단어별_표기")}}</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', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> +</ul> diff --git a/files/ko/web/html/element/s/index.html b/files/ko/web/html/element/s/index.html new file mode 100644 index 0000000000..8edc9424cc --- /dev/null +++ b/files/ko/web/html/element/s/index.html @@ -0,0 +1,126 @@ +--- +title: <s> +slug: Web/HTML/Element/s +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><s></code> 요소</strong>는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.</span> <code><s></code> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <code><s></code>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 {{HTMLElement("del")}}과 {{HTMLElement("ins")}} 요소를 대신 사용하세요.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/s.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> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 요소</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><s>Today's Special: Salmon</s> SOLD OUT<br> +</pre> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>대부분의 스크린 리더는 기본값에서 <code><s></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> + +<pre class="brush: css">s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [취소선 시작] "; +} + +s::after { + content: " [취소선 끝] "; +} +</pre> + +<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 취소선의 유무가 꼭 필요할 때만 사용해야 합니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<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','semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','textlevel-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.s")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>자료가 <strong>삭제</strong>된 경우 사용하는 {{HTMLElement("del")}} 요소.</li> + <li><code><s></code> 요소의 시각적 요소를 재현할 수 있는 CSS {{cssxref("text-decoration-line")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/samp/index.html b/files/ko/web/html/element/samp/index.html new file mode 100644 index 0000000000..44c10296f9 --- /dev/null +++ b/files/ko/web/html/element/samp/index.html @@ -0,0 +1,156 @@ +--- +title: '<samp>: 출력 예시 요소' +slug: Web/HTML/Element/samp +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/samp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><samp></code> 요소</strong>는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.</span> 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</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/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>브라우저가 <code><samp></code> 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.</p> + +<p>기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.</p> + +<pre class="brush: css">samp { + font-family: "Courier"; +}</pre> + +<div class="note"> +<p><strong>참고:</strong> 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 {{HTMLElement("output")}} 요소를 사용해야 합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p>다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.</p> + +<pre class="brush: html"><p>프로세스가 완료되면 유틸리티가 <samp>Scan complete. Found <em>N</em> results.</samp> +를 출력합니다. 출력을 확인한 후 다음 단계로 진행하세요.</p></pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("기본_예제", 650, 100)}}</p> + +<h3 id="사용자_입력을_포함한_출력_예시">사용자 입력을 포함한 출력 예시</h3> + +<p><code><samp></code> 블록 안에 {{htmlelement("kbd")}} 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><pre> +<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd> +MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 + +<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre></pre> + +<p>{{HTMLElement("span")}}을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, <code><kbd></code>를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.</p> + +<h4 id="CSS">CSS</h4> + +<p>원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.</p> + +<pre class="brush: css">.prompt { + color: #b00; +} + +samp > kbd { + font-weight: bold; +} + +.cursor { + color: #00b; +}</pre> + +<p>프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.</p> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("사용자_입력을_포함한_출력_예시", 650, 120)}}</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', 'semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.samp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>관련 요소: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li> + <li>스크립트로 생성한 출력을 담는 {{HTMLElement("output")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/script/index.html b/files/ko/web/html/element/script/index.html new file mode 100644 index 0000000000..15c1b924b4 --- /dev/null +++ b/files/ko/web/html/element/script/index.html @@ -0,0 +1,220 @@ +--- +title: '<script>: 스크립트 요소' +slug: Web/HTML/Element/script +tags: + - Element + - HTML + - HTML scripting + - 'HTML:Flow content' + - 'HTML:Metadata content' + - 'HTML:Phrasing content' + - 'HTML:Script-supporting element' + - Reference + - Web +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><script></code> 요소</strong>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.</span> <a href="/ko/docs/Web/API/WebGL_API">WebGL</a>의 GLSL 셰이더 프로그래밍 언어, <a href="/ko/docs/Glossary/JSON">JSON</a> 등 다른 언어와도 사용할 수 있습니다.</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><code>text/javascript</code>와 같은 동적 스크립트.</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> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용한 아무 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("async")}}</dt> + <dd> + <p>일반 스크립트에 <code>async</code> 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다.</p> + + <p><a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>에 <code>async</code> 속성이 존재하면 모듈 스크립트와 모든 의존 스크립트를 지연 큐에서 실행하므로 함께 병렬로 불러오며, 이와 동시에 구문 분석을 수행하고 사용 가능해지는 즉시 평가합니다.</p> + + <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>async</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>defer</code>도 비슷한 효력을 냅니다.</p> + + <p><code>async</code>는 불리언 속성입니다. 속성이 존재하면 참을 나타내고, 속성이 존재하지 않으면 거짓을 나타냅니다.</p> + + <p>{{anch("브라우저 호환성")}}을 참고하세요.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>일반 <code>script</code> 요소는 표준 {{glossary("CORS")}}를 통과하지 못했을 때 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}에 최소한의 정보만 넘깁니다. <code>crossorigin</code> 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있습니다. 유효한 인수에 대한 보다 자세한 설명은 <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 속</a>성 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd> + <p>브라우저가 스크립트를 문서 분석 이후에, 그러나 {{event("DOMContentLoaded")}} 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.</p> + + <p><code>defer</code> 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 <code>DOMContentLoaded</code> 이벤트의 발생을 막습니다.</p> + + <div class="warning"> + <p><code>src</code> 속성이 존재하지 않을 때(인라인 스크립트인 경우 등)에는 아무런 효과도 없으므로 사용해서는 안됩니다.</p> + + <p>또한 <a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>는 기본적으로 지연 평가하므로, <code>defer</code>를 지정해도 변화가 없습니다.</p> + </div> + + <p><code>defer</code> 속성을 가진 스크립트는 문서상의 순서를 따라 실행됩니다.</p> + + <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>defer</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>async</code>도 비슷한 효과를 가집니다.</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}가 가져온 리소스에 예기치 못한 변형이 존재하는지 검사할 때 사용할 인라인 메타데이터입니다. <a href="/ko/docs/Web/Security/Subresource_Integrity">하위 리소스 무결성</a> 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 모듈</a>을 지원하는 브라우저에서는 실행하지 않을 스크립트임을 나타내는 불리언 특성입니다. 모듈화 JavaScript를 지원하지 않는 오래된 브라우저가 사용할 대체 스크립트에 사용할 수 있습니다.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code> <code>Content-Security-Policy</code></a>의 화이트리스트에 스크립트를 등록하기 위한, 암호화된 일회용 숫자(논스, nonce)입니다. 서버는 고유한 일회용 숫자값을 정책을 전송할 때마다 생성해야 합니다. 자원의 정책을 우회할 수 없도록, 추측할 수 없는 임시값을 제공하는 것이 중요합니다.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 <a href="/ko/docs/Web/API/Document/referrer">리퍼러</a>를 나타냅니다. + <ul> + <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>no-referrer-when-downgrade</code> (기본값): {{glossary("TLS")}}({{glossary("HTTPS")}}) 지원을 하지 않는 {{glossary("origin", "출처")}}에 대해서는 {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li> + <li><code>origin</code>: <code>Referer</code> 헤더가 요청 출처({{glossary("protocol", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}})를 포함합니다.</li> + <li><code>origin-when-cross-origin</code>: <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처</a> 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</li> + <li><code>same-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</li> + <li><code>strict-origin</code>: 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</li> + <li><code>strict-origin-when-cross-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</li> + <li><code>unsafe-url</code>: 동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다. TLS로 보호하는 리소스에서 안전하지 않은 출처에 경로까지 노출하므로 <strong>안전하지 않습니다</strong>.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>참고</strong>: 빈 문자열 값(<code>""</code>)은 기본값이자 <code>referrerpolicy</code> 특성을 지원하지 않는 경우 사용하는 대체값입니다. <code>referrerpolicy</code>를 <code><script></code> 요소에 명시하지 않은 경우 더 상위 단계의 정책, 즉 문서 자체나 도메인의 정책을 따라갑니다. 상위 단계 정책도 사용할 수 없을 땐 빈 문자열을 <code>no-referrer-when-downgrade</code>로 간주합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>외부 스크립트를 가리키는 {{glossary("URI")}}입니다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>스크립트의 유형을 나타냅니다. 다음 다섯개의 범주 중 하나에 속할 수 있습니다.</p> + + <ul> + <li><strong>생략 또는 JavaScript MIME 유형:</strong> 스크립트가 JavaScript임을 나타냅니다. 이 경우, HTML5 명세는 웹 작성자가 불필요한 <code>type</code>을 포함하지 않고 완전히 제외할 것을 촉구합니다. 보다 오래된 브라우저에서는 <code>type</code> 특성의 값으로 삽입 혹은 (<code>src</code> 특성으로) 불러온 스크립트의 언어를 표시하곤 했습니다. JavaScript MIME 유형은 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">명세에 나열</a>되어 있습니다.</li> + <li><strong><code>module</code>:</strong> 스크립트를 JavaScript 모듈로 간주합니다. 스크립트 콘텐츠 처리가 <code>charset</code>과 <code>defer</code> 특성의 영향을 받지 않습니다. <code>module</code>의 더 자세한 사용법은 MDN의 <a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈 안내서</a>를 참고하세요. 기존 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기 시 CORS 프로토콜을 사용해야 합니다.</li> + <li><strong>다른 모든 값:</strong> 내장 콘텐츠를 브라우저가 처리하지 않을 데이터 블록으로 간주합니다. 개발자는 반드시 유효하면서 JavaScript가 아닌 MIME 유형을 지정해야 합니다. <code>src</code> 특성을 무시합니다.</li> + </ul> + </dd> +</dl> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> +</div> + +<h2 id="참고">참고</h2> + +<p>브라우저가 구문 분석을 진행하다 인라인 스크립트 또는 {{htmlattrxref("async", "script")}}, {{htmlattrxref("defer", "script")}}, <code>type="module"</code> 특성이 없는 스크립트에 도달하면 스크립트를 가져온 후 실행하기 전까지 분석을 중단합니다.</p> + +<p>스크립트는 <code>text/javascript</code> MIME 유형을 설정해야 하나, 브라우저는 관대한 규칙을 적용하여 이미지 형태(<code>image/*</code>), 비디오 형태(<code>video/*</code>), 오디오 형태(<code>audio/*</code>), <code>text/csv</code> 형태로 스크립트를 불러오려는 경우만 차단하고 나머지는 허용합니다. 스크립트를 차단한 경우 {{event("load")}} 대신 {{event("error")}} 이벤트를 요소에 전송합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본">기본</h3> + +<p>다음 예제는 <code><script></code> 요소를 사용해 외부 스크립트를 가져오는 법을 보입니다.</p> + +<pre class="brush: html notranslate"><script src="javascript.js"></script> +</pre> + +<p>그리고 아래 코드는 <code><script></code> 요소 내부에 인라인 스크립트를 작성하는 예시입니다.</p> + +<pre class="brush: html notranslate"><script> + alert("Hello World!"); +</script></pre> + +<h3 id="모듈_대체_스크립트">모듈 대체 스크립트</h3> + +<p>{{htmlattrxref("type", "script")}} 특성이 <code>module</code>을 지원하는 브라우저는 <code>nomodule</code> 특성을 가진 모든 <code><script></code>를 무시합니다. 그러므로 모듈 스크립트를 사용하면서도, 미지원 브라우저를 위한 대체 스크립트를 <code>nomodule</code>로 표시해 제공할 수 있습니다.</p> + +<pre class="brush: js notranslate"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></pre> + +<h3 id="HTML에_데이터_삽입하기">HTML에 데이터 삽입하기</h3> + +<p><script> 요소와 JavaScript 외의 유효한 MIME 유형을 사용하면 서버사이드 렌더링을 통해 HTML에 데이터를 삽입할 수 있습니다.</p> + +<pre class="brush: html notranslate"><!-- Generated by the server --> +<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script> + +<!-- Static --> +<script> + const userInfo = JSON.parse(document.getElementById("data").text); + console.log("User information: %o", userInfo); +</script></pre> + +<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", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.script", 2)}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove의 <code><script></code>와 <code><link></code> 노드 이벤트 호환성 차트</a></li> +</ul> diff --git a/files/ko/web/html/element/section/index.html b/files/ko/web/html/element/section/index.html new file mode 100644 index 0000000000..46efafc2b0 --- /dev/null +++ b/files/ko/web/html/element/section/index.html @@ -0,0 +1,123 @@ +--- +title: '<section>: 일반 구획 요소' +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><section></code> 요소</strong>는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.</span> 보통 <code><section></code>은 제목을 포함하지만, 항상 그런 것은 아닙니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.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>: 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 {{htmlelement("article")}} 요소가 더 좋은 선택일 수 있습니다.</p> +</div> + +<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>, 뚜렷한 콘텐츠.</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>를 허용하는 모든 요소.<br> + 단, <code><section></code> 요소는 {{HTMLElement("address")}}의 자손이 될 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>각각의 <code><section></code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code><section></code>의 자식으로 포함하는 방법을 사용합니다.</li> + <li>요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 {{htmlelement("article")}} 요소를 고려하세요.</li> + <li><code><section></code> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 {{htmlelement("div")}} 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <code><section></code>이 좋은 선택입니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="이전">이전</h3> + +<pre class="brush: html"><div> + <h2>Heading</h2> + <img>some image</img> +</div> +</pre> + +<h3 id="이후">이후</h3> + +<pre class="brush: html"><section> + <h2>Heading</h2> + <img>some image</img> +</section> +</pre> + +<h2 id="명세">명세</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', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.section")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region role</a></li> +</ul> diff --git a/files/ko/web/html/element/select/index.html b/files/ko/web/html/element/select/index.html new file mode 100644 index 0000000000..59ae3e90ed --- /dev/null +++ b/files/ko/web/html/element/select/index.html @@ -0,0 +1,210 @@ +--- +title: <select> +slug: Web/HTML/Element/select +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/select +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><select></code> 요소</strong>는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/select.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>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>위의 예제는 일반적인 <code><select></code> 사용법을 시연합니다. {{htmlelement("label")}}과 연결해 접근성을 향상할 수 있도록 {{htmlattrxref("id")}} 특성을, 서버로 전송할 데이터의 이름을 위해 {{htmlattrxref("name", "select")}} 특성을 적용했습니다. 메뉴의 각 옵션은 <code><select></code> 안의 {{htmlelement("option")}}으로 정의합니다.</p> + +<p>모든 <code><option></code>은 자신이 선택됐을 때 값으로써 사용할 {{htmlattrxref("value", "option")}} 특성이 필요합니다. 그러나 <code>value</code> 특성을 지정하지 않은 경우, 대신 자기 안의 텍스트를 값으로 사용합니다. {{htmlattrxref("selected", "option")}} 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.</p> + +<p><code><select></code> 요소를 조작할 때 사용할 수 있는 여러가지 고유 특성이 존재합니다. {{htmlattrxref("multiple", "select")}} 특성을 사용하면 다수의 항목을 동시에 선택할 수 있고, {{htmlattrxref("size", "select")}} 특성은 한 번에 노출되는 항목의 수를 조절할 수 있습니다. <code>required</code>, <code>disabled</code>, <code>autofocus</code> 등 일반적인 양식 입력 요소의 특성도 사용할 수 있습니다.</p> + +<p><code><option></code> 요소를 {{htmlelement("optgroup")}} 요소 안에 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있습니다.</p> + +<p class="hidden">For further examples, see <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#Drop-down_content">The native form widgets: Drop-down content</a>.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}의 자동완성 기능을 지원하는 {{domxref("DOMString")}}. 가능한 값의 전체 목록과, 자동완성의 상세 사용법은 <a href="/ko/docs/Web/HTML/Attributes/autocomplete">HTML <code>autocomplete</code> 특성</a> 문서를 참고하세요.</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>지정한 경우, 페이지를 불러왔을 때 자동으로 포커스를 부여합니다. 문서 내에서 하나의 양식 요소만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>지정한 경우, 사용자와 <code><select></code> 요소의 모든 상호작용을 막습니다. 지정하지 않은 경우에도 {{htmlelement("fieldset")}} 등 부모 요소의 <code>disabled</code> 특성을 상속하므로 비활성 상태가 될 수 있습니다.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><select></code>와 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다.</dd> + <dd><code>form</code> 특성을 사용하면 <code><select></code>를 <code><form></code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code><form></code>이 있더라도 소유자를 재정의할 수 있습니다.</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>지정한 경우, 메뉴에서 다수의 옵션을 선택할 수 있습니다. 지정하지 않은 경우 하나만 선택 가능합니다. 대부분의 브라우저는 <code>multiple</code> 특성이 존재하면 드롭다운 메뉴 대신 스크롤 가능한 목록 상자를 보여줍니다.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>컨트롤의 이름.</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>옵션 중 값으로 비어있지 않은 문자열을 값으로 하는 항목을 반드시 선택해야 함을 나타냅니다.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd><code><select></code>를 (<code>multiple</code> 특성 사용 등의 이유로) 스크롤 가능한 목록 상자로 표현할 때 지정한 경우, 목록에서 한 번에 볼 수 있는 옵션 줄 수를 나타냅니다. 브라우저가 <code><select></code> 요소를 반드시 스크롤 가능한 목록 상자로 표현해야 하는 것은 아닙니다. 기본값은 0입니다.</dd> +</dl> + +<div class="note"><strong>참고:</strong> HTML5 명세에 따르면 <code>size</code>의 기본값은 1이어야 합니다. 그러나 실제로 기본값을 1로 적용하면 일부 웹 사이트가 망가지는 것으로 밝혀졌으며 어떠한 브라우저도 기본값으로 1을 사용하지 않습니다. Mozilla도 당분간 Firefox의 기본값을 0으로 유지하기로 결정했습니다.</div> + +<dl> +</dl> + +<ul> +</ul> + +<div class="hidden"> +<h2 id="Usage_notes">Usage notes</h2> + +<h3 id="Selecting_multiple_options">Selecting multiple options</h3> + +<p>On a desktop computer, there are a number of ways to select multiple options in a <code><select></code> element with a <code>multiple</code> attribute:</p> + +<p>Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.</p> + +<div class="blockIndicator warning"> +<p><strong>Warning</strong>: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox. Also note that on macOS, the <kbd>Ctrl</kbd> + <kbd>Up</kbd> and <kbd>Ctrl</kbd> + <kbd>Down</kbd> shortcuts conflict with the OS default shortcuts for <em>Mission Control</em> and <em>Application windows</em>, so you'll have to turn these off before it will work.</p> +</div> + +<p>Keyboard users can select multiple contiguous items by:</p> + +<ul> + <li>Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd>).</li> + <li>Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options.</li> + <li>Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected.</li> +</ul> + +<p>Keyboard users can select multiple non-contiguous items by:</p> + +<ul> + <li>Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd>).</li> + <li>Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.</li> + <li>Pressing <kbd>Space</kbd> to select/deselect "focused" select options.</li> +</ul> +</div> + +<h2 id="CSS_스타일링">CSS 스타일링</h2> + +<p><code><select></code> 요소는 CSS를 사용해 스타일을 적용하기 어렵기로 유명합니다. 물론 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>이나 <a href="/ko/docs/Web/CSS/CSS_Fonts">글씨체</a> 등 일부분은 다른 요소처럼 바꿀 수 있으며, {{cssxref("appearance")}} 속성을 사용하면 기본 시스템 외형을 제거할 수도 있습니다.</p> + +<p>그러나 <code><select></code> 요소의 내부 구조는 복잡해 통제하기 힘들며, 브라우저간의 차이로 인해 일관적이지 않은 결과가 나올 수도 있습니다. 요소의 모든 부분을 통제해야 할 경우 적합한 스타일링 방법을 제공하는 라이브러리를 고려하세요. 아니면 다른 요소와 JavaScript, <a href="/ko/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>를 사용해 완전히 별도의 드롭다운 메뉴를 만들어보세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_메뉴">기본 메뉴</h3> + +<pre class="brush: html"><!-- 두 번째 값이 처음부터 선택된 상태 --> +<select name="choice"> + <option value="first">First Value</option> + <option value="second" selected>Second Value</option> + <option value="third">Third Value</option> +</select></pre> + +<p>{{EmbedLiveSample("기본_메뉴", "", "100")}}</p> + +<h3 id="여러_기능을_갖춘_복잡한_메뉴">여러 기능을 갖춘 복잡한 메뉴</h3> + +<pre class="brush: html"><label>Please choose one or more pets: + <select name="pets" multiple size="4"> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> +</label> +</pre> + +<p>{{EmbedLiveSample("여러_기능을_갖춘_복잡한_메뉴", "", "100")}}</p> + +<ul> + <li><code>multiple</code> 특성으로 인해 여러 옵션을 같이 선택할 수 있습니다.</li> + <li><code>size</code> 특성으로 인해 최대 4개의 옵션만 보입니다.</li> + <li>{{htmlelement("optgroup")}} 요소를 사용해 옵션을 두 개의 분리된 그룹으로 나눴습니다. 옵션 그룹은 순전히 시각적인 구분으로, 보통 굵은 글씨체의 옵션명 및 들여쓰기한 옵션 구성원으로 표현합니다.</li> + <li>"Hamster" 옵션에는 <code>disabled</code> 특성이 있으므로 선택할 수 없습니다.</li> +</ul> + +<h2 id="기술_요약">기술 요약</h2> + +<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>, <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>, <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>0개 이상의 {{HTMLElement("option")}} 또는 {{HTMLElement("optgroup")}} 요소.</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>{{ARIARole("menu")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<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#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.select")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><select></code>가 발사하는 이벤트: {{event("change")}}, {{event("input")}}</li> +</ul> diff --git a/files/ko/web/html/element/slot/index.html b/files/ko/web/html/element/slot/index.html new file mode 100644 index 0000000000..b710ceb7f6 --- /dev/null +++ b/files/ko/web/html/element/slot/index.html @@ -0,0 +1,122 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +tags: + - Element + - HTML + - HTML Web Components + - Reference + - Web + - Web Components + - 웹 컴포넌트 +translation_of: Web/HTML/Element/slot +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><slot></code> 요소</strong>는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.</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>.</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>{{event("slotchange")}}</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("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>슬롯의 이름.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </summary> + <div class="attributes"> + <h4>Attributes</h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>참고</strong>: 온전한 예제는 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a>(<a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">라이브로 보기</a>)에서 볼 수 있습니다. 설명은 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</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','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/ko/web/html/element/small/index.html b/files/ko/web/html/element/small/index.html new file mode 100644 index 0000000000..efc0a62cd5 --- /dev/null +++ b/files/ko/web/html/element/small/index.html @@ -0,0 +1,117 @@ +--- +title: '<small>: 덧붙임 글 요소' +slug: Web/HTML/Element/small +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/small +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><small></code></strong> <strong>요소</strong>는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.</span> 기본 상태에서 <code><small></code>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(<code>small</code>에서 <code>x-small</code> 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</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> + +<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>.</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>를 허용하는 모든 요소, 또는 <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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 class="editable" id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_사용법">기본 사용법</h3> + +<pre class="brush: html"><p>This is the first sentence. + <small>This whole sentence is in small letters.</small> +</p> +</pre> + +<p>{{EmbedLiveSample("기본_사용법")}}</p> + +<h3 id="CSS_예제">CSS 예제</h3> + +<pre class="brush: html"><p>This is the first sentence. + <span style="font-size:0.8em">This whole sentence is in small + letters.</span> +</p> +</pre> + +<p>{{EmbedLiveSample("CSS_예제")}}</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', 'semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '<small>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="참고">참고</h2> + +<p>{{htmlelement("b")}}, {{htmlelement("i")}}, <code><small></code> 요소는 구조와 표현을 분리하는 원칙을 위배하는 것처럼 보이지만, 셋 모두 HTML5에서 유효합니다. 작성자는 <code><small></code>과 CSS 중 어느 것을 사용할지 결정하기 전에 심사숙고해야 합니다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.small")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("b")}}</li> +</ul> diff --git a/files/ko/web/html/element/span/index.html b/files/ko/web/html/element/span/index.html new file mode 100644 index 0000000000..ffa73e9f9a --- /dev/null +++ b/files/ko/web/html/element/span/index.html @@ -0,0 +1,125 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><span></code> 요소</strong>는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 {{htmlattrxref("lang")}} 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.</span> 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <code><span></code>은 {{htmlelement("div")}}와 매우 유사하지만, {{htmlelement("div")}}는 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a>인 반면 <code><span></code>은 <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-standard")}}</div> + + + +<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>.</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> 또는 <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("HTMLSpanElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="예제_1">예제 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html gutter:false"><p><span>Some text</span></p></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제_1')}}</p> + +<h3 id="예제_2">예제 2</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html gutter:false"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">li span { + background: gold; + } +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('예제_2')}}</p> + +<h2 id="명세">명세</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', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The {{glossary("DOM")}} interface is now {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} 요소</li> +</ul> diff --git a/files/ko/web/html/element/strong/index.html b/files/ko/web/html/element/strong/index.html new file mode 100644 index 0000000000..50bfe6f78c --- /dev/null +++ b/files/ko/web/html/element/strong/index.html @@ -0,0 +1,135 @@ +--- +title: '<strong>: 높은 중요도 요소' +slug: Web/HTML/Element/strong +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/strong +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><strong></code> 요소</strong>는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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> 또는 <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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>The <code><strong></code> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.</p> + +<p>Typically this element is rendered by default using a bold font weight. However, it should <em>not</em> be used simply to apply bold styling; use the CSS {{cssxref("font-weight")}} property for that purpose. Use the {{HTMLElement("b")}} element to draw attention to certain text without indicating a higher level of importance. Use the {{HTMLElement("em")}} element to mark text that has stress emphasis.</p> + +<p>Another accepted use for <code><strong></code> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.</p> + +<h3 id="<b>_vs._<strong>"><code><b></code> vs. <code><strong></code></h3> + +<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. {{HTMLElement("b")}} and <code><strong></code> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <code><b></code> or <code><strong></code>? Don't they both do the same thing?"</p> + +<p>Not exactly. The <code><strong></code> element is for content that is of greater importance, while the <code><b></code> element is used to draw attention to text without indicating that it's more important.</p> + +<p>It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <code><strong></code>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS {{cssxref("font-weight")}} property.</p> + +<p>The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.</p> + +<h3 id="<em>_vs._<strong>"><code><em></code> vs. <code><strong></code></h3> + +<p>Adding to the confusion is the fact that while HTML 4 defined <code><strong></code> as simply indicating a stronger emphasis, HTML 5 defines <code><strong></code> as representing "strong importance for its contents." This is an important distinction to make.</p> + +<p>While <code><em></code> is used to change the meaning of a sentence as spoken emphasis does ("I <em>love</em> carrots" vs. "I love <em>carrots</em>"), <code><strong></code> is used to give portions of a sentence added importance (e.g., "<strong>Warning!</strong> This is <strong>very dangerous.</strong>") Both <code><strong></code> and <code><em></code> can be nested to increase the relative degree of importance or stress emphasis, respectively.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: html"><p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p></pre> + +<p>{{EmbedLiveSample("기본_예제", 650, 80)}}</p> + +<h3 id="경고_표시">경고 표시</h3> + +<pre class="brush: html"><p><strong>Important:</strong> Before proceeding, make sure you add plenty of butter.</p></pre> + +<p>{{EmbedLiveSample("경고_표시", 650, 80)}}</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', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.strong")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("b")}} 요소</li> + <li>{{HTMLElement("em")}} 요소</li> + <li>{{cssxref("font-weight")}} 속성</li> +</ul> diff --git a/files/ko/web/html/element/style/index.html b/files/ko/web/html/element/style/index.html new file mode 100644 index 0000000000..4e166704bc --- /dev/null +++ b/files/ko/web/html/element/style/index.html @@ -0,0 +1,201 @@ +--- +title: '<style>: 스타일 정보 요소' +slug: Web/HTML/Element/style +tags: + - CSS + - Element + - HTML + - HTML document metadata + - Reference + - Web +translation_of: Web/HTML/Element/style +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><style></code> 요소</strong>는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div> + + + +<p><code><style></code> 요소는 문서의 {{htmlelement("head")}} 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, {{htmlelement("link")}} 요소로 연결하는 편이 좋습니다.</p> + +<p>문서가 다수의 <code><style></code>과 <code><link></code> 요소를 포함하면 서로의 순서대로 {{glossary("DOM")}}에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <code><style></code> 및 <code><link></code> 요소를 배치해야 합니다.</p> + +<p><code><link></code> 요소와 동일하게, <code><style></code> 요소도 미디어 쿼리를 값으로 가지는 {{htmlattrxref("media", "style")}} 특성을 포함할 수 있습니다. 이를 통해 {{glossary("viewport", "뷰포트")}} 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.</p> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 <code>text/css</code>입니다. 빈 문자열과 <code>text/css</code> 외의 값은 사용하지 않습니다. + <div class="note"><strong>참고:</strong> 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.</div> + </dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>스타일을 적용할 매체. 값은 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a>이며, 누락할 경우 기본값은 <code>all</code>입니다.</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><code><a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a></code>에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd><a href="/ko/docs/Web/CSS/Alternative_style_sheets">대체 스타일 시트</a> 세트를 지정합니다.</dd> +</dl> + +<h3 id="사용_중단된_특성">사용 중단된 특성</h3> + +<dl> + <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>지정한 경우, <code><style></code> 요소의 부모 및 부모의 자식에만 스타일을 적용합니다. + <div class="note"> + <p><strong>참고:</strong> <code>scoped</code> 특성은 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 <a href="https://github.com/samthor/scoped">폴리필</a>을 추가하세요.</p> + </div> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_스타일_시트">간단한 스타일 시트</h3> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: red; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('간단한_스타일_시트', '100%', '60')}}</p> + +<h3 id="다수의_<style>_요소">다수의 <code><style></code> 요소</h3> + +<p>다음 예제는 두 개의 <code><style></code> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 <code><style></code>이 앞쪽을 덮어쓰는 것에 주목하세요.</p> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('다수의_style_요소', '100%', '60')}}</p> + +<h3 id="미디어_쿼리_포함">미디어 쿼리 포함</h3> + +<p>이번 예제에서는 앞선 코드의 두 번째 <code><style></code> 요소에 <code>media</code> 특성을 추가하고, {{glossary("viewport", "뷰포트")}}의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.</p> + +<pre class="brush:html"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style media="all and (max-width: 500px)"> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('미디어_쿼리_포함', '100%', '60')}}</p> + +<h2 id="기술_요약">기술 요약</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>. <code>scoped</code> 특성이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td><code>type</code> 특성에 맞는 텍스트, 즉 <code>text/css</code>.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>를 허용하는 모든 요소</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>{{ SpecName('HTML5 W3C') }} 에서 변화 없음.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><code>scoped</code> 특성이 추가됨</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>외부 스타일 시트를 사용하기 위한 {{HTMLElement("link")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/sub/index.html b/files/ko/web/html/element/sub/index.html new file mode 100644 index 0000000000..a94f6a7f01 --- /dev/null +++ b/files/ko/web/html/element/sub/index.html @@ -0,0 +1,137 @@ +--- +title: '<sub>: 아래 첨자 요소' +slug: Web/HTML/Element/sub +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/sub +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><sub></code></strong> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><sub></code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됩니다.</p> + +<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 내려야 한다면 <code><sub></code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: sub</code>를 사용할 수도 있고, 기준선을 25% 내려야 한다면 <code>vertical-align: -25%</code>로도 쓸 수 있습니다.</p> + +<p><code><sub></code>의 적절한 사용처 몇 가지는 다음과 같습니다.</p> + +<ul> + <li>각주 표기. 아래의 {{anch("각주 표기")}} 예제를 참고하세요.</li> + <li>수학 변수의 숫자 표기. <a href="/ko/docs/Web/MathML">MathML</a>을 사용하는 방향을 고려하세요. {{anch("변수 표기")}} 예제를 참고하세요.</li> + <li>화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, 카페인) 아래의 {{anch("화학식")}} 예제를 참고하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="각주_표기">각주 표기</h3> + +<p>각주의 숫자를 아래 첨자로 나타내는 경우도 있으며, <code><sub></code>가 흔히 쓰이는 경우입니다.</p> + +<pre class="brush: html"><p>According to the computations by Nakamura, Johnson, and +Mason<sub>1</sub> this will result in the complete annihilation +of both particles.</p></pre> + +<p>{{EmbedLiveSample("각주_표기", 650, 80)}}</p> + +<h3 id="변수_표기">변수 표기</h3> + +<p>수학에서는 같은 축 위의 점 여럿과 같이, 동일한 개념을 가리키는 변수의 무리는 같은 변수명을 사용하며, 뒤의 아래 첨자 숫자로 서로 구분합니다.</p> + +<pre class="brush: html"><p>The horizontal coordinates' positions along the X-axis are +represented as <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var>.</p></pre> + +<p>{{EmbedLiveSample("변수_표기", 650, 80)}}</p> + +<h3 id="화학식">화학식</h3> + +<p>화학식에서 특정 원자의 수를 나타낼 때 아래 첨자를 사용합니다. H<sub>2</sub>0의 아래 첨자 "2"는 화학식이 나타내는 물질에 수소 원자가 2개 존재한다는 뜻입니다.:</p> + +<pre class="brush: html"><p>Almost every developer's favorite molecule is +C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is +commonly known as "caffeine."</p></pre> + +<p>{{EmbedLiveSample("화학식", 650, 120)}}</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', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.sub")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>위 첨자를 나타내는 {{HTMLElement("sup")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li> + <li><a href="/ko/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML 요소.</li> + <li>CSS {{cssxref("vertical-align")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/summary/index.html b/files/ko/web/html/element/summary/index.html new file mode 100644 index 0000000000..4339470b59 --- /dev/null +++ b/files/ko/web/html/element/summary/index.html @@ -0,0 +1,151 @@ +--- +title: <summary> +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML 공개 요약 요소</strong> (<strong><code><요약></code></strong>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. </span> <code><요약></code> 요소를 클릭하면 부모 <code><상세></code> 요소의 상태가 열리거나 닫힌다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>The {{HTMLElement("details")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The <code><summary></code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p> + +<p>A <code><summary></code> element may <em>only</em> be used as the first child of a <code><details></code> element. When the user clicks on the summary, the parent <code><details></code> element is toggled open or closed, and then a {{event("toggle")}} event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p> + +<h3 id="Default_label_text">Default label text</h3> + +<p>If a <code><details></code> element's first child is not a <code><summary></code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p> + +<h3 id="Default_style">Default style</h3> + +<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p> + +<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p> + +<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p> + +<h2 id="Examples">Examples</h2> + +<p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p> + +<h3 id="Basic_example">Basic example</h3> + +<p>A simple example showing the use of <code><summary></code> in a {{HTMLElement("details")}} element:</p> + +<pre class="brush: html"><details open> + <summary>Overview</summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p> + +<h3 id="Summaries_as_headings">Summaries as headings</h3> + +<p>You can use heading elements in <code><summary></code>, like this:</p> + +<pre class="brush: html"><details open> + <summary><h4>Overview</h4></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p> + +<p>This currently has some spacing issues that could be addressed using CSS.</p> + +<h3 id="HTML_in_summaries">HTML in summaries</h3> + +<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p> + +<pre class="brush: html"><details open> + <summary><strong>Overview</strong></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</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', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.summary")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/ko/web/html/element/sup/index.html b/files/ko/web/html/element/sup/index.html new file mode 100644 index 0000000000..f9478cdd6d --- /dev/null +++ b/files/ko/web/html/element/sup/index.html @@ -0,0 +1,142 @@ +--- +title: '<sup>: 위 첨자 요소' +slug: Web/HTML/Element/sup +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/sup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><sup></code></strong> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><sup></code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 위 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 위로 올려야 할 때는 사용해서는 안됩니다.</p> + +<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 올려야 한다면 <code><sup></code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: super</code>를 사용할 수도 있고, 기준선을 50% 올려야 한다면 <code>vertical-align: 50%</code>로도 쓸 수 있습니다.</p> + +<p><code><sup></code>의 적절한 사용처의 몇 가지는 다음과 같습니다.</p> + +<ul> + <li>"x<sup>3</sup>" 등 거듭제곱 연산의 지수 표기. 더 복잡한 표기를 해야 할 경우 <a href="/ko/docs/Web/MathML">MathML</a>을 고려하세요. 아래의 {{anch("지수 표기")}} 예제를 참고하세요.</li> + <li class="hidden">Displaying {{interwiki("wikipedia", "superior letter", "superior lettering")}}, which is used in some languages when rendering certain abbreviations. For example, in French, the word "mademoiselle" can be abbreviated "M<sup>lle</sup>"); this is an acceptable use case. See {{anch("Superior lettering")}} for examples.</li> + <li>"4<sup>th</sup>" 등 서수 표기. 아래의 {{anch("서수 표기")}} 예제를 참고하세요.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="지수_표기">지수 표기</h3> + +<p>위 첨자를 가장 많이 사용할만한 곳 중 하나는 거듭제곱의 지수 표기입니다.</p> + +<pre class="brush: html"><p>One of the most common equations in all of physics is +<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p></pre> + +<p>{{EmbedLiveSample("지수_표기", 650, 80)}}</p> + +<div class="hidden"> +<h3 id="Superior_lettering">Superior lettering</h3> + +<p>Superior lettering is not technically the same thing as superscript. However, it is common to use <code><sup></code> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:</p> + +<pre class="brush: html"><p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p></pre> + +<p>The resulting output:</p> + +<p>{\{EmbedLiveSample("Superior_lettering", 650, 80)}}</p> +</div> + +<h3 id="서수_표기">서수 표기</h3> + +<p>영어 "fourth", 스페인어 "quinto" 등 서수는 숫자와, 위 첨자로 표기한 언어별 특정 텍스트를 사용해 축약할 수 있습니다.</p> + +<pre class="brush: html"><p>The ordinal number "fifth" can be abbreviated in various +languages as follows:</p> +<ul> + <li>English: 5<sup>th</sup></li> + <li>French: 5<sup>ème</sup></li> +</ul></pre> + +<p>{{EmbedLiveSample("서수_표기", 650, 160)}}</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', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.sup")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>아래 첨자를 나타내는 {{HTMLElement("sub")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li> + <li><a href="/ko/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML 요소.</li> + <li>CSS {{cssxref("vertical-align")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/element/table/index.html b/files/ko/web/html/element/table/index.html new file mode 100644 index 0000000000..2579638730 --- /dev/null +++ b/files/ko/web/html/element/table/index.html @@ -0,0 +1,370 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web + - 표 +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><table></code> 요소</strong>는 행과 열로 이루어진 표를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>순서대로, + <div class="content-models"> + <div id="table-mdls"> + <ol> + <li>선택적인 {{HTMLElement("caption")}} 요소</li> + <li>0개 이상의 {{HTMLElement("colgroup")}} 요소</li> + <li>선택적인 {{HTMLElement("thead")}} 요소</li> + <li>다음 중 하나 + <ul> + <li>0개 이상의 {{HTMLElement("tbody")}} 요소</li> + <li>0개 이상의 {{HTMLElement("tr")}} 요소</li> + </ul> + </li> + <li>선택적인 {{HTMLElement("tfoot")}} 요소</li> + </ol> + </div> + </div> + </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("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:</p> + + <ul> + <li><code>left</code>: the table is displayed on the left side of the document;</li> + <li><code>center</code>: the table is displayed in the center of the document;</li> + <li><code>right</code>: the table is displayed on the right side of the document.</li> + </ul> + + <p>Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to <code>auto</code> or {{cssxref("margin")}} to <code>0 auto</code> to achieve an effect that is similar to the align attribute.</p> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p> + </dd> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + <p>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the {{htmlattrxref("frame", "table")}} attribute is set to void.</p> + + <p>To achieve a similar effect, use the CSS {{cssxref("border")}} shorthand property.</p> + </dd> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-collapse")}} property to the <code><table></code> element, with its value set to collapse, and the {{cssxref("padding")}} property to the {{HTMLElement("td")}} elements.</p> + </dd> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> + + <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p> + </dd> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p> + + <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p> + </dd> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p> + + <ul> + <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li> + <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li> + <li><code>rows</code>, which will cause the rules to be displayed between rows;</li> + <li><code>columns</code>, which will cause the rules to be displayed between columns;</li> + <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li> + </ul> + + <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p> + </dd> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p> + </dd> +</dl> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_표">간단한 표</h3> + +<pre class="brush: html"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{ EmbedLiveSample('간단한_표', '100%', '100') }}</p> + +<h3 id="추가_예제">추가 예제</h3> + +<pre class="brush: html"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('추가_예제', '100%', '700') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="설명문">설명문</h3> + +<p>표의 목적에 대한 명확하고 상세한 설명을 포함하는 {{HTMLElement("caption")}} 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.</p> + +<p>특히 스크린 리더 등 보조 기술 사용자와 낮은 시력의 사용자, 그리고 인지능력의 저하를 겪고 있는 사용자에게 도움이 됩니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="행과_열_범위_지정">행과 열 범위 지정</h3> + +<p>간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에, 헤더 요소의 {{htmlattrxref("scope", "th")}} 특성은 불필요합니다. 그러나 일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에, 범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다. 복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다.</p> + +<h4 id="예제_2">예제</h4> + +<pre class="brush: html"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>{{htmlelement("th")}} 요소에 <code>scope="col"</code>을 선언함으로써, 해당 칸이 열의 맨 위에 위치함을 설명할 수 있습니다. 마찬가지로, <code>scope="row"</code>를 추가하면 해당 칸이 행의 맨 앞에 위치함을 설명합니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="복잡한_표">복잡한 표</h3> + +<p>너무나 복잡해서 헤더 칸을 확실히 가로 또는 세로로 연결할 수 없는 표의 경우, 스크린 리더와 같은 보조 기술이 분석할 때 어려움을 겪을 수 있습니다. 보통 {{htmlattrxref("colspan", "td")}}과 {htmlattrxref("rowspan", "td")}} 특성이 존재하는 경우 이 정도로 복잡한 표라고 할 수 있습니다.</p> + +<p>이상적으로 보자면, 테이블의 콘텐츠를 나타내는 다른 방법을 생각하는 것이 좋습니다. 이를테면 서로 관련된 더 작은 표로 나눠서 <code>colspan</code>, <code>rowspan</code> 특성의 필요를 제거하는 것입니다. 보조 기술 사용자의 테이블 콘텐츠 이해에 도움을 줄 뿐 아니라, 인지력 문제를 겪고 있어 기존 표의 레이아웃을 이해하는 것이 곤란한 사용자의 경험도 개선할 수 있습니다.</p> + +<p>표를 나눌 수 없는 경우 {{htmlattrxref("id")}}와 {{htmlattrxref("headers", "td")}} 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> +</ul> + +<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','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><table></code> 요소 스타일링에 특히 도움이 되는 CSS 속성 + + <ul> + <li>표의 너비를 조절하는 {{cssxref("width")}}.</li> + <li>표의 테두리를 설정하는 {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}}.</li> + <li>각 칸의 콘텐츠를 꾸밀 때 사용할 수 있는 {{cssxref("margin")}}, {{cssxref("padding")}}.</li> + <li>각 칸의 텍스트와 콘텐츠를 정렬할 때 사용하는 {{cssxref("text-align")}}, {{cssxref("vertical-align")}}.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/tbody/index.html b/files/ko/web/html/element/tbody/index.html new file mode 100644 index 0000000000..e7d89d1488 --- /dev/null +++ b/files/ko/web/html/element/tbody/index.html @@ -0,0 +1,320 @@ +--- +title: '<tbody>: 표 본문 요소' +slug: Web/HTML/Element/tbody +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web +translation_of: Web/HTML/Element/tbody +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML </strong><strong><code><tbody></code></strong> 요소는 표의 여러 행({{htmlelement("tr")}})을 묶어서 표 본문을 구성합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</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> + +<p><code><tbody></code> 요소와 그 사촌인 {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 요소는 화면과 프린터에 렌더링 할 때 뿐만 아니라 {{Glossary("accessibility", "접근성")}} 차원에서도 유용한 의미를 표의 행에 부여합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("tr")}} 요소.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td><code><tbody></code> 요소는 부모 {{HTMLElement("table")}} 요소의 렌더링에 반드시 필요한 요소는 아닙니다. 그러나 <code><table></code> 요소의 자식 중 {{ HTMLElement("tr") }} 요소가 존재하면 사용할 수 없습니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>{{ HTMLElement("table") }} 요소. {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, {{ HTMLElement("thead") }} 요소가 존재하는 경우, 그 뒤에 위치할 수 있습니다.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<h3 id="Deprecated_attributes">Deprecated attributes</h3> + +<dl> + <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "tbody") }} and {{ htmlattrxref("charoff", "tbody") }} attributes.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <p>As this attribute is deprecated, use the CSS {{cssxref("text-align")}} property instead.</p> + + <div class="note"><strong>Note: </strong>The equivalent <code>text-align</code> property for the <code>align="char"</code> is not implemented in any browsers yet. See the <a href="/en-US/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code>'s browser compatibility section</a> for the <code><string></code> value.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p> + + <p>As this attribute is deprecated, use the CSS {{cssxref("background-color")}} property instead.</p> + </dd> + <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt> + <dd> + <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (<code>.</code>) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tbody")}} is not set to <code>char</code>, this attribute is ignored.</p> + </dd> + <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd> + <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <p>As this attribute is deprecated, use the CSS {{cssxref("vertical-align")}} property instead.</p> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<ul> + <li>표의 헤더 행을 나타내기 위해 {{HTMLElement("thead")}} 요소를 사용한 경우, <code><tbody></code> 요소는 반드시 그 뒤에 위치해야 합니다.</li> + <li><code><tbody></code>를 사용할 경우, {{HTMLElement("table")}}의 바로 밑 자식이면서 <code><tbody></code>에 속하지 않는 {{htmlelement("tr")}} 요소는 사용할 수 없습니다. 모든 비 헤더, 비 푸터 행은 반드시 <code><tbody></code>의 자식으로 존재해야 합니다.</li> + <li>문서 출력 시, <code><thead></code>와 {{htmlelement("tfoor")}} 요소는 모든 페이지에서 같거나 거의 같은 정보를 나타내고, <code><tbody></code> 요소는 서로 다른 정보를 나타냅니다.</li> + <li>표를 화면 맥락(브라우저 창 등)에서 표시할 때, 화면이 표 전체를 보여주기에 충분히 크지 않은 경우 {{Glossary("user agent", "사용자 에이전트")}}는 같은 부모의 <code><thead></code>, <code><tbody></code>, <code><tfoot></code>, {{HTMLElement("caption")}} 요소를 서로 따로 스크롤 가능토록 설정할 수 있습니다.</li> + <li>하나의 표에 다수의 <code><tbody></code>를 연속적으로 사용할 수 있으며, 이를 통해 커다란 표의 행을 구획으로 나눌 수 있습니다. 필요한 경우 각 구획에 서로 다른 서식을 적용할 수도 있습니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<p>다음은 <code><tbody></code> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 {{ HTMLElement("table", "", "#예제") }}에서도 볼 수 있습니다.</p> + +<h3 id="기본_예제">기본 예제</h3> + +<p>이번 예제는 {{HTMLElement("thead")}}와 {{HTMLElement("tbody")}}를 사용해 학생 그룹의 정보를 나열하는 표를 생성합니다.</p> + +<h4 id="HTML">HTML</h4> + +<p>표의 HTML은 다음과 같습니다. 학생의 정보를 나타내는 표 본문 칸이 모두 하나의 <code><tbody></code> 요소에 속함에 주의하세요.</p> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + <th>Major</th> + </tr> + </thead> + <tbody> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + <td>Computer Science</td> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + <td>Russian Literature</td> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + <td>Astrophysics</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<p>다음은 표에 적용할 CSS 스타일입니다.</p> + +<pre class="brush: css">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +}</pre> + +<p>우선 표의 전반적인 스타일을 설정합니다.외부 테두리의 굵기, 스타일, 색을 설정하고, {{cssxref("border-collapse")}}를 이용해 각 칸의 테두리가 서로 분리되지 않고 공유하도록 지정합니다. {{cssxref("font")}}를 사용해 표의 기본 글씨체도 설정합니다.</p> + +<pre class="brush: css">th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +}</pre> + +<p>그 다음은 대부분의 칸에 적용할 스타일입니다. 1픽셀 두께의 밝은 회색 테두리를 추가하고 안쪽 여백을 조정하며, {{cssxref("text-align")}}을 사용해 모두 좌측 정렬로 설정합니다.</p> + +<pre class="brush: css">thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> + +<p>마지막으로 {{HTMLElement("thead")}} 안에 위치하는 헤더 칸에 추가 스타일을 부여합니다. 보다 어두운 {{cssxref("background-color")}}, 더 큰 글씨 크기, 그리고 다른 테두리보다 두껍고 어두운 아래쪽 테두리를 적용합니다.</p> + +<h4 id="결과">결과</h4> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("기본_예제", 650, 150)}}</p> + +<h3 id="다중_본문">다중 본문</h3> + +<p>You can create multiple sections within a table by using multiple <code><tbody></code> elements. Each may potentially have its own header row or rows; however, <em>there can be only one {{HTMLElement("thead")}} per table!</em> Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("th")}} elements to create headers within each <code><tbody></code>. Let's see how that's done.</p> + +<p>Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.</p> + +<h4 id="Result">Result</h4> + +<p>First, the resulting table, so you know what we're building:</p> + +<p>{{EmbedLiveSample("다중_본문", 650, 250)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<p>The revised HTML looks like this:</p> + +<pre class="brush: html"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2">Computer Science</th> + </tr> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + </tr> + <tr> + <td>4077830</td> + <td>Pierce, Benjamin</td> + </tr> + <tr> + <td>5151701</td> + <td>Kirk, James</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">Russian Literature</th> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">Astrophysics</th> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + </tr> + <tr> + <td>8892377</td> + <td>Toyota, Hiroko</td> + </tr> + </tbody> +</table></pre> + +<p>Notice that each major is placed in a separate <code><tbody></code> block, the first row of which contains a single {{HTMLElement("th")}} element with a {{htmlattrxref("colspan", "th")}} attribute that spans the entire width of the table. That heading lists the name of the major contained within the <code><tbody></code>.</p> + +<p>Then each remaining row in each major's <code><tbody></code> consists of two cells: the first for the student's ID and the second for their name.</p> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +} + +th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +} + +thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> +</div> + +<p>Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <code><tbody></code> (as opposed to those which reside in a {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major.</p> + +<pre class="brush: css">tbody > tr > th { + background-color: #dde; + border-bottom: 1.5px solid #bbb; + font-weight: normal; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.tbody")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS properties and <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code><tbody></code> element: + + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/td/index.html b/files/ko/web/html/element/td/index.html new file mode 100644 index 0000000000..1f6c363834 --- /dev/null +++ b/files/ko/web/html/element/td/index.html @@ -0,0 +1,213 @@ +--- +title: <td> +slug: Web/HTML/Element/td +tags: + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><em>Table cell</em> <a href="/en-US/docs/Web/HTML">HTML</a> 요소 (<strong><code><td></code></strong>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 <em>표 모델</em>에 참여합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</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> + +<table class="standard-table"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">컨텐츠 범주</a></th> + <td>없음.</td> + </tr> + <tr> + <th>허용된 컨텐츠</th> + <td>플로우 컨텐츠</td> + </tr> + <tr> + <th>태그 생략</th> + <td>시작 태그는 있어야 합니다.<br> + 종료 태그는 요소 바로 뒤에 {{HTMLElement("th")}}이나 {{HTMLElement("td")}} 요소가 뒤따르거나, 부모 요소에 더 이상 다른 데이터가 없을 경우 생략 가능합니다.</td> + </tr> + <tr> + <th>허용된 부모 요소</th> + <td>{{HTMLElement("tr")}} 요소</td> + </tr> + <tr> + <th>표준 문서</th> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>This attribute contains a short abbreviated description of the content of the cell. Some user-agents, such as speech readers, may present this description before the content itself. + <div class="note"><strong>참고: </strong>이 속성은 최신 표준에서 폐기되었기 떄문에 사용해서는 안됩니다: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the <strong>title</strong> attribute.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "td")}} and {{htmlattrxref("charoff", "td")}} attributes {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "td")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the ID of a group of cells that this header applies to. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "td")}} attribute.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal codes as defined in <a href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{HTMLElement("td")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/Web/CSS">CSS</a> property {{cssxref("background-color")}} instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute is used to set the character to align the cells in a column. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "td")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the {{HTMLElement("colgroup")}}, even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value (1). + <div class="note"><strong>Note: </strong>In {{HTMLVersionInline(5)}} this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Besides, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div> + </dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined, that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd> </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the same size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible</li> + <li><code>middle</code>, which will center the text in the cell</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 {{domxref("HTMLTableDataCellElement")}} 인터페이스를 구현합니다.</p> + +<h2 id="예제">예제</h2> + +<p>Please see the {{HTMLElement("table")}} page for examples on <code><td></code>.</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','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("html.elements.td")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 표 관련 요소들: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/template/index.html b/files/ko/web/html/element/template/index.html new file mode 100644 index 0000000000..d1a7e32486 --- /dev/null +++ b/files/ko/web/html/element/template/index.html @@ -0,0 +1,165 @@ +--- +title: '<template>: 콘텐츠 템플릿 요소' +slug: Web/HTML/Element/template +tags: + - Element + - HTML + - HTML Web Components + - 'HTML:Flow content' + - 'HTML:Metadata content' + - 'HTML:Phrasing content' + - 'HTML:Script-supporting element' + - Reference + - Web + - Web Components + - 웹 컴포넌트 +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><template></code> 요소</strong>는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 {{glossary("HTML")}} 코드를 담을 방법을 제공합니다.</p> + +<p>템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 <code><template></code> 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.</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>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#스크립트_지원_요소">스크립트 지원 요소</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>제한 없음.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든 요소. 또한, {{htmlattrxref("span", "colgroup")}} 특성이 없는 {{htmlelement("colgroup")}} 요소도 가능.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<p>다만, {{domxref("HTMLTemplateElement")}}는 읽기 전용 {{domxref("HTMLTemplateElement.content", "content")}} 속성을 가집니다. <code>content</code>는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 {{domxref("DocumentFragment")}}입니다.</p> + +<h2 id="예제">예제</h2> + +<p>우선 예제의 HTML부터 보겠습니다.</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.</p> + +<p>이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.</p> + +<pre class="brush: js">// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해 +// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다 +if ('content' in document.createElement('template')) { + + // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다 + var t = document.querySelector('#productrow'); + + // 새로운 열을 복제하고 테이블에 삽입합니다 + var tb = document.querySelector("tbody"); + var clone = document.importNode(t.content, true); + td = clone.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + tb.appendChild(clone); + + // 새로운 열을 복제하고 테이블에 삽입합니다 + var clone2 = document.importNode(t.content, true); + td = clone2.querySelectorAll("td"); + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans 2"; + + tb.appendChild(clone2); + +} else { + // HTML 템플릿 엘리먼트를 지원하지 않으므로 + // 테이블에 열을 추가하는 다른 방법을 찾습니다. +}</pre> + +<p>결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("예제", 500, 120)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">같이 보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/element/textarea/index.html b/files/ko/web/html/element/textarea/index.html new file mode 100644 index 0000000000..a59be6f9dc --- /dev/null +++ b/files/ko/web/html/element/textarea/index.html @@ -0,0 +1,158 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +tags: + - Element + - Forms + - HTML + - HTML forms + - Web +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><textarea></code> 요소</strong>는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.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> + +<h2 id="사용_문맥">사용 문맥</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element.</li> + <li><dfn>허용되는 컨텐츠</dfn> 문자 데이터</li> + <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li> + <li><dfn>허용되는 부모 요소</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">구문 컨텐츠</a>를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLTextAreaElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> + </ul> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an textarea element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code><textarea></code> element's form owner. The form owner is either the <code>form</code> element that this <code><textarea></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 불리언 속성은 페이지가 로드 됬을때, 포커스를 오버라이드(예:사용자가 다른 컨트롤에 타이핑) 하지 않는다면, 폼 컨트롤이 입력 포커스를 받을지를 지정합니다.문서에서 오직 하나의 폼 관련 요소만이 이 속성이 지정될수 있습니다.</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <span style="font-family: courier new;">20</span> (HTML5).</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>사용자가 컨트롤과 상호작용할수 없다는것을 가리키는 불리언 속성 (만약 속성이 지정되지 않았다면, 이 요소를 포함하는 컨테이닝 요소(예: {{ HTMLElement("fieldset") }})에게서 값을 상속받습니다. 예를 들면, disabled 속성을 가진 컨테이닝 요소가 없다면, 컨트롤은 사용 가능합니다)</dd> + <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력할 수 있는 문자(Unicode code points)의 최대 개수. 만약 명시하지 않을 경우 사용자는 무한으로 입력 가능.</dd> + <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력해야 할 문자(Unicode code points)의 최소 개수</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>컨트롤의 이름</dd> + <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt> + <dd>A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.</dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>이 불리언 속성은 사용자가 컨트롤의 값을 수정할수 없다는것을 가리킵니다. <code>disabled</code> 속성과는 다르게, <code>readonly</code> 속성은 사용자가 컨트롤을 클릭하거나 선택하는것을 막지 않습니다.<code> readonly</code> 컨트롤의 값은 여전히 폼과 함께 제출 됩니다..</dd> + <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 속성은 사용자가 폼을 제출하기 전에 반드시 채워야 한다는 것을 가리킵니다.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>The number of visible text lines for the control.</dd> + <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{ htmlattrdef("selectionEnd") }}</dt> + <dd>The index to the last character in the current selection.</dd> + <dt>{{ htmlattrdef("selectionStart") }}</dt> + <dd>The index to the first character in the current selection.</dd> + <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Indicates how the control wraps text. Possible values are: + <ul> + <li><span style="font-family: courier new;">hard</span>: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the <code>cols</code> attribute must be specified.</li> + <li><span style="font-family: courier new;">soft</span>: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.</li> + </ul> + + <p>If this attribute is not specified, <span style="font-family: courier new;">soft</span> is its default value.</p> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> 인터페이스를 구현합니다.</p> + +<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p> + +<p>{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:</p> + +<pre>textarea { + resize: none; +} +</pre> + +<h2 id="CSS와_상호작용_하기">CSS와 상호작용 하기</h2> + +<p>In regards to CSS, an <code><textarea></code> is a <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. The HTML specification doesn't define where the baseline of a <code><textarea></code> is. So different browsers set it to different positions. For Gecko, the <code><textarea></code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code><textarea></code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it, as the behavior will be unpredictable.</p> + +<p><em>Textarea</em> 는 래스터 이미지 처럼 고유한 넓이를 가지고 있습니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Example','600','200') }}</p> + +<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-button-element.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<p>다른 폼 관련 요소들: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p> diff --git a/files/ko/web/html/element/th/index.html b/files/ko/web/html/element/th/index.html new file mode 100644 index 0000000000..f2bafce38e --- /dev/null +++ b/files/ko/web/html/element/th/index.html @@ -0,0 +1,226 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - HTML + - 레퍼런스 + - 요소 + - 웹 + - 표 +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><th></code> element</strong> defines a cell as header of a group of table cells. The exact nature of this group is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attributes.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but with no header, footer, sectioning content, or heading content descendants.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The start tag is mandatory.<br> + The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>A {{HTMLElement("tr")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.</dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are: + <ul> + <li><code>left</code>: The content is aligned to the left of the cell.</li> + <li><code>center</code>: The content is centered in the cell.</li> + <li><code>right</code>: The content is aligned to the right of the cell.</li> + <li><code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li> + <li><code>char</code> (with text only): The content is aligned to a character inside the <code><th></code> element with minimal offset. This character is defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes.</li> + </ul> + + <p>The default value when this attribute is not specified is <code>left</code>.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS {{cssxref("text-align")}} property to the element.</li> + <li>To achieve the same effect as the <code>char</code> value, give the {{cssxref("text-align")}} property the same value you would use for the {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the {{htmlattrxref("scope", "th")}} attribute instead.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: The {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/Web/CSS">CSS</a>. To create a similar effect use the {{cssxref("background-color")}} property in <a href="/en-US/docs/Web/CSS">CSS</a> instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the {{cssxref("text-align")}} property, {{unimplemented_inline}} in CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell height. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("height")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values: + <ul> + <li><code>row</code>: The header relates to all cells of the row it belongs to.</li> + <li><code>col</code>: The header relates to all cells of the column it belongs to.</li> + <li><code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute in the {{HTMLElement("table")}} element.</li> + <li><code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li> + <li><code>auto</code></li> + </ul> + + <p>The default value when this attribute is not specified is <code>auto</code>.</p> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + <ul> + <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>: Positions the text near the bottom of the cell.</li> + <li><code>middle</code>: Centers the text in the cell.</li> + <li>and <code>top</code>: Positions the text near the top of the cell.</li> + </ul> + + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell width. Additional space can be added with the {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} and {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("width")}} property instead.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><th></code>.</p> + +<h2 id="Specifications">Specifications</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','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> diff --git a/files/ko/web/html/element/thead/index.html b/files/ko/web/html/element/thead/index.html new file mode 100644 index 0000000000..50164bfebc --- /dev/null +++ b/files/ko/web/html/element/thead/index.html @@ -0,0 +1,270 @@ +--- +title: <thead> +slug: Web/HTML/Element/thead +translation_of: Web/HTML/Element/thead +--- +<h2 id="개요">개요</h2> + +<p>The <em>HTML Table Head Element</em> (<code><thead></code>) defines a set of rows defining the head of the columns of the table.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">콘텐츠 범주</a></td> + <td>None.</td> + </tr> + <tr> + <td>허용되는 콘텐츠</td> + <td>Zero or more {{ HTMLElement("tr") }} elements.</td> + </tr> + <tr> + <td>태그 생략</td> + <td>The start tag is mandatory. The end tag may be omitted if the {{ HTMLElement("thead") }} element is immediately followed by a {{ HTMLElement("tbody") }} or {{ HTMLElement("tfoot") }} element.</td> + </tr> + <tr> + <td>허용되는 부모 요소</td> + <td>A {{ HTMLElement("table") }} element. The {{ HTMLElement("thead") }} must appear after any {{ HTMLElement("caption") }} or {{ HTMLElement("colgroup") }} element, even implicitly defined, but before any {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }} and {{ HTMLElement("tr") }} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element">HTML5, section 4.9.6</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD">HTML4.01, section 11.2.3</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "thead") }} and {{ htmlattrxref("charoff", "thead") }} attributes {{ unimplemented_inline("2212") }}.</li> + </ul> + + <p>If this attribute is not set, the <span style="font-family: courier new;">left</span> value is assumed.</p> + + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li> + <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "thead") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">black</span> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">green</span> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">gray</span> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">olive</span> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">maroon</span> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">navy</span> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">red</span> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">purple</span> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">teal</span> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tr") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "thead") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "thead") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li> + <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li> + <li><span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>This element implements the <code><a href="/en/DOM/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code> interface.</p> + +<h2 id="예제">예제</h2> + +<p>See {{ HTMLElement("table") }} for examples on<code> <thead></code>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;"><thead></span> element: + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/time/index.html b/files/ko/web/html/element/time/index.html new file mode 100644 index 0000000000..291c05b2b8 --- /dev/null +++ b/files/ko/web/html/element/time/index.html @@ -0,0 +1,169 @@ +--- +title: <time> +slug: Web/HTML/Element/time +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/time +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><time></code> 요소</strong>는 시간의 특정 지점 또는 구간을 나타냅니다.</span> <code>datetime</code> 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.</p> + +<p><code><time></code> 요소가 나타낼 수 있는 시간은 다음과 같습니다.</p> + +<ul> + <li>24시간 표기법 시계의 시간.</li> + <li>정확한 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EA%B3%A0%EB%A6%AC%EB%A0%A5">그레고리력</a> 날짜. (시간대 정보 포함 가능)</li> + <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">유효한 시간 범위</a>.</li> +</ul> + +<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><time></code> 요소는 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용합니다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있습니다.</p> + +<p>복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용해서는 안됩니다.</p> + +<p>기계가 읽을 날짜와 시간 값은 <code>datetime</code> 특성의 값으로, 아래의 적절한 형식 중 하나여야 합니다. <code>datetime</code> 특성이 없는 경우 <strong>어떠한 자식 요소도 두어서는 안되며</strong>, 요소의 텍스트 콘텐츠를 <code>datetime</code> 특성 값으로 간주합니다.</p> + +<h3 id="유효한_datetime_값">유효한 <code>datetime</code> 값</h3> + +<dl> + <dt>유효한 연도 문자열</dt> + <dd><code>2011</code></dd> + <dt>유효한 연-월 문자열</dt> + <dd><code>2011-11</code></dd> + <dt>유효한 연-월-일 문자열</dt> + <dd><code>2011-11-18</code></dd> + <dt>유효한 월-일 문자열</dt> + <dd><code>11-18</code></dd> + <dt>유효한 주차 문자열</dt> + <dd><code>2011-W47</code></dd> + <dt>유효한 시간 문자열</dt> + <dd><code>14:54</code></dd> + <dd><code>14:54:39</code></dd> + <dd><code>14:54:39.929</code></dd> + <dt>유효한 현지 날짜 및 시간 문자열</dt> + <dd><code>2011-11-18T14:54:39.929</code></dd> + <dd><code>2011-11-18 14:54:39.929</code></dd> + <dt>유효한 국제 날짜 및 시간 문자열</dt> + <dd><code>2011-11-18T14:54:39.929Z</code></dd> + <dd><code>2011-11-18T14:54:39.929-0400</code></dd> + <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18 14:54:39.929Z</code></dd> + <dd><code>2011-11-18 14:54:39.929-0400</code></dd> + <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dt>유효한 기간 문자열</dt> + <dd><code>PT4H18M3S</code></dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('간단한_예제', 250, 60) }}</p> + +<h3 id="datetime_예제"><code>datetime</code> 예제</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p> +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('datetime_예제', 250, 60) }}</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', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.time")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>날짜와 시간 외 다른 종류의 값을 나타낼 수 있는 {{htmlelement("data")}} 요소.</li> +</ul> diff --git a/files/ko/web/html/element/title/index.html b/files/ko/web/html/element/title/index.html new file mode 100644 index 0000000000..178a0d05ff --- /dev/null +++ b/files/ko/web/html/element/title/index.html @@ -0,0 +1,134 @@ +--- +title: '<title>: 문서 제목 요소' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference + - Web + - 제목 + - 창 제목 + - 탭 제목 + - 페이지 제목 +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><title></code> 요소</strong>는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.</span> 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.</p> + +<pre class="brush: html"><title>Grandma's Heavy Metal Festival Journal</title></pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>비어있지 않는 텍스트.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그와 닫는 태그 모두 필수입니다. <code></title></code>이 없으면 브라우저가 페이지의 나머지 내용을 무시합니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>다른 <code><title></code> 요소를 포함하지 않은 {{htmlelement("head")}}.</td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p><code><title></code> 요소는 페이지의 {{HTMLElement("head")}} 안에서 사용해야 합니다.</p> + +<h3 id="페이지_제목과_SEO">페이지 제목과 SEO</h3> + +<p>페이지 제목은 {{glossary("SEO")}}에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. {{glossary("search engine", "검색 엔진")}}이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.</p> + +<p>다음은 좋은 제목을 작성할 때 참고할 수 있는 몇 가지 지침입니다.</p> + +<ul> + <li>하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.</li> + <li>검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.</li> + <li>"키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.</li> + <li>웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><title>엄청 흥미로운 내용</title> +</pre> + +<p>예제 코드를 포함한 문서를 연 브라우저 창이나 탭의 제목이 "엄청 흥미로운 내용"으로 바뀌게 됩니다.</p> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p>페이지의 목적을 설명하는 <code>title</code>을 제공하는 것이 중요합니다.</p> + +<p>보조 기술 사용자가 자주 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것입니다. 일일히 탐색해가며 콘텐츠를 찾는건 시간도 많이 들 뿐더러 어려운 일이기 때문입니다.</p> + +<h3 id="예제_2">예제</h3> + +<pre class="brush: html"><title>메뉴 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!</title> +</pre> + +<p>사용자를 도와주려면 페이지의 <code>title</code> 값이 중요한 상태의 변화(입력 폼 유효성 문제 등)를 반영하도록 바꾸세요.</p> + +<pre class="brush: html"><title>오류 2개 - 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!</title> +</pre> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/ko/web/html/element/tr/index.html b/files/ko/web/html/element/tr/index.html new file mode 100644 index 0000000000..116e664557 --- /dev/null +++ b/files/ko/web/html/element/tr/index.html @@ -0,0 +1,217 @@ +--- +title: <tr> +slug: Web/HTML/Element/tr +translation_of: Web/HTML/Element/tr +--- +<h2 id="개요">개요</h2> + +<p>The <em>HTML Table Row Element</em> (<code><tr></code>) defines a row of cells in a table. Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">콘텐츠 범주</a></td> + <td>None.</td> + </tr> + <tr> + <td>허용되는 콘텐츠</td> + <td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td> + </tr> + <tr> + <td>태그 생략</td> + <td>The start tag is mandatory. The end tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content.</td> + </tr> + <tr> + <td>허용되는 부모 요소</td> + <td>A {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cells</li> + <li><code>center</code>, centering the content in the cells</li> + <li><code>right</code>, aligning the content to the right of the cells</li> + <li><code>justify</code>, widening the spaces in the textual content so that the content is justified in the cells</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "tr")}} and {{htmlattrxref("charoff", "tr")}} attributes {{unimplemented_inline("2212")}}.</li> + </ul> + + <p>If this attribute is not set, the parent node's value is inherited.</p> + + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "tr")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute defines the background color of each cell of the row. It can be either an <a href="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB code</a> or an <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG color keyword</a>. + <div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tr")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "tr")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "tr")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>This element implements the {{domxref("HTMLTableRowElement")}} interface.</p> + +<h2 id="예제">예제</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><tr></code>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>1.0</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("915")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("2212")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><tr></code> element: + <ul> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ko/web/html/element/track/index.html b/files/ko/web/html/element/track/index.html new file mode 100644 index 0000000000..02726500ed --- /dev/null +++ b/files/ko/web/html/element/track/index.html @@ -0,0 +1,175 @@ +--- +title: '<track>: 텍스트 트랙 삽입 요소' +slug: Web/HTML/Element/track +tags: + - Accessibility + - Element + - HTML + - HTML embedded content + - HTML5 + - Multimedia + - Reference + - Web + - 자막 +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><track></code> 요소</strong>는 미디어 요소({{HTMLElement("audio")}}, {{HTMLElement("video")}})의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.</span> 트랙은 <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>(Web Video Text Tracks, <code>.vtt</code> 파일) 또는 <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language(TTML)</a>형식을 사용해야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.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> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>없음</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</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("HTMLTrackElement")}}</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("default")}}</dt> + <dd>사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 <code><track></code> 요소에만 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>텍스트 트랙의 종류. 생략할 경우 <code>subtitles</code>로 간주합니다. 유효하지 않은 값을 가진 경우 <code>metadata</code>로 간주합니다. (Chrome 52 미만에서는 <code>subtitles</code>) 가능한 키워드는 다음과 같습니다. + <ul> + <li><code>subtitles</code> + <ul> + <li>자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.</li> + <li>자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.</li> + <li>음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.</li> + <li>음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>비디오 콘텐츠의 텍스트 설명입니다.</li> + <li>비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>자막의 주소(<code>.vtt</code> 파일). 유효한 {{glossary("URL")}}이어야 합니다. 필수 특성이며, <code><track></code>의 부모 {{htmlelement("audio")}}/{{htmlelement("video")}} 요소에 <code><a href="/ko/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 특성이 없다면 문서와 같은 {{glossary("origin", "출처")}}여야 합니다.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>텍스트 트랙의 언어. 유효한 <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">IETF 언어 태그</a>여야 합니다. <code>kind</code> 특성이 <code>subtitle</code>인 경우 필수 항목입니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="트랙_데이터_유형">트랙 데이터 유형</h3> + +<p><code><track></code> 요소가 미디어에 추가하는 데이터의 유형은 <code>kind</code> 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 <code><track></code> 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.</p> + +<p>미디어 요소는 동일한 <code>kind</code>, <code>srclang</code>, <code>label</code>을 가진 <code><track></code>을 하나보다 많이 포함할 수 없습니다.</p> + +<div class="hidden"> +<h3 id="Detecting_cue_changes">Detecting cue changes</h3> + +<p>{{page("/en-US/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<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','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.track")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/HTML/WebVTT">WebVTT 텍스트 트랙 형식</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/ko/web/html/element/u/index.html b/files/ko/web/html/element/u/index.html new file mode 100644 index 0000000000..79d516a41f --- /dev/null +++ b/files/ko/web/html/element/u/index.html @@ -0,0 +1,206 @@ +--- +title: <u> +slug: Web/HTML/Element/u +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><u></code> 요소</strong>는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.</span> 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.</p> + +<div class="blockIndicator warning"> +<p><code><u></code> 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS {{cssxref("text-decoration")}} 속성을 <code>underline</code>으로 지정하는 방법을 대신 사용해야 합니다.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(<code><u></code>)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 <code><u></code> 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.</p> + +<div class="blockIndicator note"> +<p><code><u></code>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <code><u></code>를 기본 스타일로 사용하는건 피해야 합니다.</p> +</div> + +<h3 id="사용처">사용처</h3> + +<p><code><u></code> 요소의 유효한 사용처는 철자 오류 강조, <a href="https://en.wikipedia.org/wiki/Proper_name_mark">중국어의 고유명사 표시</a> 등이 있습니다.</p> + +<p><code><u></code>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.</p> + +<h3 id="고려할만한_다른_요소">고려할만한 다른 요소</h3> + +<p>대부분의 경우 <code><u></code> 대신 다른 요소를 사용해야 합니다.</p> + +<ul> + <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li> + <li>{{htmlelement("b")}} 요소는 사용자의 주의를 텍스트로 돌립니다.</li> + <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li> + <li>{{htmlelement("strong")}} 요소는 강한 중요성을 나타냅니다.</li> + <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li> + <li>{{htmlelement("i")}} 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.</li> +</ul> + +<p><code><u></code>가 비 텍스트 표기라면, {{htmlelement("ruby")}}는 텍스트 표기를 제공합니다.</p> + +<p>별도의 의미 없이 밑줄만 추가하려면 CSS {{cssxref("text-decoration")}} 속성의 값을 <code>underline</code>으로 지정하세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="맞춤법_오류_표시">맞춤법 오류 표시</h3> + +<p>이번 예제는 <code><u></code>와 약간의 CSS를 사용해, 문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>맞춤법을 틀리면 <u class="spelling">않돼요</u>.</p></pre> + +<p><code>spelling</code> 클래스를 가진 <code><u></code> 요소가 "안돼요"의 잘못된 철자를 나타내고 있음을 볼 수 있습니다.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">u.spelling { + text-decoration: red wavy underline; +}</pre> + +<p>CSS는 <code>spelling</code> 클래스를 가진 <code><u></code> 요소에 빨간 물결 밑줄을 적용하고 있습니다. 빨간 물결 밑줄은 맞춤법 오류를 표시할 때 흔히 쓰이는 스타일입니다. 또 다른 스타일은 <code>red dashed underline</code>입니다.</p> + +<h4 id="결과">결과</h4> + +<p>최근 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.</p> + +<p>{{EmbedLiveSample("맞춤법_오류_표시", 650, 80)}}</p> + +<h3 id="<u>_피하기"><code><u></code> 피하기</h3> + +<p>대부분의 경우, 사실 <code><u></code> 요소를 피하는게 좋습니다. 다음은 다른 요소를 사용해야 하는 몇 가지 경우입니다.</p> + +<h4 id="의미를_가지지_않는_밑줄">의미를 가지지 않는 밑줄</h4> + +<p>아무런 의미를 나타내지 않고 밑줄만 추가할 경우 {{HTMLElement("span")}} 요소를 사용하고, {{cssxref("text-decoration")}} 속성의 값은 <code>underline</code>으로 지정하세요.</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html"><span class="underline">Today's Special</span> +<br> +Chicken Noodle Soup With Carrots</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css">.underline { + text-decoration: underline; +}</pre> + +<h5 id="Result">Result</h5> + +<p>{{EmbedLiveSample("의미를_가지지_않는_밑줄", 650, 80)}}</p> + +<h4 id="책_제목_표현하기">책 제목 표현하기</h4> + +<div id="example-unstyled-cite"> +<p>책 제목은 <code><u></code> 대신 {{htmlelement("cite")}}를 사용해 나타내야 합니다.</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html"><p>The class read <cite>Moby Dick</cite> in the first term.</p></pre> + +<h5 id="기본_스타일_결과">기본 스타일 결과</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> +</div> + +<p><code><cite></code> 요소의 기본 스타일은 기울임꼴을 적용합니다. 원한다면 CSS를 사용해 재정의할 수 있습니다.</p> + +<pre class="brush: css">cite { + font-style: normal; + text-decoration: underline; +}</pre> + +<h5 id="사용자_지정_스타일_결과">사용자 지정 스타일 결과</h5> + +<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</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', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.u")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>보통 {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, {{HTMLElement("cite")}} 요소를 사용하는 편이 더 적합합니다.</li> + <li>특별한 의미를 가지지 않는 밑줄은 CSS {{cssxref("text-decoration")}} 속성을 사용해야 합니다.</li> +</ul> diff --git a/files/ko/web/html/element/ul/index.html b/files/ko/web/html/element/ul/index.html new file mode 100644 index 0000000000..b3a33aa627 --- /dev/null +++ b/files/ko/web/html/element/ul/index.html @@ -0,0 +1,188 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - Element + - HTML + - HTML grouping content + - Reference + - Web +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ul></code> 요소</strong>는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ul.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> + +<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>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</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>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<div class="hidden"> +<dl> + <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt> + <dd>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the {{glossary("user agent")}}, and it doesn't work in all browsers.</dd> + <dd> + <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated: use <a href="/en-US/docs/CSS">CSS</a> instead. To give a similar effect as the <code>compact</code> attribute, the CSS property {{cssxref("line-height")}} can be used with a value of <code>80%</code>.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt> + <dd>This attribute sets the bullet style for the list. The values defined under <a href="/en-US/docs/HTML3.2">HTML3.2</a> and the transitional version of <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> are: + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle</code>.</p> + + <p>If not present and if no <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.</p> + + <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated; use the <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead.</div> + </dd> +</dl> +</div> + +<h2 id="사용_일람">사용 일람</h2> + +<p>보통 비정렬 목록의 항목은 선행하는 불릿 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p> + +<p><code><ul></code>과 {{htmlelement("ol")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p> + +<p><code><ul></code>과 {{htmlelement("ol")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code><ul></code>에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 {{htmlelement("ol")}}을 사용하세요. 그렇지 않으면 <code><ul></code>을 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p> + +<h3 id="중첩_목록">중첩 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <!-- Same for the second nested unordered list! --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- Closing </li> tag for the li that + contains the third unordered list --> + <li>second item third subitem</li> + </ul> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul></pre> + +<p>{{EmbedLiveSample("중첩_목록", 400, 220)}}</p> + +<h3 id="비정렬_목록_안의_정렬_목록">비정렬 목록 안의 정렬 목록</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item + <!-- Look, the closing </li> tag is not placed here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul> +</pre> + +<p>{{EmbedLiveSample("비정렬_목록_안의_정렬_목록", 400, 150)}}</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', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>리스트 관련 다른 요소: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><ol></code> 요소와 유용하게 사용할 수 있는 CSS 속성 + <ul> + <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li> + <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li> + <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li> + <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/element/var/index.html b/files/ko/web/html/element/var/index.html new file mode 100644 index 0000000000..8b55934a46 --- /dev/null +++ b/files/ko/web/html/element/var/index.html @@ -0,0 +1,116 @@ +--- +title: '<var>: 변수 요소' +slug: Web/HTML/Element/var +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/var +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTM <code><var></code> 요소</strong>는 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.</span> 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div> + + + +<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>, 뚜렷한 콘텐츠.</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("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="관련_요소">관련 요소</h3> + +<p><code><var></code>와 함께 자주 사용하는 요소는 다음과 같습니다.</p> + +<ul> + <li>{{htmlelement("code")}}: HTML 코드 요소</li> + <li>{{htmlelement("kbd")}}: HTML 키보드 입력 요소</li> + <li>{{htmlelement("smap")}}: HTML 출력 예시 요소</li> +</ul> + +<p><code><var></code>의 의미에 맞춰 사용하지 않고, 기울임꼴을 적용하기 위해 잘못 사용한 경우, 적절한 CSS와 {{htmlelement("span")}}를 사용해야 합니다. 혹은, 의미에 맞는 요소를 다음 목록에서 골라 사용하세요.</p> + +<ul> + <li>{{htmlelement("em")}}</li> + <li>{{htmlelement("i")}}</li> + <li>{{htmlelement("q")}}</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p><code><var></code>를 사용해 수학 등식의 변수명을 나타내는 간단한 예제입니다.</p> + +<pre><p>간단한 등식: + <var>x</var> = <var>y</var> + 2</p> +</pre> + +<p>{{EmbedLiveSample("Basic_example", 650,80)}}</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', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.var")}}</p> diff --git a/files/ko/web/html/element/video/index.html b/files/ko/web/html/element/video/index.html new file mode 100644 index 0000000000..9007343baa --- /dev/null +++ b/files/ko/web/html/element/video/index.html @@ -0,0 +1,145 @@ +--- +title: '<video>: 비디오 삽입 요소' +slug: Web/HTML/Element/Video +tags: + - Element + - HTML + - HTML embedded content + - Media + - Multimedia + - Reference + - Web + - 동영상 + - 비디오 +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><video></code> 요소</strong>는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.</span> 오디오 콘텐츠에도 사용할 수 있으나, {{htmlelement("audio")}} 요소가 사용자 경험에 좀 더 적합합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.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> + +<p>위 예제는 <code><video></code> 요소의 간단한 사용법을 보입니다. <code><video></code> 또한 {{htmlelement("img")}} 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 <code>src</code> 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.</p> + +<p><code><video></video></code> 태그 안의 콘텐츠는 브라우저가 <code><video></code> 요소를 지원하지 않을 때 보여집니다.</p> + +<h2 id="Attributes" name="Attributes">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.</dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 {{domxref("TimeRanges")}} 객체를 포함합니다.</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are: + <dl> + <dt>anonymous</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd> + <dt>use-credentials</dt> + <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd> + </dl> + When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.</dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>재생된 동영상 영역을 나타내는 {{domxref("TimeRanges")}} 객체 입니다.</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다: + <ul> + <li><span style="font-family: courier new;">none: </span>저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.</li> + <li><span style="font-family: courier new;">metadata</span>: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.</li> + <li><span style="font-family: courier new;">auto</span>: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.</li> + <li><em>빈 문자열</em>: <span style="font-family: courier new;">auto </span>와 동일합니다.</li> + </ul> + + <p>스펙에서는 기본값으로 <span style="font-family: courier new;">metadata</span>를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.</p> + + <div class="note"><strong>사용 정보:</strong> + + <ul> + <li>비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 <code>autoplay</code>이 이 속성보다 우선시 됩니다. <code>autoplay</code> 속성과 <code>preload</code> 속성을 둘 다 설정하는 것은 스펙상 가능합니다.</li> + <li>브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 {{HTMLElement("source")}} 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.</dd> +</dl> + +<h2 id="Examples" name="Examples">이벤트</h2> + +<p><code><video></code> 요소는 많은 <a href="/en-US/docs/Web/Guide/Events/Media_events">이벤트</a>를 발생시킬 수 있습니다.</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: html language-html"><code class="language-html"><span class="comment token"><!-- Simple video example --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">autoplay</span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>posterimage.jpg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + Sorry, your browser doesn't support embedded videos, + but don't worry, you can <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>download it<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> + and watch it with your favorite video player! +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- Video with subtitles --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.en.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>English<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.sv.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sv<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Svenska<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> + +<p>첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.</p> + +<p>두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.</p> + +<h2 id="Server_support" name="Server_support">서버 지원</h2> + +<p>동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).</p> + +<p>Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p> + +<pre>AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p> + +<pre>AddType video/webm .webm +</pre> + +<p>여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 인터페이스</h2> + +<p>이 요소는 <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> 인터페이스를 구현하고 있습니다.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.video")}}</p> + +<h2 id="See_also" name="See_also">참고</h2> + +<ul> + <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li> + <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML5.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 specification)</li> + <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li> +</ul> diff --git a/files/ko/web/html/element/wbr/index.html b/files/ko/web/html/element/wbr/index.html new file mode 100644 index 0000000000..4168ea677d --- /dev/null +++ b/files/ko/web/html/element/wbr/index.html @@ -0,0 +1,111 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><wbr></code> 요소</strong>는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/wbr.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> + <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>.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>모두</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p> + +<h2 id="참고">참고</h2> + +<p>UTF-8 인코딩을 사용한 페이지의 <code><wbr></code>은 <code>U+200B</code><code> ZERO-WIDTH SPACE</code> 코드 포인트처럼 동작합니다. 특히, {{glossary("Unicode")}} bidi BN 코드 포인트처럼 행동하므로 {{glossary("bidi")}} 정렬의 영향을 받지 않습니다. 즉 <code><div dir=rtl>123,<wbr>456</div></code>의 줄이 바뀌지 않은 경우, <code>456,123</code>이 아니라 <code>123,456</code>으로 나타납니다.</p> + +<p>같은 이유로 인해 <code><wbr></code> 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, <code>&shy;</code>)를 사용하세요.</p> + +<p><code><wbr></code>은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.</p> + +<h2 id="예제">예제</h2> + +<p>URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">The Yahoo Style Guide</a></em>는 <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">URL의 줄바꿈을 문장 부호 이전에 하라</a>고 추천합니다.</p> + +<pre class="brush: html notranslate"><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample("예제")}}</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', 'semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in 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.wbr")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> + <li>{{htmlelement("br")}} 요소</li> +</ul> |