정의와 사용
HTML 문서에서 <meta> 태그는 메타[1]데이터를 정의할 때 쓴다. 메타테이터는 데이터에 대한 정보를 담은 데이터이다. <meta> 태그는 항상 <head>요소 안에 적는다. 보통 특성에 대한 설명, 페이지에 대한 기술, 열쇳말, 저자, 뷰포트(웹페이지에서 보이는 영역) 설정을 담는다. 메타태그는 웹페이지에 나타나지 않고 오로지 기계가 분석할 수 있다. 기계는 브라우저(내용을 보여주는 방식, 페이지를 새로 고침하는 방식), 검색 엔진(열쇠말) 그리고 다른 웹서비스를 이른다.
속성
| 속성 | 값 | 설명 |
|---|---|---|
| charset | character_set | HTML 문서를 위한 문자 인코딩을 지정 |
| content | text | http-equiv 또는 이름 속성과 연관된 값을 지정 |
| http-equiv | content-security-policy content-type default-style refresh |
콘텐츠 속성의 정보 / 값에 대한 HTTP 헤더를 제공 |
| name | application-name author description generator keywords viewport |
메타데이터의 이름을 지정 |
문법
<meta charset="character_set">
<meta content="text">
속성 값
| 값 | 설명 |
|---|---|
| character_set | HTML문서를 위한 특성 인코딩을 지정.
공통 값:
이론상으로 어떤 문자 인코딩도 사용할 수 있지만 브라우저가 모두를 인식하지는 못한다. 문자 인코딩이 더 광범위하게 사용될수록 브라우저가 이를 이해할 가능성이 높아집니다. 사용할 수 있는 문자 인코딩은 IANA 속성 집합에서 볼 수 있다. |
문법
속성 값
| 값 | 설명 |
|---|---|
| content-security-policy | 문서에 대한 내용 정책
<meta http-equiv="content-security-policy" content="default-src 'self'"> |
| content-type | 문서에 대한 문자 인코딩 지정
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| default-style | 스타일 시트를 미리 준비함
<meta http-equiv="default-style" content="the document's preferred stylesheet"> |
| refresh | 문서를 자동으로 '새로고침'할 시간을 지정 <meta http-equiv="refresh" content="300"> |
| X-UA-Compatible | 웹표준을 지키지 않는 페이지를 렌더링하는 방식 지정 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> |
문법
속성 값
| 값 | 설명 |
|---|---|
| application-name | 페이지를 표현할 웹 응용프로그램의 이름을 지정 |
| author | 문서를 쓴 사람 이름을 지정 <meta name="author" content="John Doe"> |
| description | 페이지의 내용 지정하여 검색엔진에게 알림
<meta name="description" content="Free web tutorials"> |
| generator |
문서를 만든 프로그램을 지정
<meta name="generator" content="FrontPage 4.0"> |
| keywords | 쉼표(,)로 구분된 문서 내용에 대한 열쇳말 <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | 뷰포트(viewport:웹 페이지가 보여지는 영역)를 지정 컴퓨터 화면보다 모바일 화면은 작게 설정해야 한다. |
이 블로그는 아래와 같이 메타 태그를 넣었다.
- <meta name="title" content="메타 태그 HTML meta tag :: 슬기로운 취미생활" />
- <meta name="description" Content="논어 일기 / 스킨 공부를 주로 쓰고 싶다. 하지만 자꾸 잡담이 많아지고 있다. 논어 공야장편 25장에 나오는 공자님 말씀이다. “老者安之, 朋友信之, 少者懷之.” 늙은이에게는 편안하게 느껴지고 친구에겐 믿음직스럽게 여겨지며 젊은이에겐 그리운 사람이 되고 싶다. 젊은이에게 그리운 사람이 되는 것이 가장 어렵다." />
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
- <meta name="keywords" content="HTML, CSS, tistory skin, 논어, 티스토리 스킨 고치기">
- <meta name="description" content="티스토리 스킨 만들기, 논어 읽기">
[1] 접두사 meta는 그리스어(μετά)뿌리를 둔 말이다. 라틴어로 'post-', 'ad-'와 같이 '다음에', '~에 대하여', '함께', '옆에'와 같이 여러 가지 뜻으로 쓰는데 주로 과학 용어에서 많이 쓰이던 말이다.
[2] UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로, 켄 톰프슨과 롭 파이크가 만들었다. UTF-8은 Universal Coded Character Set + Transformation Format – 8-bit 의 약자이다.
