08.HTML meta태그

HTML meta태그

이번 포스팅에서 다룰 주제는 meta 태그입니다. 

mata 테크는 데이터에 대한 정보를 나타낼 때 쓰입니다. mata 태그는 HTML 문서에 대한 메타 데이터를 제공합니다. 일반적으로 페이지 설명, 키워드, 작성자, 기타 메타데이터를 지정하는데 사용하지만 페이지에 표시되지 않습니다. 메타 데이터로 브라우저의 콘텐츠를 표시, 페이지 리로드 방법, 검색 엔진, 키워드,를 사용할 수 있게 해줍니다. 간단하게 메타 태그는 어떻게 사용하는지 알아보겠습니다.

 

기본

1. mata 태그는 항상 head 요소에 있어야 합니다.
2. 메타 데이터는 이름/값으로 전달되어야 합니다.
3. 콘텐츠 속성은 이름 또는 http-equiv 속성이 정의된 경우 반드시 정의하여야 합니다.
4. HTML5의 모든 웹 페이지에 다음 뷰포트 요소를 포함하여야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

뷰포트 설정

위의 뷰포트 요소는 페이지의 크기를 제어하는 법에 대한 지침을 제공합니다.
"width=device-width"는 디바이스의 화면 너비에 따라 페이지 화면을 설정합니다.
"initial-scale=1.0"은 페이지가 처음 브라우저에 의해 로드된 초기 줌 레벨을 설정합니다.

 

문자셋 설정

<meta charset="UTF-8">

페이지의 인코딩(문자 셋)을 어떤 식으로 보여줄지 결정하는 속성입니다. 여러 값이 있지만 표준으로 사용하는 UTF-8로 설정하는 것을 권장합니다.

 

 

autor 

<meta name="author" content="길동홍" />

페이지의 저자를 나타냅니다. content 값은 문자열을 사용해야 합니다. 이 메타 값이 의미를 가지고 있진 않지만 제작자를 명시할 수 있습니다.

 

 

refresh

<meta http-equiv="refresh" content="30;url=https://www.naver.com/" />

페이지를 30초마다 새로 고침합니다. 30을 0으로 바꾸면 0초마다 새로 고침을 하고, url 부분을 추가하면 페이지를 우회시킬 수 있습니다. 지금 코드를 보시면 30초 뒤에 네이버로 넘어가는 코드입니다.

 

 

description and keyword

<meta name="Description" content="홍길동 페이지" />
<meta name="Keywords" content="홍길동, 아버지, 38" />

description은 페이지를 간략히 소개하는 용도로 사용합니다.

keyword는 페이지에 대한 키워드 정보들을 담고 있습니다. 이 키워드 정보는 검색엔진이 보다 잘 찾을 수 있도록 하게 만듭니다.

간단하게 정리하고 마치도록 하겠습니다.

속성	값
charset	character_set
content	text
http-equiv	content-type default-style refresh
name	application-name author description generator keywords viewport