HTML <meta> 태그
정의와 사용법
<meta> 태그는 HTML 문서에 대한 메타데이터를 정의합니다. 메타데이터는 데이터에 대한 데이터(정보)입니다.
<meta> 태그는 항상 <head> 요소 내부에서는 일반적으로 문자집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용됩니다:
메타데이터는 페이지에 표시되지 않지만 기계가 해석할 수 있습니다.
브라우저(콘텐츠 표시 방법 또는 페이지 재로드), 검색 엔진(키워드) 및 다른 네트워크 서비스가 메타데이터를 사용합니다.
힌트:meta 요소는 여러 가지 다른 용도가 있으며, 하나의 HTML 문서에 여러 개의 meta 요소가 포함될 수 있습니다.
힌트:via <meta> 태그는 웹 디자이너가 뷰포트(사용자가 웹 페이지에서 볼 수 있는 영역)를 제어할 수 있는 방법이 있습니다(아래의 "뷰포트 설정" 예제를 참조하세요).
주의:각 meta 요소는 하나의 용도에만 사용될 수 있습니다. 사용하고자 하는 기능이 여러 개인 경우 head 요소에 여러 개의 meta 요소를 추가해야 합니다.
다른 참조:
HTML 강의:HTML 헤더
HTML DOM 참조 가이드:Meta 객체
예제
<head> <meta charset="UTF-8"> <meta name="description" content="무료 웹 강의"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Bill Gates"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
속성
| 속성 | 값 | 설명 |
|---|---|---|
| charset | 문자집합 | HTML 문서의 문자 인코딩을 지정합니다. |
| content | 텍스트 | 지정한 값은 http-equiv 또는 name 속성과 연결된 값입니다. |
| http-equiv |
|
content 속성의 정보/값에 대한 HTTP 헤더를 제공합니다. |
| name |
|
메타데이터의 이름을 정의합니다. |
전역 속성
<meta> 태그는 전역 속성을 지원합니다 HTML의 전역 속성.
meta 요소는 세 가지 주요 사용 방법이 있습니다:
- name/value 메타데이터 쌍을 지정합니다
- 문자编码 선언
- HTTP 헤더 필드 모의
1: 다양한 name/value 메타데이터 쌍을 지정합니다
meta 요소는 name/content 쌍을 사용하여 메타데이터를 정의할 수 있으며, 이를 위해 name과 content 속성을 사용합니다.
검색 엔진에 대한 키워드를 정의합니다:
<meta name="keywords" content="HTML, CSS, JavaScript">
웹 페이지에 대한 설명을 정의합니다:
<meta name="description" content="Free Web tutorials for HTML and CSS">
페이지의 저자를 정의합니다:
<meta name="author" content="John Doe">
비주얼 포트를 설정하여 다양한 장치에서의 웹사이트의 외관을 개선합니다:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: 문자编码 선언
이 페이지가 UTF-8 문자编码를 사용한다고 선언합니다:
<meta charset="UTF-8">
3: HTTP 헤더 필드 모의
http-equiv 속성과 content 속성을 사용하여 문서를 30초마다 새로 고침할 수 있습니다:
<meta http-equiv="refresh" content="30">
HTML5에서의 변화
charset 속성은 HTML5에서 새로 추가되었습니다.
HTML4에서 http-equiv 속성은 여러 가지 다른 값을 가질 수 있었지만, HTML5에서는 이 페이지에 언급된 값만 사용할 수 있습니다.
HTML4의 scheme 속성은 HTML5에서 더 이상 사용되지 않습니다.
또한, 지금은 더 이상 meta 요소를 사용하여 웹 페이지에서 사용하는 언어를 지정하지 않습니다.
비주얼 포트 설정
HTML5는 웹 디자이너가 비주얼 포트를 설정할 수 있도록 한 방법을 도입했습니다. <meta> 비주얼 포트를 제어하기 위해.
모든 웹 페이지에 다음과 같은 태그를 포함해야 합니다. <meta> 비주얼 포트 요소:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
브라우저에 페이지 크기와 확대 비율을 제어하는 지침을 제공합니다.
width=device-width 부분이 페이지의 너비를 장치의 화면 너비로 설정합니다(장치에 따라 다름).
브라우저가 페이지를 처음 로드할 때initial-scale=1.0 부분 설정 초기 확대 수준.
아래는 뷰포트 메타 태그를 포함하지 않은 웹 페이지와, 포함한 웹 페이지의 예입니다:
힌트:이 페이지를 모바일 또는 태블릿에서 볼 때, 아래 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
기본 CSS 설정
없음.
브라우저 지원
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
| 지원 | 지원 | 지원 | 지원 | 지원 |
