<meta>태그 정의와 속성

 

 

 

📙 Meta 태그란?

- meta data 요소를 나타낸다.

- <link>, <script>, <style>, <title>로 나타낼 수 없을 때 <meta>를 이용한다.

- 웹 페이지의 요약본이다.

- 반드시 body 앞에 위치해야한다.

 

 

📌 meta data란?

- 데이터에 관한 구조화된 데이터

- 다른 데이터를 설명해주는 데이터 라고 많이 정의 되어있다.

  한 마디로 많은 데이터를 분류할 때 카테코리 역할을 하는 데이터이다.

 

 

 

 

​​

📙 Mate 태그의 속성

 

1. charset

- 해당 html 문서의 문자 인코딩 방식을 지정한다.

- 유니코드를 위한 문자셋인 UTF-8이 가장 많이 사용된다.

​

​

​

2. http-equiv

- content 속성의 값을 위한 header를 제공한다.

- 반드시 content 속성도 함께 명시 되어야 한다.

 

 

속성값	설명
content-type	해당 문서의 문자 인코딩 방식을 명시함. ex) <meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-type	- 우선적으로 적용할 스타일시트를 명시함. - content 속성값은 동일한 문서에 존재하는 link 요소의 title 속성값과 일치하거나,   동일한 문서에 존재하는 style 요소의 title 속성값과 일치해야만 합니다. ex) <meta http-equiv="default-style" content="preferred stylesheet">
refresh	해당 문서를 새로고침(refresh)할 시간 간격을 명시함. ex) <meta http-equiv="refresh" content="30">

 

 

3. name

- 메타 데이터를 위한 이름을 명시한다.

​

속성명	속성값
author	문서의 저자를 명시함. ex) <meta name="author" content="홍길동">
description	웹 페이지에 대한 설명을 명시함. 검색엔진은 검색 결과에 이러한 설명을 함께 표시할 수 있습니다. ex) <meta name="description" content="공부하는 블로그">
keywords	검색 엔진을 위해 웹 페이지와 관련된 콤마(,)로 구분한 키워드 목록을 명시함. ex) <meta name="keyword" content="HTML, meta, mataDate">
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" 부분은 브라우저에 의해 웹 페이지가 처음으로 로드될 때 초기 확대/축소 레벨을 설정합니다.

 

 

 

 

📖 참고 출처

코딩교육 티씨피스쿨