path: root/files/ko/web/html/element/meta/index.html

---
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>&lt;meta&gt;</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>&lt;meta charset&gt;</code>, <code>&lt;meta http-equiv&gt;</code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code>&lt;head&gt;</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>&lt;meta&gt;</code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code>&lt;meta&gt;</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">&lt;meta charset="utf-8"&gt;

&lt;!-- 3초 후 리다이렉트 --&gt;
&lt;meta http-equiv="refresh" content="3;url=https://www.mozilla.org"&gt;
</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', '&lt;meta&gt;')}}</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>