HTML - META tag
HTML - All about META tag
META tag (메타 태그)란 키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보 즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML Tag이다.
META태그는 <head>와 </head> 사이에 들어가며 <meta>태그는 메타 데이터로 HTML문서가 가지고 있는 유용한 정보를 담아 주는 곳이다. 활용 목적에 따라서 여러가지 형식으로 사용할수 있다.
※ META Tag의 종류 :
01. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
/* 현재 페이지 한글입력, 한글 인코딩 */
02. <meta content=kr name=content-language>
/* 언어 설정 */
03. <meta content="IE=Edge" http-equiv="X-UA-Compatible">
/* 인터넷 익스플로러 최신버전으로 랜더링한 후에 열으라는 메타주소 */
04. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
/* 인터넷 익스플로러 최신버전으로 랜더링한 후에 크롬이 깔려있다면 크롬으로 랜더링하라는 메타주소 */
05. <meta name="keywords" content="html5, jQuery, MariaDB">
/* Keyword Search Engine에 검색되기 위한 키워드 설정 */
06. <meta content="META란 무엇인가?" name="description">
/*해당 페이지의 설명, 제목과 더불어 서술되는 내용 요약. space포함 150이내(text) */
07. <meta content="May, 25, 2018" name=creation_date>
/* 만든 날짜 */
08. <meta name="build" content="2018.5.25">
/* 갱신일자 */
09. <meta content="25 May 18" name=Author-Date>
/* 제작일자 */
10. <meta http-equiv="Cache-Control" content="No-Cache">
/* No-Cache로 설정해놓으면 갱신이 빠름. 좋은점은 인덱스 페이지 리딩이 무척 빨라짐. */
11. <meta http-equiv="Pragma" content="No-Cache">
/* 캐쉬가 되지 않게 하는 태그, 매번 새로고침 효과 */
12. <meta http-equiv="Expire" content="-1">
/* 캐쉬 완료(파기)시간 정의 */
13. <meta content="1 Days" name="revisit-after">
/* 검색엔진 재 방문 시기 */
14. <meta content="ALL" name="ROBOTS">
/* 보안 및 공개 설정시 설정 */
15. <meta name="writer" content="anonymous">
/* 만든 이 */
16. <meta name="copyright" content="anonymous">
/* 회사 이름 */
17. <meta name="Distribution" content="anonymous" >
/* 배포자 */
18. <meta http-equiv="imagetoolbar" content="no">
/* 그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음 */
19. <meta http-equiv="refresh" content="2; URL=http://daum.net">
/* content="대기시간(초); URL=이동할 페이지 주소 */
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| HTML5 - New Structural Tags : <article> (0) | 2018.04.28 |
|---|---|
| HTML5 - New Structural Tags : <section> (0) | 2018.04.26 |
| HTML vs HTML5 (0) | 2018.04.25 |
| [HTML] 메타태그 - viewport (뷰포트) (0) | 2018.04.13 |
| HTML5 브라우저 호환 테스트 (0) | 2018.04.10 |
[HTML] 메타태그 - viewport (뷰포트)
[HTML] 메타태그 - viewport (뷰포트)
- 사전적 의미 :
viewport 미국식 [|vju:pɔ:rt] 영국식 [|vju:pɔ:t]
1. (컴퓨터의) 보임창
2. (우주선의) 창문
○ 사용이유 : 디바이스(PC, Tablet, Smart Phones)의 해상도에 따라서 적절하게 대응하는 반응형 웹(Responsive Web)을 만들기 위하여 사용
○ 사용방법 :
<head> ...... </head> 태그 안에 삽입
<meta name="viewport" content="속성=값, ......">
○ viewport content properities; (속성)과 value(값)
- width (뷰포트 너비) ; device-width (값)
- height (뷰포트 높이) ; device-height (값)
- user-scalable (확대 or 축소 가능여부) ; yes or no(값)
- initial-scale (초기 축소/확대 값) ; 1 ~ 10 (값)
- minimum-scale (최소 확대/축소 값) ; 1 ~ 10 (값)
- maximum-scale (최대 확대/축소 값) ; 1 ~ 10 (값)
ex)
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
Contents
</body>
</html>
- 기본형
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
user-scalable 값을 지정하지 않으면 축소/확대가 가능
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
user-scalable 값을 no로 지정하면 축소/확대가 불가능
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimun-scale=.5, maximum-scale=2" />
축소/확대가 가능하고 축소는 0.5 (2분의1)까지 확대는 2배까지 가능.
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| HTML5 - New Structural Tags : <article> (0) | 2018.04.28 |
|---|---|
| HTML5 - New Structural Tags : <section> (0) | 2018.04.26 |
| HTML - META tag (0) | 2018.04.26 |
| HTML vs HTML5 (0) | 2018.04.25 |
| HTML5 브라우저 호환 테스트 (0) | 2018.04.10 |
