HTML&CSS 공부하기!

[Chapter 3] 태그의 쓰는 이유와 종류

정의 및 사용

메타 데이터는 데이터에 대한 데이터 (정보)입니다.

<meta> 태그는 HTML 문서에 대한 메타 데이터를 제공합니다. 메타 페이지에 표시되지 않지만, 기계 분석 할 것이다.
메타 엘리먼트는 일반적으로 페이지 설명, 키워드, 문서 저자, 마지막 수정, 및 다른 메타 데이터를 지정하는 데 사용된다.
메타 데이터 브라우저에서 사용할 수있는 검색 엔진 (키워드), 또는 다른 웹 서비스 (콘텐츠 또는 다시로드 페이지를 표시하는 방법).

예제

예제 1 - 검색 엔진 키워드를 정의:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

예제 2 - 웹 페이지에 대한 설명을 정의:

<meta name="description" content="Free Web tutorials on HTML and CSS">

예제 3 - 페이지의 저자를 정의:

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

예제 4 - 30초마다 새로고침을 한다:

<meta http-equiv="refresh" content="30">

예제 5 - 인터넷 익스플로러 호환 모드
http-equiv는 컨텐츠의 속성 정보/값에 대한 것을 HTTP헤더에 제공하는 것.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

예제 6 - 문자열 인코딩 HTML5

<meta charset="UTF-8">

HTML 4.01

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

웹 사이트의 기본 정보를 제공

필요한 항목만 <head> 태그 요소에 삽입하여 사용.

<meta name="generator" content="사이트 제작 툴 혹은 에디터">
<meta name="author" content="저자 제작자"> 
<meta name="keywords" content="검색을 위한 키워드">
<meta name="description" content="페이지의 요약설명">
<meta name="copyright" content="저작권 정보">
<meta name="subject" content="사이트의 주제 입력">
<meta name="title" content="사이트의 타이틀">
<meta name="publisher" content="발행인 조직 혹은 기업">
<meta name="other agent" content="사이트 책임자">
<meta name="classification" content="카테고리 분류">
<meta name="reply-to(email)" content="메일주소">
<meta name="filename" content="파일명">
<meta name="author-date(date)" content="제작일">
<meta name="location" content="위치/국가">
<meta name="distribution" content="배포자">

효과를 나타내는 제공

<meta http-equiv="refresh" content="60">
<!-- //60sec 자동으로 새로고침 -->
<meta http-equiv="refresh" content="3;url=http://www.naver.com/">
<!-- //해당 주소로 3초후 자동이동 -->
<meta http-equiv="imagetoolbar" content="no">
<!--  //익스플로러에서 이미지 마우스 오버시 이미지툴바 표시 안함 -->
<meta http-equiv="page-enter" content="revealtrans(duration=1, transition=23)">
 <!--  //페이지 들어갈 때 장면 전환 효과 -->
<meta http-equiv="page-exit" content="revealtrans(duration=1, transition=23)"> 
<!--  //페이지 나갈 때 장면 전환 효과 -->

각 옵션의 선택사항 : 
Page-Enter : 페이지 들어갈 때 효과 줌
Page-Exit : 페이지 나올 때 효과 줌
blendtrans : 점점 밝게 또는 점점 어둡게 나타나도록 설정
revealtrans : 문서 전환 효과 지정
duration : 시현 시간 지정

transition=0 사각형 작아지기
transition=1 사각형 커지기
transition=2 원 작아지기
transition=3 원 커지기
transition=4 위에서 아래로
transition=5 아래이서 위로
transition=6 왼쪽에서 오른쪽
transition=7 오른쪽에서 왼쪽
transition=8 수직 블라인드
transition=9 수평 블라인드
transition=10 체크무늬 왼쪽에서 오른쪽으로
transition=11 체크무늬 위에서 아래로
transition=12 랜덤 뿌리기
transition=13 수직 2등분 가운데로 모움
transition=14 수직 2등분 바깥으로 퍼짐
transition=15 수평 2등분 가운데로 모움
transition=16 수평 2등분 바깥으로 퍼짐
transition=17 45도 오른쪽 위에서 왼쪽 아래로
transition=18 45도 오른쪽 아래에서 왼쪽위로
transition=19 -45도 왼쪽 위에서 오른쪽 아래로
transition=20 -45도 왼쪽 아래에서 오른쪽 위로
transition=21 수평 랜덤
transition=22 수직 랜덤
transition=23 1~22 랜덤 선택

로봇을 제어하는 메타태그

robot.txt 파일을 생성하지 않고 메타태그를 활용하여 로봇을 제어할 수 있습니다.

<meta name="robots" content="all" />
<!-- // 로봇 검색을 허가한다. // -->
<meta name ="robots" content="none" />
<!-- // 로봇 검색을 허가하지 않는다. // -->
<meta name="robots" content="index,follow" />
<!-- // 이 파일을 읽는다. 링크 연결 문서도 읽는다. // --> 
<meta name="robots" content="noindex,follow" />
<!-- // 이 파일은 읽지 않는다. 링크 연결 문서만 읽는다. // --> 
<meta name="robots" content="index,nofollow" />
<!-- // 이 파일을 읽는다. 링크 연결은 무시한다. // --> 
<meta name="robots" content="noindex,nofollow" />
<!-- // 이 파일를 읽지 않는다. 링크 연결도 무시한다. // -->