diff options
Diffstat (limited to 'files/ko/web/html/element/meta/name')
| -rw-r--r-- | files/ko/web/html/element/meta/name/index.html | 312 |
1 files changed, 312 insertions, 0 deletions
diff --git a/files/ko/web/html/element/meta/name/index.html b/files/ko/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..76333202b1 --- /dev/null +++ b/files/ko/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 표준 메타데이터 이름 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata + - 메타데이터 +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("meta")}} 요소는 {{htmlattrxref("name", "meta")}} 특성을 메타데이터 이름으로, {{htmlattrxref("content", "meta")}} 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.</span></p> + +<h3 id="HTML_명세가_정의하는_표준_메타데이터_이름">HTML 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.</p> + +<ul> + <li> + <p><code>application-name</code>: 웹 페이지에서 구동 중인 애플리케이션의 이름.</p> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. {{htmlelement("title")}} 요소 역시 보통 애플리케이션 이름을 포함하지만, <code>application-name</code>과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.</li> + <li>단순한 웹 페이지에서는 <code>application-name</code>을 지정하지 말아야 합니다.</li> + </ul> + </div> + </li> + <li><code>author</code>: 문서 저작자.</li> + <li><code>description</code>: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 <code>description</code> 메타데이터를 사용합니다.</li> + <li><code>generator</code>: 페이지를 생성한 소프트웨어의 식별자.</li> + <li><code>keywords</code>: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.</li> + <li><code>referrer</code>: 문서에서 시작하는 요청의 HTTP {{httpheader("Referer")}} 헤더를 아래 표와 같이 통제합니다. + <table class="standard-table"> + <caption><code><meta name="referrer"></code> 특성에 대한 <code>content</code> 특성의 값</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>문서의 {{glossary("origin", "출처")}}를 전송합니다.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code><meta name="referrer"></code>의 값을 {{domxref("Document.write", "document.write()")}} 또는 {{domxref("Node.appendChild", "appendChild()")}}를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.</li> + <li>여러 정책이 서로 충돌할 경우에는 <code>no-referrer</code> 정책을 사용합니다.</li> + </ul> + </div> + </li> + <li><code><a href="/ko/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. <code>content</code> 특성은 유효한 CSS {{cssxref("<color>")}} 색상을 포함해야 합니다.</li> +</ul> + +<h3 id="다른_명세가_정의하는_표준_메타데이터_이름">다른 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>color-scheme</code>: 문서와 호환되는 하나 이상의 색채 조합.</p> + + <p>브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <code><meta name="color-scheme"></code>의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.</p> + + <p><code>color-scheme</code>과 사용 가능한 {{htmlattrxref("content", "meta")}} 특성의 값은 다음과 같습니다.</p> + + <dl> + <dt><code>normal</code></dt> + <dd>문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.</dd> + <dt><code>only light</code></dt> + <dd>문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 <code>only dark</code>는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.</dd> + </dl> + + <p>예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p><code>name="color-scheme"</code>은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS {{cssxref("color-scheme")}} 속성은 개별 요소 단위로 지정합니다. CSS {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.</p> + </li> +</ul> + +<p>CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>viewport</code>: {{glossary("viewport", "뷰포트")}}의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.</p> + + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">가능한 하위 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>양의 정수 또는 <code>device-width</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>양의 정수 또는 <code>device-height</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>장치 너비(세로 모드에서는 <code>device-width</code>, 가로 모드에서는 <code>device-height</code>)와 뷰포트 너비의 비율을 정의합니다.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최대 확대 비율을 정의합니다. <code>minimum-scale</code> 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최소 확대 비율을 정의합니다. <code>maximum-scale</code> 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> 또는 <code>no</code></td> + <td><code>no</code>인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 <code>yes</code>입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>, <code>contain</code>, <code>cover</code></td> + <td> + <p><code>auto</code> 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.</p> + + <p><code>contain</code> 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.</p> + + <p><code>cover</code> 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. <a href="/ko/docs/Web/CSS/env">안전 영역</a> 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>비록 표준은 아니지만, <code>viewport</code>의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.</li> + <li>장치와 브라우저마다 기본값이 다를 수 있습니다.</li> + </ul> + </div> + + <h5 id="Accessibility_concerns_with_viewport_scaling">Accessibility concerns with viewport scaling</h5> + + <div><code>user-scalable</code>을 <code>no</code>로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="같이_보기">같이 보기</h5> + + <p>CSS {{cssxref("@viewport")}} @-규칙</p> + </li> +</ul> + +<h3 id="다른_메타데이터_이름">다른 메타데이터 이름</h3> + +<p><a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions 페이지</a>는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.</p> + +<ul> + <li><code>creator</code>: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 {{HTMLElement("meta")}} 요소를 사용해야 합니다.</li> + <li><code>googlebot</code>은 <code>robots</code>의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..</li> + <li><code>publisher</code>: 문서를 출판한 자의 이름.</li> + <li><code>robots</code>: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다 + <table class="standard-table"> + <caption><code><meta name="robots"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">설명</th> + <th scope="col">사용처</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>크롤러가 페이지를 색인할 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>크롤러가 페이지를 색인하지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>all</code></td> + <td><code>index, follow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td><code>noindex, nofollow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code>와 동일합니다.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.</li> + <li>메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 {{glossary("robots.txt")}}를 사용하세요.</li> + <li>이미 등록된 페이지를 검색 결과에서 제거할 수단으로 <code>noindex</code>를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 <code>robots.txt</code> 파일이 방문을 방지하고 있지는 않은지 확인하세요.</li> + <li><code>index</code>와 <code>noindex</code>, <code>follow</code>와 <code>nofollow</code>처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.</li> + <li>Google과 Bing 등 일부 크롤러는 위의 값을 HTTP <code>X-Robot-Tags</code> 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.</li> + </ul> + </div> + </li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.meta.name")}}</p> |