diff options
Diffstat (limited to 'files/ko/web/html/global_attributes')
26 files changed, 2723 insertions, 0 deletions
diff --git a/files/ko/web/html/global_attributes/accesskey/index.html b/files/ko/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..82cd6c49c3 --- /dev/null +++ b/files/ko/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,139 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Global attributes + - HTML + - Reference + - 단축키 +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>accesskey</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다.</span> <code>accesskey</code> 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.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="note"> +<p><strong>참고</strong>: WHATWG 명세는 <code>accesskey</code>의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.</p> +</div> + +<p>단축키를 활성화하는 방법은 브라우저와 플랫폼에 따라 다를 수 있습니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57 이상에서는 <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> 또는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14 이상에서는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 13 이하에서는 <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1" style="text-align: center;">없음</td> + </tr> + <tr> + <th>Edge</th> + <td style="text-align: center;">없음</td> + <td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Google Chrome</th> + <td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td colspan="2" style="text-align: center;">없음</td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd>를 통해 접근 가능한 단축키 목록을 열고, 그 중에서 <kbd>key</kbd>를 눌러 선택합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>accesskey</code> 특성은 빈약한 브라우저 지원을 포함해, 사용하기 전 고려해야 할 수많은 사항이 있습니다.</p> + +<ul> + <li><code>accesskey</code> 값은 시스템이나 브라우저 키보드 단축키 또는 보조 기술 기능과 충돌할 수 있습니다. 운영 체제, 보조 기술, 브라우저의 어떤 조합에서 동작하는 키가 다른 조합에서는 동작하지 않을 수 있습니다.</li> + <li>특정 <code>accesskey</code> 값은 특정 키보드에 존재하지 않을 수 있으며, 국제화가 중요한 경우 많은 키보드 종류로 인해 문제가 될 가능성이 커집니다. 따라서 특정 언어에 맞추는 것은 미래의 문제를 유발할 수 있습니다.</li> + <li>숫자에 의존하는 <code>accesskey</code> 값은, 해당 숫자와 그 동작에 연관성이 없는 경우 인지력 문제를 겪고 있는 사용자에게 혼란스러울 수 있습니다.</li> + <li>사용자에게 <code>accesskey</code>가 존재한다고 알리세요. 시스템에 해당 기능을 알리는 기능이 없다면, 사용자가 실수로 <code>accesskey</code>를 사용할수도 있습니다.</li> +</ul> + +<p>이러한 문제로 인해, 일반적인 목적을 갖는 웹 사이트와 웹 앱에서는 <code>accesskey</code>를 사용하지 않는 것을 권장합니다.</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<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('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>실제로 구현된 것에 대한 더 현실적인 동작 설명.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>최신 W3C {{SpecName('HTML5.1')}} 스펙으로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} 로부터 변경 사항 없음.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML4.01')}} 로부터, 일부 문자들은 <code>accesskey</code> 로 설정될 수 있음. 또한, 모든 엘리먼트에서 설정될 수 있음.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("textarea") }} 에서만 지원됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li> +</ul> diff --git a/files/ko/web/html/global_attributes/autocapitalize/index.html b/files/ko/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..b0a42ef76a --- /dev/null +++ b/files/ko/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,47 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Global attributes + - HTML + - Reference + - 자동 대문자화 +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary"><code><strong>autocapitalize</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 제거하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>off</code> 또는 <code>none</code>: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)</li> + <li><code>on</code> 또는 <code>sentences</code>: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자</li> + <li><code>words</code>: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.</li> + <li><code>characters</code>: 모든 문자의 기본값 대문자</li> +</ul> + +<p><code>autocapitalize</code> 특성은 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등, 문장 첫 글자를 자동으로 대문자로 변환해서 사용자를 돕곤 하는 방식에 영향을 줍니다. <code>autocapitalize</code> 특성을 사용하면 이런 동작을 HTML 작성자가 재정의할 수 있습니다.</p> + +<p><code>autocapitalize</code> 특성을 {{htmlattrxref("type", "input")}} 특성의 값이 <code>url</code>, <code>email</code>, <code>password</code>인 {{HTMLElement("input")}} 요소에 적용해도 자동 대문자 변환은 되지 않습니다.</p> + +<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', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/ko/web/html/global_attributes/contenteditable/index.html b/files/ko/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..8c8d2fabb6 --- /dev/null +++ b/files/ko/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,76 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>contenteditable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.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> + +<p>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>true</code> 또는 빈 문자열은 요소가 편집 가능함을 나타냅니다.</li> + <li><code>false</code>는 요소가 편집 불가능함을 나타냅니다.</li> +</ul> + +<p>값 없이, <code><label contenteditable>예제</label></code>처럼 사용할 경우 빈 문자열 값으로 간주합니다.</p> + +<p>특성이 없거나, 갑이 유효하지 않은 경우 부모 요소로부터 상속합니다. 즉, 부모 요소를 편집 가능한 경우 자신도 편집 가능합니다.</p> + +<p>가능한 값에 <code>true</code>와 <code>false</code>가 있긴 하지만, <code>contenteditable</code> 특성은 불리언 특성이 아닌 열거형 특성입니다.</p> + +<p>텍스트 삽입 시 표시되는 커서의 색은 CSS {{cssxref("caret-color")}} 특성으로 바꿀 수 있습니다.</p> + +<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', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}, no change from {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>{{domxref("HTMLElement.contentEditable")}}, {{domxref("HTMLElement.isContentEditable")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/contextmenu/index.html b/files/ko/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..819295f11b --- /dev/null +++ b/files/ko/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,121 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 특성은 폐기되었으며</a>, 모든 브라우저에서 제거될 것입니다.</p> +</div> + +<p><code><strong>contextmenu</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 이 요소의 컨텍스트 메뉴로 사용될 {{HTMLElement("menu")}}의 <code><a href="/ko/docs/Web/HTML/Global_attributes/id">id</a></code>입니다.</p> + +<p>컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.</p> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15] notranslate"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Anywhere in the example you can share the page on Twitter and + Facebook using the Share menu from your context menu. + </li> + <li contextmenu="changeFont" id="fontSizing"> + On this specific list element, you can change the size of the text + by using the "Increase/Decrease font" actions from your context menu + </li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + On the image below, you can fire the "Change Image" action + in your Context Menu.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js notranslate">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 400)}}</p> + +<h2 id="Specifications">Specifications</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("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p>[1] An experimental implementation was originally available via the command line option <code>--enable-blink-features=ContextMenu</code>. Until Chrome 52 and Opera 39 it was additionally available by enabling the <em>Experimental Web Platform features</em> option, but got removed from that due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">Web compatibility issue</a>. In June 2017, it was removed entirely from the browsers. This is documented in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a>.</p> + +<p>[2] Support for the <code>contextmenu</code> attribute has been removed from Firefox Mobile ({{bug(1424252)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/data-_star_/index.html b/files/ko/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..4aed70b1e4 --- /dev/null +++ b/files/ko/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,79 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>data-*</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 <strong>사용자 지정 데이터 특성</strong>(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.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>모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 {{domxref("HTMLElement")}} 인터페이스, {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 사용할 수 있습니다. <code>data-*</code>의 <code>*</code>은 <a href="https://www.w3.org/TR/REC-xml/#NT-Name">XML 이름 생성 규칙</a>을 따르는 모든 이름으로 대체할 수 있습니다.</p> + +<ul> + <li>대소문자 여부에 상관없이 <code>xml</code>로 시작하면 안 됩니다.</li> + <li>세미콜론(<code>U+003A</code>)을 포함해서는 안 됩니다.</li> + <li>대문자를 포함해서는 안 됩니다.</li> +</ul> + +<p>{{domxref("HTMLElement.dataset")}}은 {{domxref("DOMStringMap")}}이라는 점을 참고하세요. 사용할 땐, 예를 들어 <code>data-test-value</code>라는 이름의 특성을 지정했다면, 모든 대시(<code>U+002D</code>)는 다음 문자를 대문자로 만들고 자신은 사라지므로 <code>HTMLElement.dataset.testValue</code>로 접근할 수 있습니다.</p> + +<h3 id="용도">용도</h3> + +<p><code>data-*</code><strong> </strong>속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 {{htmlelement("img")}} 태그와 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 특성, 그리고 여러 <code>data-*</code> 특성으로 나타낼 수 있습니다.</p> + +<pre class="brush: html"><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</pre> + +<p>HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a>를 확인하세요.</p> + +<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', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</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.global_attributes.data_attributes")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>데이터 특성 값에 접근하고 수정할 수 있는 {{domxref("HTMLElement.dataset")}} 속성.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/dir/index.html b/files/ko/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..ae64e173b2 --- /dev/null +++ b/files/ko/web/html/global_attributes/dir/index.html @@ -0,0 +1,89 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +tags: + - BiDi + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>dir</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.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>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>ltr</code>은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.</li> + <li><code>rtl</code>은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.</li> + <li><code>auto</code>는 {{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> <code>dir</code> 특성은{{HTMLElement("bdo")}} 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.</p> + +<ul> + <li> + <p>{{ HTMLElement("bdi") }} 요소는 <code>dir</code> 특성을 상속하지 않으며, 지정하지 않은 경우 <code>auto</code>를 기본값으로 사용합니다.</p> + </li> + <li> + <p>{{ cssxref("direction") }}과 {{ cssxref("unicode-bidi") }}를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.</p> + </li> + <li> + <p>글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 <code>dir</code> 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.</p> + </li> + <li> + <p>데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 <code>auto</code> 값을 사용해야 합니다.</p> + </li> +</ul> +</div> + +<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', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, from {{SpecName('HTML4.01')}} it added the <code>auto</code> value, and is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>이 특성을 나타내는 {{domxref("HTMLElement.dir")}}.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/draggable/index.html b/files/ko/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..e3d4b5df39 --- /dev/null +++ b/files/ko/web/html/global_attributes/draggable/index.html @@ -0,0 +1,66 @@ +--- +title: draggable +slug: Web/HTML/Global_attributes/draggable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>draggable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> 모두 통제합니다.</span></p> + +<p><code>draggable</code>은 다음 두 값 중 하나를 가질 수 있습니다.</p> + +<ul> + <li><code>true</code>: 요소를 드래그 할 수 있습니다.</li> + <li><code>false</code>: 요소를 드래그 할 수 없습니다.</li> +</ul> + +<div class="blockIndicator warning"> +<p><code>draggable</code> 특성은 불리언이 아니고 열거형 특성이므로, <code>true</code> 또는 <code>false</code>의 지정 또한 필수입니다. 그러므로 <code><img draggable></code>처럼 사용할 수 없고, 올바른 사용법은 <code><img draggable="false"></code>입니다.</p> +</div> + +<p><code>draggable</code>을 지정하지 않은 경우의 기본값은 <code>auto</code>로, 브라우저 기본 동작을 따릅니다. 즉, 텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다. <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">종합 예제</a>에서 볼 수 있듯, 다른 요소에 드래그 앤 드롭을 적용하려면 {{domxref('GlobalEventHandlers.ondragstart', 'ondragstart')}} 이벤트 처리기가 필요합니다.</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", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.draggable")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..15d26aad15 --- /dev/null +++ b/files/ko/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,53 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> + +<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p> + +<ul> + <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li> + <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li> + <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li> +</ul> + +<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', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/hidden/index.html b/files/ko/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..7e4cc9f05f --- /dev/null +++ b/files/ko/web/html/global_attributes/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다.</span> 브라우저는 <code>hidden</code> 속성을 설정한 요소를 렌더링 하지 않습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.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> + +<p>하나의 표시 방식에서만 숨기려 할 땐 <code>hidden</code> 특성이 적합하지 않습니다. 임의의 요소에 <code>hidden</code>을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.</p> + +<p>숨겨지지 않은 요소에서 숨겨진 요소로 연결해서는 안됩니다. 또한, 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, {{htmlelement("script")}} 요소를 실행할 수 있고 양식 요소도 제출할 수 있습니다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있습니다.</p> + +<p>예를 들어, <code>hidden</code> 특성을 적용한 구획으로 링크하는 <code>href</code> 특성은 유효하지 않습니다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문입니다.</p> + +<p>하지만, 숨겨진 설명문을 참조하기 위해 ARIA <code>aria-</code><code>describedby</code> 특성을 사용하는 것은 괜찮습니다. 숨겨진 설명문 자체로는 쓸모가 없음을 나타내지만 특정 문맥, 즉 자신이 설명하는 요소에서 참조하는 경우 쓸모가 생깁니다.</p> + +<p>위와 유사하게, <code>hidden</code> 특성을 적용한 {{htmlelement("canvas")}} 요소는 스크립트로 작성한 그래픽 엔진에 의해 화면 외 버퍼로 쓰일 수 있고, 숨겨진 양식 요소도 <code>form</code> 특성을 통해 양식 컨트롤에서 참조할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>hidden</code> 특성을 가진 요소의 CSS {{cssxref("display")}} 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다. 예컨대 <code>display: flex</code>를 지정한 요소는 <code>hidden</code> 특성이 존재하더라도 화면에 보이게 됩니다.</p> +</div> + +<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', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/id/index.html b/files/ko/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..034fc62ac1 --- /dev/null +++ b/files/ko/web/html/global_attributes/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Global attributes + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>id</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다.</span> 고유식별자의 목적은 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#프래그먼트">프래그먼트 식별자</a>를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.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> + +<div class="blockIndicator warning"> +<p><code>id</code> 특성의 값은 불투명 문자열(opaque string)입니다. 그 말은, 웹 작성자가 <code>id</code> 특성을 통해 사람이 읽을 수 있는 정보를 나타내서는 안된다는 것입니다. (코드 가독성 차원에서는 유용할 수 있습니다. <code>ticket-18569</code>와 <code>r45tgfe-freds&$@</code>을 비교해보세요.)</p> +</div> + +<p><code>id</code> 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 {{htmlattrxref("class")}} 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{glossary("ASCII")}} 문자, 숫자, <code>'_'</code>, <code>'-'</code> 및 <code>'.'</code>를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.</p> +</div> + +<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', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><code>id</code> 특성을 반영하는 {{domxref("Element.id")}} 속성.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/index.html b/files/ko/web/html/global_attributes/index.html new file mode 100644 index 0000000000..ea6735bd27 --- /dev/null +++ b/files/ko/web/html/global_attributes/index.html @@ -0,0 +1,166 @@ +--- +title: 전역 특성 +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Reference + - Web + - 특성 +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>전역 특성</strong>(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.</p> +</div> + +<p>전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다. 예를 들어, HTML5를 준수하는 브라우저라면, <code><foo></code>라는 요소는 유효하지 않지만 그래도 <code><foo hidden>...</foo></code>는 화면에 나타내지 않을 것입니다.</p> + +<p>기본 HTML 전역 특성 외에 아래와 같은 전역 특성도 존재합니다.</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}}과 {{htmlattrdef("xml:base")}}는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.</li> + <li>여러 개의 <code><strong><a href="/ko/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> 특성은 접근성 향상을 위해 사용됩니다.</li> + <li><a href="/ko/docs/Web/Guide/Events/Event_handlers">이벤트 처리기</a> 특성: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="전역_특성_목록">전역 특성 목록</h2> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">{{htmlattrdef("accesskey")}}</a></dt> + <dd>현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/autocapitalize">{{htmlattrdef("autocapitalize")}}</a></dt> + <dd>사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음과 같은 값이 가능합니다. + <ul> + <li><code>off</code> 또는 <code>none</code>, 대소문자 자동 변환이 발생하지 않음 (모든 글자가 기본값 소문자)</li> + <li><code>on</code> 또는 <code>sentences</code>, 각 문장의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li> + <li><code>words</code>, 각 단어의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li> + <li><code>characters</code>, 모든 글자의 기본값이 대문자</li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/class">{{htmlattrdef("class")}}</a></dt> + <dd>공백으로 구분된 해당 요소의 클래스의 목록입니다. 클래스를 이용하면 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 {{domxref("Document.getElementsByClassName()")}}과 같은 메서드를 이용해 특정 요소를 선택하거나 접근할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/contenteditable">{{htmlattrdef("contenteditable")}}</a></dt> + <dd>해당 요소를 사용자가 편집할 수 있는지를 나타내는 열거형 특성입니다. 편집 가능한 경우에 브라우저는 편집을 허용하도록 위젯을 수정합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/data-*">{{htmlattrdef("data-*")}}</a></dt> + <dd>사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법을 제공합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/dir">{{htmlattrdef("dir")}}</a></dt> + <dd>요소의 쓰기 방향을 나타내는 열거형 특성입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/draggable">{{htmlattrdef("draggable")}}</a></dt> + <dd><a href="/ko/docs/Web/API/HTML_드래그_앤_드롭_API">Drag and Drop API</a>를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/exportparts">{{htmlattrdef("exportparts")}}</a> {{experimental_inline}}</dt> + <dd>중첩 섀도우 트리에서 섀도우 파트를 전이적으로 라이트 파트에 내보낼 때 사용합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/hidden">{{htmlattrdef("hidden")}}</a></dt> + <dd>해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 <code>hidden</code> 특성을 가진 요소를 렌더링 하지 않습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/id">{{htmlattrdef("id")}}</a></dt> + <dd>문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의합니다. (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/inputmode">{{htmlattrdef("inputmode")}}</a></dt> + <dd>사용자가 요소나 요소의 콘텐츠를 편집할 때, 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다. 주로 {{htmlelement("input")}} 요소에 사용하지만, {{htmlattrxref("contenteditable")}} 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/is">{{htmlattrdef("is")}}</a></dt> + <dd>표준 HTML 요소가 사용자 정의 기본 요소처럼 동작하도록 지정합니다. (자세한 내용은 <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 정의 요소 사용하기</a>를 참고하세요<a href="/ko/docs/Web/Web_Components/Using_custom_elements">)</a></dd> +</dl> + +<div class="note"> +<p><strong>참고: </strong><code>item*</code> 특성은 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>의 일부입니다.</p> +</div> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemid">{{htmlattrdef("itemid")}}</a></dt> + <dd>아이템의 고유하고 전역적인 식별자입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">{{htmlattrdef("itemprop")}}</a></dt> + <dd>아이템에 특성(properties)을 추가할 때 사용합니다. 모든 HTML 요소에는 이름과 값의 쌍으로 구성된 <code>itemprop</code> 특성을 명시할 수 있습니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemref">{{htmlattrdef("itemref")}}</a></dt> + <dd><code>itemscope</code> 특성을 가진 요소에 속하지 않는 특성들(properties)은 <code>itemref</code>를 사용하여 item에 연결할 수 있습니다. 여기에는 문서 내의 다른 위치에 있는 추가적인 특성을 갖는 요소 id(<code>itemid</code>s 가 아닌)목록이 제공됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">{{htmlattrdef("itemscope")}}</a></dt> + <dd><code>itemscope</code>은 (일반적으로) {{htmlattrxref("itemtype")}}과 같이 사용하여 블록에 포함된 HTML이 특정 item에 대한 것임을 나타냅니다. <code>itemscope</code>은 item을 생성하고 그 item에 연결된 <code>itemtype</code>의 범위를 정의합니다. <code>itemtype</code>은 item과 특성 컨텍스트를 설명하는 (<a class="external external-icon" href="https://schema.org/">schema.org</a>와 같은) 어휘(vocabulary)에 대한 유효한 URL입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemtype">{{htmlattrdef("itemtype")}}</a></dt> + <dd>데이터 구조에서 <code>itemprop</code>s (item properties)을 정의하는 데 사용할 단어의 URL을 지정합니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code>은 데이터 구조 내에서 <code>itemtype</code>에 의해 설정된 어휘가 활성화되는 범위를 설정하는 데 사용됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/lang">{{htmlattrdef("lang")}}</a></dt> + <dd>요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그(<a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>)에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. <a href="#attr-xml:lang"><strong>xml:lang</strong></a>은 이보다 우선합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/part">{{htmlattrdef("part")}}</a></dt> + <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/slot">{{htmlattrdef("slot")}}</a></dt> + <dd>요소에 <a href="/ko/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>의 shadow tree에 있는 슬롯을 할당합니다: <code>slot</code> 특성을 가진 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 해당 <code>slot</code> 특성의 값과 일치하는 {HTMLElement("slot")}} 요소가 생성한 슬롯에 할당됩니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/spellcheck">{{htmlattrdef("spellcheck")}}</a></dt> + <dd>요소의 맞춤법 검사 여부를 지정합니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/style">{{htmlattrdef("style")}}</a></dt> + <dd>요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다. 단, 스타일은 별도 파일에 정의하는 것이 추천하는 방식임을 유의하세요. 이 특성과 {{HTMLElement("style")}} 요소는 테스트 등을 위한 빠른 스타일링이 주 용도입니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/tabindex">{{htmlattrdef("tabindex")}}</a></dt> + <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/title">{{htmlattrdef("title")}}</a></dt> + <dd>요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로서 보여집니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{experimental_inline}}</dt> + <dd>페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타냅니다.</dd> +</dl> + +<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", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>대부분의 전역 특성에 접근할 수 있는 {{domxref("Element")}}와 {{domxref("GlobalEventHandlers")}} 인터페이스.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/inputmode/index.html b/files/ko/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..9f33550c8f --- /dev/null +++ b/files/ko/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,64 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +tags: + - Attribute + - Global attributes + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>inputmode</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<dl> + <dt><code>none</code></dt> + <dd>가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.</dd> + <dt><code>text</code> (기본값)</dt> + <dd>사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.</dd> + <dt><code>decimal</code></dt> + <dd>사용자의 로케일에 맞는 소숫점(보통 <kbd>,</kbd> 또는 <kbd>.</kbd>)을 제공하는 숫자형 키보드를 제공합니다. 장치에 따라 음의 부호(<kbd>-</kbd>)는 제공할 수도, 제공하지 않을 수도 있습니다.</dd> + <dt><code>numeric</code></dt> + <dd>숫자형 키보드를 제공합니다. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공하지 않을 수도 있습니다.</dd> + <dt><code>tel</code></dt> + <dd>전화번호 키보드를 제공합니다. 숫자 0~9, 별표(<kbd>*</kbd>), 해시(샵, <kbd>#</kbd>) 키를 포함합니다. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 <code>{{htmlelement("input/tel", '<input type="tel">')}}</code>을 사용해야 합니다.</dd> + <dt><code>search</code></dt> + <dd>검색 입력 칸에 최적화한 가상 키보드를 제공합니다. 예를 들면, 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있습니다. 일반적인 경우, 반드시 검색 질의를 필요로 하는 입력 칸에는 <code>{{HTMLElement("input/search", '<input type="search">')}}</code>를 사용해야 합니다.</dd> + <dt><code>email</code></dt> + <dd>이메일 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>@</kbd> 키 등을 제공합니다. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 <code>{{htmlelement("input/email", '<input type="email">')}}</code>을 사용해야 합니다.</dd> + <dt><code>url</code></dt> + <dd>{{glossary("URL")}} 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>/</kbd> 키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 합니다. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 <code>inputmode</code> 대신 <code>{{htmlelement("input/url", '<input type="url">')}}</code>을 사용해야 합니다.</dd> +</dl> + +<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", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/is/index.html b/files/ko/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..99e72adade --- /dev/null +++ b/files/ko/web/html/global_attributes/is/index.html @@ -0,0 +1,64 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>is</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 표준 HTML 요소가 사용자 지정 요소처럼 행동하도록 지정합니다. <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 지정 요소 사용하기</a>를 방문해 더 자세한 정보를 알아보세요.</p> + +<p>이 특성은 주어진 사용자 지정 요소의 이름을 현재 문서에 성공적으로 <a href="/ko/docs/Web/API/CustomElementRegistry/define">정의</a>했고, <code>is</code> 특성을 적용하려는 요소를 확장하는 경우에만 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 코드는 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 예제에서 발췌한 것입니다. (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">실제 동작 보기</a>)</p> + +<pre class="brush: js notranslate">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html notranslate"><<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>></<span class="pl-ent">p</span>></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', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemid/index.html b/files/ko/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..1253ac90b7 --- /dev/null +++ b/files/ko/web/html/global_attributes/itemid/index.html @@ -0,0 +1,105 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemid</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템의 고유한 전역 식별자의 형태로 마이크로데이터를 제공합니다. <code>itemid</code> 특성은 {{htmlattrxref("itemscope")}}, {{htmlattrxref("itemtype")}} 특성 모두 가진 요소에만 지정할 수 있습니다. 또한 <code>itemscope</code> 특성에 대응하는 <code>itemtype</code>이 전역 식별자 어휘를 참조하거나 정의해야 합니다.</p> + +<p><code>itemtype</code>의 전역 식별자에 대한 정확한 의미는 지정한 어휘 내에서의 해당 식별자 정의가 제공합니다. 어휘는 동일한 전역 식별자를 가지는 여러 아이템이 공존할 수 있는지, 공존한다면 동일한 식별자를 가진 아이템을 어떻게 처리할 것인지를 정의합니다.</p> + +<p class="note"><strong>참고:</strong> {{glossary("WHATWG")}} 명세는 <code>itemid</code>가 반드시 {{glossary("URL")}}이어야 한다고 되어 있습니다. 하지만, 다음 예제에서는 {{glossary("URN")}} 역시 사용 가능하다는 것을 명확히 보여주고 있습니다. 이런 불일치는 마이크로데이터 명세의 불완전성을 반영한다고 볼 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Title <dd itemprop="title">The Reality Dysfunction +<dt>Author <dd itemprop="author">Peter F. Hamilton +<dt>Publication date +<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl></pre> + +<h3 id="구조화된_데이터">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<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', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성: + <ul> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemprop/index.html b/files/ko/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..5cb1a45e45 --- /dev/null +++ b/files/ko/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,472 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - Attribute + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemprop</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템에 속성을 추가할 때 사용합니다. 모든 요소는 <code>itemprop</code> 특성을 가질 수 있으며, 하나의 <code>itemprop</code>은 키-값 쌍으로 구성됩니다. 각각의 키-값 쌍은 <strong>속성</strong>이라고 부르고, 하나 이상의 속성으로 구성한 그룹을 <strong>아이템</strong>이라고 부릅니다. 속성의 값으로는 문자열이나 {{glossary("URL")}}을 사용할 수 있고, {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} 등 다양한 요소와 연관지을 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 일련의 요소에 <code>itemprop</code> 특성을 표기한 소스 코드와, 그 결과인 구조화된 데이터를 나타내는 표를 보입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="구조화된_데이터">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"></td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="속성">속성</h2> + +<p>속성은 문자열이나 {{glossary("URL")}}을 값으로 가질 수 있습니다. 문자열 값으로 URL을 지정할 경우 {{htmlelement("a")}}와 {{htmlattrxref("href", "a")}} 특성, {{htmlelement("img")}} 요소와 {{htmlelement("src", "img")}} 특성, 또는 그 외의 외부 리소스를 연결하는 기타 요소를 사용해 표현합니다.</p> + +<h3 id="문자열을_값으로_갖는_세_개의_속성">문자열을 값으로 갖는 세 개의 속성</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>.</p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>.</p> + <p>I am + <span itemprop="nationality">British</span>.</p> +</div></pre> + +<h3 id="값이_URL인_image_속성">값이 URL인 "image" 속성</h3> + +<pre class="brush: html notranslate"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>숫자와 문자로 구성된 긴 문자열처럼 사람이 쉽게 읽고 이해할 수 없는 문자열이 값일 경우, {{htmlelement("data")}} 요소의 {{htmlattrxref("value", "data")}} 특성 값을 사용해 나타내고, 사람이 보다 쉽게 읽을 수 있도록 표현한 문자열을 <code><data></code>의 콘텐츠로 지정할 수 있습니다. (<code><data></code> 콘텐츠는 구조화된 데이터의 일부가 아닙니다. 아래 예제를 참고하세요.)</p> + +<h3 id="값이_상품_ID인_속성을_가진_아이템">값이 상품 ID인 속성을 가진 아이템</h3> + +<p>ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있는 텍스트로는 ID 대신 상품 ID를 사용합니다.</p> + +<pre class="brush: html notranslate"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>숫자 값으로는 {{htmlelement("meter")}} 요소와 그 {{htmlattrxref("value", "meter")}} 특성을 대신 사용할 수 있습니다.</p> + +<h3 id="<meter>_요소"><code><meter></code> 요소</h3> + +<pre class="brush: html notranslate"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name">Panasonic White + 60L Refrigerator</span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" + min=0 value=3.5 max=5>Rated 3.5/5</meter> + (based on <span + itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>비슷하게, 날짜와 시간 관련 데이터는 {{htmlelement("time")}}과 그 {{htmlattrxref("datetime", "time")}} 특성을 사용할 수 있습니다.</p> + +<h3 id="날짜_값인_생년월일_속성을_가지는_아이템">날짜 값인 생년월일 속성을 가지는 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>속성을 선언하는 요소에 <code>itemscope</code> 특성을 지정해, 이름-값 쌍의 그룹으로 만들 수도 있습니다. 각 값은 문자열이거나, 이름-값 쌍 그룹(즉, 아이템)이어야 합니다.</p> + +<h3 id="사람을_나타내는_바깥쪽_아이템과_밴드를_나타내는_안쪽_아이템">사람을 나타내는 바깥쪽 아이템과 밴드를 나타내는 안쪽 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span></p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> + players)</span></p> +</div></pre> + +<p>위의 코드에서 바깥쪽 아이템은 <code>name</code>과 <code>band</code> 두 개의 속성을 가지고 있습니다. <code>name</code>은 <code>Amanda</code>이고 <code>band</code>는 그 자체로 <code>name</code>과 <code>size</code>라는 두 가지 속성을 가진 아이템입니다. 밴드의 <code>name</code>은 <code>Jazz Band</code>이고, <code>size</code>는 <code>12</code>입니다. 이 예제에서, 바깥쪽 아이템은 최상위 마이크로데이터 아이템입니다. 다른 아이템의 일부가 아닌 아이템을 최상위 마이크로데이터 아이템이라고 합니다.</p> + +<h3 id="모든_속성이_아이템에서_분리된_경우">모든 속성이 아이템에서 분리된 경우</h3> + +<p>이 예제는 앞의 예제와 동일하지만 모든 속성이 아이템에서 분리되어 있습니다.</p> + +<pre class="brush: html notranslate"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: + <span itemprop="name">Amanda</span></p> +<div id="b" + itemprop="band" + itemscope itemref="c"></div> +<div id="c"> + <p>Band: + <span itemprop="name">Jazz Band</span></p> + <p>Size: + <span itemprop="size">12</span> players</p> +</div></pre> + +<p>이 예제의 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 두 가지 속성을 가지고 있는데, "name"은 "Amanda"로 설정했고, "band"는 다른 아이템으로 연결되어 있습니다. "band"가 가리킨 아이템은 또 다시 두 가지 속성을 가지고 있는데, "name"은 "Jazz Band"이고, "size"는 "12"입니다.</p> + +<p>아이템은 같은 이름을 가지나 서로 다른 값을 갖는 다수의 속성을 가질 수 있습니다.</p> + +<h3 id="두_가지_맛의_아이스크림">두 가지 맛의 아이스크림</h3> + +<pre class="brush: html notranslate"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>이 예제는 두 가지 프로퍼티를 가지고 있는 아이템을 보여주고 있는데, 두 프로퍼티 모두 "flavor"라는 이름을 가지고 "Lemon sorbet"와 "Apricot sorbet"라는 값을 각각 가지고 있습니다.</p> + +<p>어떤 속성을 가진 요소는 프로퍼티 중 일부가 동일한 값을 가질 때 중복을 피하기 위해 한 번에 여러 프로퍼티를 가질 수도있습니다(An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value).</p> + +<h3 id="값이_모두_orange인_favorit-color와_favorite-fruit_두_프로퍼티를_가진_아이템">값이 모두 "orange"인 "favorit-color"와 "favorite-fruit" 두 프로퍼티를 가진 아이템</h3> + +<pre class="brush: html notranslate"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>참고: 마이크로 데이터와 마이크로 데이터가 표시된 문서의 컨텐츠 사이에는 아무런 연관관계가 없습니다.</p> +</div> + +<h3 id="구조화된_데이터를_두_가지_다른_방식으로_표시하기">구조화된 데이터를 두 가지 다른 방식으로 표시하기</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">다음의 두 예제는 의미상 차이는 없습니다.</p> + +<pre class="brush: html notranslate"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html notranslate"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>두 예제 모두 caption을 가지고 있으며 figure와 전혀 관계가 없고 "name" 이라는 이름과 "The Castle"이라는 값의 쌍을 가진 아이템을 가지고 있습니다. 단 한 가지 차이는 사용자가 문서의 바깥쪽으로 figcaption을 드래그하면 drag-and-drop 데이터에 그 아이템이 포함된다는 점입니다다. 그 아이템과 연관된 이미지는 포함되지 않습니다.</p> + +<h2 id="이름과_값">이름과 값</h2> + +<p>프로퍼티는 고유한 토큰으로 이루어진 순서가 없는(unordered) 집합으로 대소문자를 구분하고 이름-값의 쌍을 나타냅니다. 프로퍼티 값은 하나 이상의 토큰을 가지고 있어야 합니다. 다음의 예제에서 각 데이터 셀이 토큰입니다.</p> + +<h3 id="이름_예제">이름 예제</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"></th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>토큰(Tokens)</strong>은 문자열이거나 URL일 수 있습니다. item이 URL일 경우는 <strong>typed item</strong>이라고 하고 그렇지 않은 경우는 문자열(string)이라고 합니다. 문자열에는 마침표(period)나 콜론(colon)이 포함되어서는 안됩니다(아래 참고).</p> + +<ol> + <li>아이템이 typed item일 경우 다음 중 하나이어야 합니다: + <ol> + <li>정의된 프로퍼티 이름이거나</li> + <li>어휘(vocabulary)의 정의를 참조하는 유효한 URL이거나</li> + <li>전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li> + </ol> + </li> + <li>아이템이 typed item이 아닐 경우 다음을 따라야 합니다: + <ol> + <li>"<strong>.</strong>" (U+002E FULL STOP) 문자나 "<strong>:</strong>" characters (U+003A COLON) 문자를 포함하지 않는 문자열로 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li> + </ol> + </li> +</ol> + +<p class="note"><strong>참고:</strong> 위에서 금지한, URL 값이 아닌 경우 ":" 문자가 포함되면 안되는 이유는 이 문자가 문자열에 포함되어 있으면 URL과 구분할 수 없기 때문입니다. "."를 포함하는 문자는 향후 확장을 고려해 예약된 것입니다. 공백(space) 문자는 공백이 포함되어 있을 경우 여러 개의 토큰으로 파싱될 수 있기 때문에 금지되어 있습니다.</p> + +<h2 id="값">값</h2> + +<p>이름-값 쌍의 프로퍼티 값은 다음 목록에서 처음으로 일치하는 값입니다:</p> + +<ul> + <li>해당 요소가 <strong>itemscope </strong>속성을 가지고 있을 경우 + + <ul> + <li>그 값은 해당 요소가 생성한 <strong>아이템(item)</strong>입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>meta </strong>요소일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>content </strong>속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, 또는 <strong>video</strong>일 경우 + <ul> + <li>그 값은 src 속성이 해당 요소에 설정될 당시 노드 문서(node document;<a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>의 일부)에 상대적인 src 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>a</strong>, <strong>area</strong>, 또는 <strong>link </strong>요소일 경우 + <ul> + <li>그 값은 href 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 href 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>object </strong>요소일 경우 + <ul> + <li>그 값은 data 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 data 속성의 값을 파싱한 URL 문자열입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>data</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 value 속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>meter</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>value </strong>속성의 값입니다.</li> + </ul> + </li> + <li>해당 요소가 <strong>time</strong>일 경우 + <ul> + <li>그 값은 해당 요소의 <strong>datetime</strong> 값 입니다.</li> + </ul> + </li> +</ul> + +<p>그 외의 경우</p> + +<ul> + <li>그 값은 해당 요소의 <strong>textContent</strong> 입니다.</li> +</ul> + +<p>어떤 프로퍼티의 값이 <strong>URL</strong>이라면, 그 프로퍼티는 URL 속성 요소를 이용해 지정되어야 합니다. URL 속성 요소는 <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, 그리고 <strong>video </strong>요소입니다.</p> + +<h3 id="이름_순서">이름 순서</h3> + +<p>이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.</p> + +<h4 id="다음_예제에서_a_프로퍼티는_순서대로_1과_2의_값을_가지지만_a_프로퍼티가_b_프로퍼티_보다_먼저_오는지_아닌지는_중요하지_않습니다.">다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다.</h4> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<h4 id="다음_세_예제는_모두_같습니다.">다음 세 예제는 모두 같습니다.</h4> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html notranslate"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html notranslate"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="다른_예제">다른 예제</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="구조화된_데이터_2">구조화된 데이터</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</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 Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemprop")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/HTML/Global_attributes">다른 전역 특성</a></li> + <li>다른 마이크로데이터와 관련된 전역 속성: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemref/index.html b/files/ko/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..3b9f63afea --- /dev/null +++ b/files/ko/web/html/global_attributes/itemref/index.html @@ -0,0 +1,95 @@ +--- +title: itemref +slug: Web/HTML/Global_attributes/itemref +tags: + - Global attribute + - HTML + - HTML Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>itemref</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 사용하면 {{htmlattrxref("itemscope")}} 특성을 가진 요소 바깥의 속성도 아이템과 연결할 수 있습니다.</p> + +<p><code>itemref</code> 특성에는 문서 내 다른 요소의 {{htmlattrxref("id")}} 목록({{htmlattrxref("itemid")}} 아님)을 제공해야 합니다.</p> + +<p><code>itemref</code> 특성은 <code>itemscope</code> 특성을 지정한 요소에만 추가할 수 있습니다.</p> + +<p class="note"><strong>참고: </strong><code>itemref</code> 특성은 마이크로데이터 데이터 모델의 일부가 아니며, 트리 구조를 따르지 않는 데이터에 웹 작성자가 주석을 추가하는 것을 돕는 구문 구조에 불과합니다. 예를 들어, 표의 열이 별개의 아이템인데 데이터 속성은 열을 구성하는 칸에 포함하고 싶은 경우 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div> +</pre> + +<h3 id="구조화_데이터">구조화 데이터</h3> + +<p><small>(<a href="https://json-ld.org/" rel="external">JSON-LD</a> 형식)</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</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 Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.itemref")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/itemscope/index.html b/files/ko/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..8d9b8368fc --- /dev/null +++ b/files/ko/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,284 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference + - 마이크로데이터 +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemscope</strong></code> 전역 특성은 연관된 메타데이터의 범위를 지정하는 불리언 특성입니다. 요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템을 생성하고, 그 결과로 요소에 관련된 키-값 쌍 다수를 낳습니다. 관련 특성인 {{htmlattrxref("itemtype")}}은 어휘(<a href="https://schema.org/">schema.org</a> 등)의 유효한 {{glossary("URL")}}을 지정할 때 사용합니다. 아래 각각의 예제는 <a href="https://schema.org/">schema.org</a>의 어휘를 사용합니다.</p> + +<p>모든 HTML 요소는 <code>itemscope</code> 특성을 가질 수 있습니다. <code>itemscope</code>를 가졌으나 연결된 <code>itemtype</code>이 없는 경우 반드시 연관된 <code>itemref</code>를 가져야 합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>itemtype</code> 특성을 더 알아보려면 <a href="http://schema.org/Thing">http://schema.org/Thing</a>을 방문하세요.</p> +</div> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<p>다음의 예제는 <code>itemscope</code> 특성의 사용법을 보입니다. <code>itemtype</code>은 <a href="http://schema.org/Movie"> http://schema.org/Movie</a>로 지정하고, 세 개의 관련 <code>itemprop</code> 특성을 가집니다.</p> + +<pre class="brush:html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 itemprop="name">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genre>Science fiction</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="구조화된_데이터">구조화된 데이터</h4> + +<p>다음 표는 앞선 코드의 구조화된 데이터를 나타냅니다.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id_특성"><code>itemscope</code> id 특성</h3> + +<p>요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템이 생성됩니다. 아이템은 이름-값 쌍 그룹으로 이루어집니다. <code>itemscope</code>와 <code>itemtype</code> 특성을 가진 요소의 경우, {{htmlattrxref("id")}} 특성도 지정할 수 있습니다. <code>id</code>를 사용하면 새로운 아이템에 대한 전역 식별자를 설정할 수 있으며, 전역 식별자를 사용하면 웹에서 찾을 수 있는 다른 아이템과 연결할 수 있습니다.</p> + +<h3 id="예제">예제</h3> + +<p>다음 예제는 네 개의 <code>itemscope</code> 특성을 가지고 있습니다. 각각의 <code>itemscope</code> 특성은 대응하는 <code>itemtype</code> 특성의 범위를 지정합니다. <code>itemtype</code>, <code>Recipe</code>, <code>AggregateRating</code>, <code>NutritionInformation</code>은 요리법에 관한 <a href="https://www.schema.org">schema.org</a> 구조화된 데이터로, 첫 번째 <code>itemtype</code>의 값인 http://schema.org/Recipe에 정의되어 있습니다.</p> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> + <h2 itemprop="name">Grandma's Holiday Apple Pie</h2> + <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" /> + <p> + By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> + <span itemprop="name">Carol Smith</span> + </span> + </p> + <p> + Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time> + </p> + <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span> + <br> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews + </span> + <br> + Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time><br> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice</span><br> + Calories per serving: <span itemprop="calories">250 cal</span><br> + Fat per serving: <span itemprop="fatContent">12 g</span><br> + </span> + <p> + Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... + </p> + Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div></pre> + +<h3 id="결과">결과</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>다음은 위의 코드를 렌더링한 예제입니다.</p> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h4 id="구조화된_데이터_2">구조화된 데이터</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>참고</strong>: HTML에서 마이크로데이터를 추출할 때 유용하게 사용할 수 있는 Google의 <a href="https://search.google.com/structured-data/testing-tool">구조화된 데이터 테스트 도구</a>가 있습니다. 위의 HTML 예제 코드를 넣어보세요.</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('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</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> 을 방문하셔서 요청해주시길 바랍니다.</div> + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>마이크로데이터 관련 다른 전역 특성 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/html/global_attributes/lang/index.html b/files/ko/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..db9e80e1f2 --- /dev/null +++ b/files/ko/web/html/global_attributes/lang/index.html @@ -0,0 +1,90 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>lang</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다. 특성의 값은 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>에 정의된 형식의 "언어 태그" 한 개입니다.</p> + +<p class="note"><code>lang</code>의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋습니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.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> + +<p>특성의 값이 빈 문자열(<code>lang=""</code>)일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.</p> + +<div class="note"> +<h2 id="언어_태그_구문">언어 태그 구문</h2> + +<p>BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.</p> + +<p>언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.</p> + +<dl> + <dt>언어 하위태그</dt> + <dd>필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 <code>en</code>이고, 한국어의 언어 태그는 <code>ko</code>입니다.</dd> + <dt>활자 하위태그</dt> + <dd>선택사항. 언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다. 예를 들어, 점자로 쓴 프랑스어는 <code>fr-Brai</code>이고, 일본어 가타카나는 <code>ja-Kana</code>입니다. 라틴 알파벳으로 작성한 영어와 같이 굉장히 흔히 쓰이는 체계의 경우 활자 하위태그를 지정할 필요가 없습니다.</dd> + <dt>지역 하위태그</dt> + <dd>선택사항. 기본 언어 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다. <code>es-ES</code>는 스페인에서 사용하는 스페인어, <code>es-013</code>은 중앙 아메리카에서 사용하는 스페인어이며 "국제 스페인어"는 짧게 <code>es</code>가 됩니다.</dd> +</dl> + +<p>활자와 지역 하위태그가 모두 존재할 경우 활자 태그가 더 앞에 배치됩니다. 예를 들어, <code>ru-Cyrl-BY</code>는 키릴 문자로 작성한 벨라루스의 러시아어입니다.</p> + +<p>언어에 적합한 하위태그를 찾아보시려면 <a href="https://r12a.github.io/app-subtags/" rel="external">Language Subtag Lookup</a>을 사용해보세요.</p> +</div> + +<p>CSS {{cssxref(":lang")}} 의사 클래스에서는 유효하지 않은 언어의 이름 두 가지가 이 서로 다르다면 별도로 취급합니다. 예컨대, <code>:lang(es)</code> <code>lang="es-ES"</code>와 <code>lang="es-419"</code> 모두 선택하지만, <code>:lang(xyzzy)</code>는 <code>lang="xyzzy-Zorp!"</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', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li><a href="/ko/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP 헤더</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/part/index.html b/files/ko/web/html/global_attributes/part/index.html new file mode 100644 index 0000000000..839639f470 --- /dev/null +++ b/files/ko/web/html/global_attributes/part/index.html @@ -0,0 +1,43 @@ +--- +title: part +slug: Web/HTML/Global_attributes/part +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/part +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>part</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 파트 이름을 공백으로 구분한 목록을 지정합니다. CSS에서는 {{CSSxRef("::part")}} 의사 요소를 사용해, 섀도 트리 내의 특정 요소에 스타일을 적용할 수 있습니다.</p> + +<p><a href="https://mdn.github.io/web-components-examples/shadow-part/">섀도 파트 예제</a>에서 사용 예를 살펴보세요.</p> + +<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("CSS Shadow Parts", "#part-attr", "part")}}</td> + <td>{{Spec2('CSS Shadow Parts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.part")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/slot/index.html b/files/ko/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..b29c786b7f --- /dev/null +++ b/files/ko/web/html/global_attributes/slot/index.html @@ -0,0 +1,48 @@ +--- +title: slot +slug: Web/HTML/Global_attributes/slot +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>slot</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">섀도우 DOM</a> 섀도우 트리를 할당합니다. <code>slot</code> 특성을 지정한 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 요소의 <code>slot</code> 값과 일치하는 {{htmlelement("slot")}} 요소에 할당됩니다.</p> + +<p>예제는 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a> 안내서에서 확인할 수 있습니다.</p> + +<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', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/spellcheck/index.html b/files/ko/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..c367bcd6a0 --- /dev/null +++ b/files/ko/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,67 @@ +--- +title: spellcheck +slug: Web/HTML/Global_attributes/spellcheck +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>spellcheck</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 맞춤법 검사 여부를 지정하는 열거형 특성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.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>가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>true</code>는 가능한 경우 요소의 맞춤법을 검사해야 함을 나타냅니다.</li> + <li><code>false</code>는 요소의 맞춤법을 검사하지 않아야 함을 나타냅니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>spellcheck</code> 특성은 불리언이 아니고 열거형 특성이므로 <code>true</code> 또는 <code>false</code>를 반드시 지정해야 합니다. 즉, <code><textarea spellcheck></textarea></code>처럼은 사용할 수 없으며, <code><textarea spellcheck="true"></textarea></code>와 같이 사용해야 합니다.</p> +</div> + +<p>특성을 지정하지 않았을 때의 기본값은 브라우저 및 요소에 따라 다릅니다. 또한, <code>spellcheck</code> 특성은 상속 대상이므로, 부모 요소의 값에도 영향을 받습니다.</p> + +<p><code>spellcheck</code>는 권장사항에 불과하며, 브라우저가 맞춤법을 검사해야 할 의무는 없습니다. 보통 <code>spllcheck</code> 특성을 <code>true</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', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/style/index.html b/files/ko/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..6400ef008f --- /dev/null +++ b/files/ko/web/html/global_attributes/style/index.html @@ -0,0 +1,69 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>style</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다.</span> 스타일은 별도의 파일에 정의하는 것이 권장된다는 점을 참고하세요. 이 특성과 {{HTMLElement("style")}} 요소는 주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.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> + +<div class="note"> +<p><strong>참고:</strong> <code>style</code> 특성에 의미를 담으면 안됩니다. 페이지의 모든 스타일을 제거하더라도, 그 의미는 옳게 남아있어야 합니다. 보통 <code>style</code>을 사용해 불필요한 정보를 숨기기보단 <code><a href="/ko/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 특성을 사용해야 합니다.</p> +</div> + +<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', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Defines the content of the <code>style</code> attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/tabindex/index.html b/files/ko/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..898852f852 --- /dev/null +++ b/files/ko/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,92 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>tabindex</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 <kbd>Tab</kbd> 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.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>값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라집니다.</p> + +<ul> + <li><strong>음의 정숫값</strong>(보통 <code>tabindex="-1"</code>)은 연속 키보드 탐색으로 접근할 수는 없으나 JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻합니다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용합니다. + + <div class="note"> + <p><strong>참고:</strong> 음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 {{domxref("HTMLOrForeignElement.focus", "focus()")}} 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.</p> + </div> + </li> + <li><code>tabindex="0"</code>은 기본값으로, 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냅니다. 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됩니다.</li> + <li><strong>양의 정숫값</strong>은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻합니다. 즉, <code>tabindex="4"</code>인 요소는 <code>tabindex="5"</code>와 <code>tabindex="0"</code>인 요소 이전에, 그러나 <code>tabindex="3"</code>인 요소 이후에 접근할 수 있습니다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따릅니다. 최댓값은 <code>32767</code>입니다. + <div class="warning"> + <p>0보다 큰 <code>tabindex</code> 값을 피하세요. 접근성 보조기술 사용자의 페이지 탐색과 조작에 방해될 수 있습니다. 대신, 문서의 요소 순서를 논리적인 순서대로 배치하세요.</p> + </div> + </li> +</ul> + +<p>{{htmlelement("div")}}에 <code>tabindex</code>를 설정할 경우, 콘텐츠에도 <code>tabindex</code>를 지정하지 않는 한 화살표 키로 스크롤 할 수 없습니다. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">fiddle을 방문해 tabindex가 스크롤에 주는 영향을 확인하세요.</a></p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>에 <code>tabindex</code>를 추가하는 것을 피하세요. 이를테면 버튼을 나타내기 위해 {{htmlelement("button")}} 대신 {{htmlelement("div")}}를 사용하는 것을 말합니다.</p> + +<p>비 대화형 요소를 사용해 만든 대화형 컴포넌트는 접근성 트리에 나타나지 않으므로, 보조 기술이 해당 컴포넌트로 탐색하거나 조작하는 것을 방지합니다. 상호작용 가능한 항목은 대화형 요소({{htmlelement("a")}}, {{htmlelement("button")}}, {{htmlelement("details")}}, {{htmlelement("input")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}} 등)를 사용해 적절한 의미와 함께 나타내야 합니다. 대화형 콘텐츠 요소는 보통 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장하고 있습니다.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute | The Paciello Group</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', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</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, 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.</div> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></li> + <li>이 속성을 나타내는 {{domxref("HTMLElement.tabIndex")}}</li> +</ul> diff --git a/files/ko/web/html/global_attributes/title/index.html b/files/ko/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..e0dbe671c1 --- /dev/null +++ b/files/ko/web/html/global_attributes/title/index.html @@ -0,0 +1,125 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>title</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.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>다음과 같은 경우 많이 쓰입니다.</p> + +<ul> + <li>보조 기술을 위해 {{HTMLElement("iframe")}} 요소에 이름 붙이기</li> + <li>진짜 {{HTMLElement("label")}}을 표시하지 못할 때에 대비해 {{htmlelement("input")}} 요소에 프로그래밍을 통한 레이블 추가하기</li> + <li>{{htmlelement("table")}} 요소 컨트롤에 레이블 추가하기</li> +</ul> + +<p>{{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} 요소의 <code>title</code> 특성은 추가적인 뜻을 가지고 있습니다..</p> + +<h2 id="여러_줄의_제목">여러 줄의 제목</h2> + +<p><code>title</code> 특성은 여러 줄을 가질 수 있으며, 모든 <code>U+000A LINE FEED</code> (<code>LF</code>) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p><code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다. +이 <abbr title="This is a +multiline title">예제</abbr>처럼요.</p></pre> + +<h3 id="결과">결과</h3> + +<div>{{EmbedLiveSample('여러_줄의_제목')}}</div> + +<h2 id="특성_상속">특성 상속</h2> + +<p>요소가 <code>title</code> 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.</p> + +<p><code>title</code>에 빈 문자열을 지정한 경우 조상의 <code>title</code>이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div title="CoolTip"> + <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p> + <p title="">하지만 여기에서는 나타나지 않죠.</p> +</div></pre> + +<h3 id="결과_2">결과</h3> + +<div>{{EmbedLiveSample('특성_상속')}}</div> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>title</code> 특성은 다음과 같은 경우에 문제가 많습니다.</p> + +<ul> + <li>터치 전용 장치 사용자</li> + <li>키보드로 탐색하는 사용자</li> + <li>스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자</li> + <li>섬세한 운동조절이 힘든 사용자</li> + <li>인지력 문제를 가진 사용자</li> +</ul> + +<p>일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, <a href="https://inclusive-components.design/tooltips-toggletips/">위에 해당하는 사용자도 접근하기 좋은 다른 기법</a>을 사용하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a 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> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</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', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.title")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li> +</ul> diff --git a/files/ko/web/html/global_attributes/translate/index.html b/files/ko/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..12ec6e9833 --- /dev/null +++ b/files/ko/web/html/global_attributes/translate/index.html @@ -0,0 +1,64 @@ +--- +title: translate +slug: Web/HTML/Global_attributes/translate +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>translate</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다.</span> 가능한 값은 다음과 같습니다.</p> + +<ul> + <li>빈 문자열 또는 <code>"yes"</code>는 페이지 지역화 과정에서 요소를 번역해야 함을 나타냅니다.</li> + <li><code>"no"</code>는 요소의 내용을 그대로 유지해야 함을 나타냅니다.</li> +</ul> + +<p>비록 모든 브라우저가 <code>translate</code> 특성을 인식하는건 아니지만, Google 번역 등의 자동 번역 시스템과 번역가가 사용하는 도구가 값을 존중할 수 있습니다. 그러므로 웹 작성자로서 번역되어선 안될 요소를 표시하는 것이 중요합니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서의 <code>translate</code> 특성은 푸터에 배치한 회사의 브랜드 이름을 번역하지 말 것을 요청합니다.</p> + +<pre class="brush: html notranslate"><footer> + <small>© 2020 <span translate="no">BrandName</span></small> +</footer></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', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.translate")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>이 특성을 반영하는 {{domxref("HTMLElement.translate")}} 속성.</li> + <li><a href="https://www.w3.org/International/questions/qa-translate-flag">HTML의 translate 특성 사용하기</a></li> +</ul> diff --git a/files/ko/web/html/global_attributes/클래스/index.html b/files/ko/web/html/global_attributes/클래스/index.html new file mode 100644 index 0000000000..d0aa89b606 --- /dev/null +++ b/files/ko/web/html/global_attributes/클래스/index.html @@ -0,0 +1,64 @@ +--- +title: class +slug: Web/HTML/Global_attributes/클래스 +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>class</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 DOM 메서드의 {{domxref("document.getElementsByClassName()")}}과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.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>명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.</p> + +<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', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, <code>class</code> is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</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.global_attributes.class")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("element.classList")}}</li> +</ul> |