diff options
Diffstat (limited to 'files/ko/web/html/element/meta/index.html')
| -rw-r--r-- | files/ko/web/html/element/meta/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/ko/web/html/element/meta/index.html b/files/ko/web/html/element/meta/index.html new file mode 100644 index 0000000000..3454e4d866 --- /dev/null +++ b/files/ko/web/html/element/meta/index.html @@ -0,0 +1,151 @@ +--- +title: '<meta>: 문서 레벨 메타데이터 요소' +slug: Web/HTML/Element/meta +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - metadata +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meta></code> 요소</strong>는 {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}과 같은 다른 메타관련 요소로 나타낼 수 없는 {{glossary("Metadata", "메타데이터")}}를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code><head></code> 내의 {{htmlelement("noscript")}} 요소도 가능합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p><code>meta</code> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.</p> + +<ul> + <li>{{htmlattrxref("name", "meta")}} 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.</li> + <li>{{htmlattrxref("http-equiv", "meta")}} 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.</li> + <li>{{htmlattrxref("charset", "meta")}} 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.</li> + <li>{{htmlattrxref("itemprop")}} 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{htmlattrxref("name", "meta")}} 특성은 <code><meta></code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code><meta></code> 요소에서, {{htmlattrxref("itemprop", "meta")}} 특성을 {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("charset", "meta")}} 특성과 함께 설정할 수 없습니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "<code>utf-8</code>"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>{{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("name", "meta")}} 특성의 값을 담습니다.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>프래그마 지시문을 정의합니다. 특성의 이름(<code><strong>http-equiv</strong>(alent)</code>)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.</p> + + <ul> + <li><code>content-security-policy</code> + + <p>현재 페이지의 <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">콘텐츠 정책</a>을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.</p> + </li> + <li><code>content-type</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>text/html; charset=utf-8</code>"이어야 합니다. <strong>참고:</strong> <code>text/html</code> <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.</p> + </li> + <li><code>default-style</code> + <p>기본 <a href="/ko/docs/Web/CSS">CSS 스타일 시트</a> 세트의 이름을 지정합니다.</p> + </li> + <li><code>x-ua-compatible</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>IE=edge</code>"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.</p> + </li> + <li><code>refresh</code> + <div>다음을 지정합니다.</div> + + <ul> + <li>{{htmlattrxref("content", "meta")}} 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.</li> + <li>{{htmlattrxref("content", "meta")}} 특성이 양의 정수 값을 가지고 그 뒤를 문자열 <code>;url=</code>과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.</li> + </ul> + + <h5 id="접근성_고려사항">접근성 고려사항</h5> + + <div><code>refresh</code> 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p><code>name</code>과 <code>content</code> 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. <code>name</code>은 이름, <code>content</code>는 값을 담당합니다.</p> + + <p><a href="/ko/docs/Web/HTML/Element/meta/name">표준 메타데이터 이름</a> 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- 3초 후 리다이렉트 --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added <code>itemprop</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> |