<meta> 태그의 name 속성
HTML <meta> 태그 ⇒
정의 및 특징
<meta> 태그의 name 속성은 메타데이터를 위한 이름을 명시합니다.
만약 name 속성이 명시되었다면, 반드시 content 속성도 함께 명시되어야만 합니다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있습니다.
문법
|
<meta name="애플리케이션 이름|author|description|generator|keywords|viewport"> |
속성값
| 속성값 | 설명 | |
|---|---|---|
|
애플리케이션 이름 |
웹 페이지가 나타내는 웹 애플리케이션의 이름을 명시함. |
|
| author |
문서의 저자를 명시함. ex) <meta name="author" content="TCPSchool"> |
|
| description |
웹 페이지에 대한 설명을 명시함. 검색엔진은 검색 결과에 이러한 설명을 함께 표시할 수 있습니다. ex) <meta name="description" content="HTML meta tag page"> |
|
| generator |
문서를 생성하는데 사용되는 소프트웨어 패키지(software package) 중 하나를 명시함. (수동으로 생성된 페이지에는 사용하지 않음) ex) <meta name="generator" content="Frontweaver 8.2"> |
|
| keywords |
검색 엔진을 위해 웹 페이지와 관련된 콤마(,)로 구분한 키워드 목록을 명시함. ex) <meta name="keyword" content="HTML, meta, tag, element, reference"> |
|
| viewport |
웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어합니다. 이러한 뷰포트(viewport)는 장치에 따라 달라지므로, 모바일 화면은 컴퓨터 화면보다 뷰포트가 더 작아집니다.
<meta> 요소의 viewport는 브라우저에게 해당 페이지의 면적과 비율 등을 어떻게 제어할 지에 대한 지침을 제공합니다. 따라서 다음과 같은 <meta> 요소를 모든 웹 페이지에 삽입해야만 여러분의 웹 페이지가 모든 장치에서 잘 보이게 될 것입니다. ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
위의 예제에서 "width=device-width" 부분은 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비를 설정합니다. 또한, "initial-scale=1.0" 부분은 브라우저에 의해 웹 페이지가 처음으로 로드될 때 초기 확대/축소 레벨을 설정합니다. |
예제
<head>
<meta name="keyword" content="HTML, meta, tag, element, reference">
<meta name="description" content="HTML meta tag page">
<meta name="author" content="TCPSchool">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
지원하는 브라우저 및 버전
| 속성명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| name | 지원함 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
