> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/head/undefined-15.md). # 문서 메타데이터 요소들 메타 데이터 요소는 해당 페이지의 정보를 제공하며 ``내부에 정의되는 요소이다. ## \ * 문서의 제목과 스타일시트, 스크립트 링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 제공한다. * 대부분 브라우저는 마크업에서 요소가 생략될 경우, 자동으로 요소를 생성하지만 일부는 그렇지 않다. {% hint style="info" %} \[자동으로 요소를 생성하지 않는 브라우저 환경] * Android <= 1.6 * iPhone <= 3.1.3 * Opera <= 9.27 * Safari <= 3.2.1. * Nokia 90 {% endhint %} ## \ * 브라우저의 타이틀 바(Title Bar)나 페이지 탭에 보여지는 **문서의 제목**을 정의. 텍스트만 포함할 수 있으며 포함된 **태그들은 해석되지 않음.** ## \<meta> * 다른 메타 요소들(`<title>`, `<base>`, `<link>`, `<style>`)로 나타낼 수 없는 메타 데이터를 정의할 때 사용한다. ## 메타 데이터의 종류 ### charset 속성이 설정된 경우 * charset 선언. 즉, 웹페이지를 작성하는 일련의 형식에 사용 되는 **문자 인코딩(charset)**에 대한 설정. * 이 속성보다 요소의 **lang 속성이 우선**하여 적용됨. * 예를 들어 `<div lang="fr">` 구문이 뒤에 마크업 되면 해당 텐츠는 프랑스어로 적용된다. 즉, 덮어쓰기 된다. ### http-equiv 속성이 설정된 경우 * pragma 지시어(Directive)로 일반적으로 웹서버가 제공하는 웹페이지가 어떻게 제공되어야 하는지에 대한 정보를 제공. #### 예시 ```markup <!-- 문자 인코딩 --> ✤ HTML 5에서는 더 이상 아래와 같이 사용되길 권장하지 않음. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 이제는 아래와 같은 구문을 사용한다. <meta charset="UTF-8" /> ✤ 3초 뒤에 url 값에 설정된 페이지로 이동하게 됨. <meta http-equiv="refresh" content="3url=https://google.com" /> ``` ### name 속성이 설정된 경우 문서 수준 메타 데이터의 이름을 정의하며, content 속성 값을 통해 설정. ```markup <meta name="메타 데이터 이름" content="값" /> ``` ## 메타 데이터의 속성 ### 1. charset ### 2. http-equiv ### 3. content 이 속성은 텍스트에 따라 http-equiv또는 name속성 과 연결된 값을 제공. ### 4. name #### application name * 웹 페이지에서 실행중인 웹 애플리케이션 이름 정의. * 간단한 웹 페이지는 application-name 메타를 정의하면 안됨. ```markup <meta name="application-name" content="LectureApp" /> ``` {% hint style="info" %} 간단한 웹 페이지란? 애플리케이션 기능이 없는 웹 페이지를 말한다. 참고 → [Website와 Webapplication](https://shhn0509.gitbook.io/hanna-s/tool/web/web-site-web-application) {% endhint %} {% hint style="info" %} **application-name** 이 값은 페이지가 나타내는 웹 애플리케이션의 이름을 제공하는 짧은 문자열 이어야 합니다. 페이지가 웹 애플리케이션이 아닌 경우 application-name 메타 데이터 이름을 사용하면 안됩니다. 애플리케이션에 사용된 언어를 lang 속성에 설정하면 애플리케이션 이름 번역을 제공 할 수 있습니다. 사용자가 웹 브라우저에서 "홈 화면에 추가"를 선택하면, 설정된 이름이 모바일 폰의 앱 아이콘 아래에 표시됩니다. 사용자 에이전트(예: 브라우저)는 application-name 값을 HTML 문서 title 값보다 우선하여 UI에 표시할 수 있습니다. title 값에는 특정 시점의 페이지 상태와 관련된 상태 메시지 등이 포함될 수 있기 때문입니다. 사용자 에이전트가 애플리케이션에 설정된 언어 정보를 알고리즘에 따라 분석해 처리하는 방식은 원문을 참고해 보세요.<br> **참고 자료** \- [W3C HTML 5.2 표준 문서, 4.2. Document metadata ](https://www.w3.org/TR/html/document-metadata.html#application-name)\ \- [meta: 문서-레벨의 메타데이터 요소, MDN ](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)\ \- [2017년에는 어떤 메타 태그를 사용해야 할까요?(영문) ](https://sympli.io/blog/2017/07/13/which-meta-tags-should-you-be-using-in-2017/) {% endhint %} #### description 페이지의 내용에 대한 짧고 정확한 요약을 설정. ```markup <meta name="description" content="웹 페이지의 내용을 요약해서 기술" /> ``` #### keywords 쉼표로 구분된 문자열로 페이지의 내용과 관련된 키워드를 설정. ```markup <meta name="keywords" content="웹페이지에 주요 키워드를 콤마(,)로 구분하여 작성." /> ``` #### author 문서 작성자의 이름을 정의. ```markup <meta name="author" content="웹페이지 제작자" /> ``` #### robots * 검색 로봇이 웹 페이지를 크롤링하는 동작에 대한 정의. * index와 noindex / follow와 unfollow는 같이 사용 해서는 안된다. * [robots의 값](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name#%EB%8B%A4%EB%A5%B8_%EB%A9%94%ED%83%80%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%9D%B4%EB%A6%84) → MDN * index(기본값) : 페이지 내용을 색인한다. * noindex : 크롤러가 페이지를 색인하지 않도록 요청합니다. * follow(기본값) : 크롤러가 페이지 내의 링크를 따라갈 수 있습니다. * nofollow : 따라가지 않는다. * noarchive : 크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다. * nosnippet : 검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다. * noimageindex : 크롤러가 페이지 이미지를 색인하지 않도록 요청합니다. ```markup <meta name="robots" content="index" /> ``` {% hint style="info" %} 웹 크롤러(Web Crawler)란? 웹페이지를 방문하여 자동적으로 수집하는 프로그램이다. {% endhint %} #### viewport (비표준) 초기 viewport 크기 설정에 관한 힌트를 제공. 이 속성은 몇 개의 모바일 디바이스에 의해서만 사용됨. * **width** * height * **initial-scale** * maximum-scale m * inimum-scale * user-scalable ```markup <!-- 모바일에서 아래의 설정이 없을 경우 기본적으로 960px로 나타난다. --> <meta name="viewport" content="width=480px" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> 기기에 폭에 맞춰 화면 최적화, initial-scale : 화면을 배율로 설정 ``` #### **content="width"를 고정값으로 설정하지 않는 이유** 만약 고정값으로 480px으로 설정한다면 스크린의 너비가 960px로 커졌을 때 480px 너비 만큼만 콘텐츠가 보이게 된다. ![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRJhg_JH_JOE4xySpM-%2F-MRJk58bgzwhQjP2DJg9%2Fimage.png?alt=media\&token=00f36108-35e4-4843-88c6-30df401495d9) 이 문제를 해결하기 위해서 변수를 만들어서 사용한다. "device → 기기의 이름, width → 너비" 라고 해서 device-width로 설정하고 initial-scale(배수)는 1로 설정한다. (대부분 그렇다는 것이지 필수 값은 아니다.)\ 단, 해당 속성은 비표준 속성이다. ![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRJl-0sLL8WgmXQToZy%2F-MRJl0TQcbivt5jo2mcu%2Fimage.png?alt=media\&token=fbc8ba93-df6a-4bb6-a3da-610b969b4afe) ## \<link> 현재 문서와 외부 리소스(CSS, JS 등)와의 관계(relation)를 명시한다. 이 요소는 **스타일시트를 링크 하는데 가장 많이 사용됨.** ### 속성 * rel : 문서와의 관계 명시. * type : 링크된 리소스 MIME 타입 정의. (기본 적용: text/css, text/html, text/javascript) * href : 링크된 리소스 URL 설정. * hreflang : 링크된 리소스의 언어 설정. * media : 링크된 리소스가 적용될 미디어(media)를 설정. ### 예시 기본 스타일시트 설정 ```markup <link href="style.css" rel="stylesheet" /> ``` 대체 스타일시트 설정 View > Page Style 메뉴에서(fire fox) 사용할 스타일시트를 고를 수 있다. (Chrome은 해당 X) ```markup <link href="default.css" rel="stylesheet" title="기본 스타일" /> <link href="fancy.css" rel="alternate stylesheet" title="팬시" /> <link href="basic.css" rel="alternate stylesheet" title="베이직" /> ``` ## \<style> 문서나 문서 일부에 대한 스타일 정보를 포함. 기본적으로 CSS 언어가 사용됨. ### 속성 * type * media * scoped : 지정한 섹션 내부에서만 스타일이 적용된다. 다른 곳에서는 적용안됨 * title * disabled : 허용하지 않음 ### 예시 ```markup <style type="text/css"> /* type="text/css"은 기본값이기 때문에 생략해도 무방하다. */ body { color: #323232; } </style> ``` scoped 속성 사용 예 현재 제대로 지원하는 브라우저 없음. ```markup <section> <style scoped> p { color: #902c1f; } </style> <p>...</p> </section> ``` ## \<base> 문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄. 한 문서에 하나의 요소만 존재해야 함. ### 예시 아래의 link, base, meta 링크를 클릭하면 base에 설정한 기준 URL의 상대 위치에 link, base, meta가 가각 더해져서 해당 링크로 이동한다. 예) link 클릭시 <https://developer.mozilla.org/ko/docs/Web/HTML/Element/link로> 이동 된다. ```markup <head> <base target="_blanck" href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/" /> </head> <body> <ul> <li><a href="meta">meta</a></li> <li><a href="link">link</a></li> <li><a href="base">base</a></li> </ul> </body> ``` ## 참고 * \<head> [헤드 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/head) → MDN * \<title> [문서 타이틀 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/title) → MDN * \<meta> [메타 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta) → MDN * \<link> [링크 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/link) → MDN * \<style> [스타일 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style) → MDN * \<base> [베이스 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/base) → MDN * [Document Metadata](https://www.w3.org/TR/html52/document-metadata.html#document-metadata) → HTML 5.2 표준 기술 사양 * [표준 메타데이터 이름](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name) → MDN {% file src="/files/-MRJpF7cksj82zdODBFb" %}