[ HTML meta 태그란? ]
meta 태그?!
이름에서볼 수 있듯이 (x)html 태그 중 하나이고 '메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 합니다. 일반 (x)html 태그는 문서 내용물을 어떻게 보이게 하는지를 나타내기 위해 마크업을 합니다. 하지만, 메타 태그는 (x)html 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지, 문자 세트(언어설정)는 어떤 것을 사용하는지 등의 정보를 담고 있는 태그입니다.
또한, 메타 태그는 html 마크업의 기본인 열었으며 닫아야 되는 구조가 아닌,닫는 태그가 없는 태그입니다.
즉, <meta ... /> 와 같이 작성하게 됩니다.
기본적인 meta 태그의 활용
메타태그는 위와 같이 문서의 정보를 담고 있는 태그입니다. 즉, 실제 웹을 설계하고 구축할때 필수적으로 들어가야 되는 문서의 정보입니다.
이러한 메타태그는 활용용도에 따라 다양하게 나타날 수 있는데, 보편적으로 아래와 같이 이용가능합니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 해당 문서의 언어 설정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 렌더링 모드 설정 아래에 설명이 있습니다.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <!-- 모바일에서 접속시 모바일크기에 맞춘 화면을 렌더링설정 -->
<meta name="title" content="이 문서의 제목은 000 입니다. "/>
<meta name="keyword" content="키워드1,키워드2,키워드3, .... "/>
<meta name="author" content="000"/>
<meta name="description" content="이 문서는 html 소개를 위한 문서입니다. ~~~~ "/>
* 렌더링 모드 설정이란?
기존 IE8 이하의 브라우저에서는 호완성보기 버튼을 보신적이 있으실겁니다. 이는 웹표준을 지키지 않은 구 버전의 브라우저에서 관용모드 로서 렌더링 되게 하게 합니다. 시간이 흘러 웹표준을 지키는 브라우저들을 기준으로 제작된 웹페이지들은 이 호환성 보기 버튼이 굳이 필요하지 않음이 생겼고, 해당 브라우저의 최신 렌더링 모드로 작동하게 강제할 필요가 생겼습니다. 이에 메타태그를 이용하여 렌더링 모드를 강제하게 됩니다.
- IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다.
- IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용됩니다.
- IE=EmulateIE7 : IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링됩니다.
- IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링됩니다 .
- IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링됩니다.
- IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링됩니다.
IE=edge 모드를 지정할 것을 권장합니다. )* ' viewport ' 설정
width 속성은 뷰포트의 크기를 조정합니다.. 특정한 숫자를 사용해 width=600라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있습니다. 여기서 나온 device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다. 또한 ' initial-scale=1.0' 은 초기 로드 시 줌 레벨을 설정함을 의미하며, 'user-scalable=yes' 라는 부분은 화면을 확대하거나 축소 함(줌인, 줌아웃)을 할 수 있도록 설정함을 의미합니다. 반대의 경우 no로 설정하시면 됩니다.
SEO (검색엔진최적화) 설정
<meta name="keywords" content="html, CSS, JS" />
<meta name="description" content="HTML,CSS,JS 를 활용한 웹페이지 만들기" />
만약 html, css, js 를 소개함과 동시에 웹 페이지를 만드는 방법을 소개하는 웹페이지라면 위와 같이 그 문서의 키워드인 'html', 'css', 'js' 단어를 "keywords" 메타 태그에 담으며, 'HTML,CSS,JS 를 활용한 웹페이지 만들기' 라는 (x)html 문서 소개를 "description" 메타 태그에 담습니다. 이들 메타 태그를 그 (x)html 문서의 <head> 사이에 넣어 두는 것입니다. 검색 엔진(로봇) 이 웹 문서를 검색할 때 이들 "keywords", "description" 메타 태그를 통해 검색하는 경우가 있기 때문입니다. 검색엔진에서 검색어를 입력하고 엔터를 치면 검색엔진은 입력한 검색어와 같은 단어가 keywords, description 메타 태그 내에 등장하는 문서를 찾아내서 검색 결과를 통해 보여줍니다.
robots라는 메타 태그가 있습니다.: 이 문서도 긁어가고 링크된 문서도 긁어감.
<meta name="robots" content="noindex,follow" />
: 이 문서는 긁어가지 말고 링크된 문서만 긁어감.
<meta name="robots" content="index,nofollow" />
: 이 문서는 긁어가되, 링크는 무시함.
<meta name="robots" content="noindex,nofollow" />
: 이 문서도 긁지 않고, 링크도 무시함.
자동으로 다른 페이지로의 이동
<meta http-equiv="refresh" content="5;url=http://www.naver.com/" />
위에 나타난 메타태그는 우리가 흔히 평범한 웹사이트를 방문할시 자동으로 다른 페이지로 넘어가게 되는 경우를 보신 적이 있으실텐데 그런 작업을 위한 메타태그입니다. 즉 refresh는 새로고침 정도로 생각하는 것이 편하며, content에 들어있는 숫자는 ~초 뒤에 일을 의합니다. 여기서는 5초 후에 url에 나와있는 네이버로 자동 새로고침하겠다 라는 의미입니다.
-- 본 포스팅은 스터디의 목적으로 포스팅 되었습니다. 잘못된 정보가 있을시 댓글로 남겨주세요^^ --
(불펌을 금지 합니다)
'Web > Html' 카테고리의 다른 글
| [HTML] 기본 태그 정리 (319) | 2016.02.02 |
|---|---|
| [HTML] HTML이란?! (122) | 2016.01.04 |
