[HTML] <meta> 태그와 관련 속성 정리

- <meta> : 웹 서버와 웨 브라우저 간의 상호 교환되는 정보를 정의하는데 사용됨. 주로 문서가 어떤 내용을 담고있고, 키워드가 무엇이며 누가 만들었는지 등 문서 자체의 특성을 담는다.

 

meta의 속성 -- 

name="정보이름"	몇 개의 meta 정보의 이름을 정할 수 있음.
content="정보값"	meta 정보의 내용을 지정.
http-equiv="항목명"	웹 브라우저가 서버에 명령을 내리는 속성. name을 대신해 사용할 수도 있으며, html 문서가 웹 서버로부터 웹 브라우저에 전송되었을 떄에만 의미를 가진다.

 

# <meta> 태그의 종류

• 검색 엔진에 의해 검색되는 단어를 지정

<meta name="Keywords" content="Web, html, 웹 표준" />

• 검색 결과에 표시되는 문자를 지정

<meta name="Description" content="Web, html, 웹 표준" />

• 문자 코드의 종류 설정

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

UTF-8, UTF-16, UTF-32  : 모든 언어의 문자를 지원하는 인코딩

 

• 날짜(제작일)

<meta name="Date" content="2016-02-15T07:45:37+09:00" />

name="Date"를 사용할 때 content '+09:00' 은 GMT(그리니치 표준시)로 부터의 시차이며, 한국은 '+09:00', 미국 동부는 '-05:00'(서머타임 때에는 -04:00)이 되며 나라/지역에 따라 결정됩니다.

• 웹 페이지에 쓰인 언어를 지정

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

• 브라우저 호환성을 지정

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

• 홈페이지 주제를 지정

<meta http-equiv="Subject" content="웹 표준을 위한 사이트" />

• 제목을 지정

<meta http-equiv="Title" content="웹 표준" />

• 페이지를 작성한 제작자명을 지정

<meta http-equiv="Author" content="name" />

• 제작사를 지정

<meta http-equiv="Publisher" content="name" />

• 웹 책임자를 지정

<meta http-equiv="Other Agent" content="name" />

• 제작 도구를 지정

<meta http-equiv="Generator" content="CODA" />

• 메일 주소를 지정

<meta http-equiv="Reply-To" content="naver@naver.com" />
<meta http-equiv="Email" content="naver@naver.com" />

 

• 파일 이름을 지정

<meta http-equiv="Filename" content="index.html" />

 

• 위치를 지정

<meta http-equiv="Location" content="위치" />

 

• 배포자를 지정

<meta http-equiv="Distribution" content="name" />

 

• 저작권을 지정

<meta http-equiv="Copyright" content="copyright@web address" />

• 제작 년,월,일을 지정

<meta http-equiv="Build" content="date" />

• 최종 수정일을 정의

<meta http-equiv="Last-Modified" content="Mon,20 Jul 2016 19:30:30" />

 

• 그림 위에 마우스 오버시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정

<meta http-equiv="imagetoolbar" content="no" />

 

• 캐쉬가 되지 않도록 하기 위해 정의

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

페이지를 cache에서 가져오지 않게 하며 항상 서버에 접속해서 페이지를 가져옵니다.

그러므로 방문자의 브라우저가 항상 cache를 읽도록 해 놓아도 이것을 무시하고 페이지를 갱신합니다.

자주 고치는 페이지에서는 이것을 사용하는 것이 항상 방문자에게 바뀐 내용을 보여 줄 수가 있습니다. 

하지만 페이지 출력 속도는 매번 페이지를 가져오므로 cache를 사용할 수 없어서 시간이 많이 걸린다는 점입니다.

• 캐쉬 만료일을 정의

<meta http-equiv="Expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />

• 60초마다 새로고침을 정의

<meta http-equiv="Refresh" content="60" />

 

• 입력한 주소로 5초후 이동하는 것을 정의

<meta http-equiv="Refresh" content="5;url=주소" />

• 페이지 들어갈 때 장면 전환 효과

<meta http-equiv="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />

장면 전환 효과 속성값

• Box out : 네모난 박스가 안쪽에서 바깥쪽으로
• Circle in : 원이 바깥에서 안쪽으로
• Circle out : 원이 안쪽에서 바깥쪽으로
• Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
• Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
• Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
• Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
• Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
• Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
• Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
• Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
• Random dissove : 안개와 비슷한 형태로 전환
• Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
• Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
• Split Horizontal in : 양쪽에서 중앙으로 수평 이동
• Split Horizontal out : 중앙에서 양쪽끝으로 수직이동
• Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
• Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
• Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
• Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
• Random bars horizontal : 수평선이 무작위로 생성
• Random bars vertical : 수직선이 무작위로 생성
• Random : 임의로 생성