Knowledge Map
메타(Meta) 태그 본문
출처 : 홈짱닷컴 http://www.homejjang.com/05/meta.php
<meta> 태그는 HTML 문서가 어떤 내용을 담고 있고, 문서 키워드가 무엇이며 누가 만들었는지등의 문서 자체의 특성을 담고 있다.
<meta> 는 문서의 해더 부분에 위치해야 하며 가장 일반적인 속성은 name, content속성이다.
<meta name="subject" content="메타태그(Meta tag) "> |
name 속성값으로는 subject, title, author, keywords 등이 있으며 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 보면 된다.
물론이런다고 이페이지가 검색 상단에 나오는 것은 아니다. 이걸 활용하는 홈페이지가 너무 많기 대문.
웹 브라우저에게 정보를 전달하는 대표적인 경우는 아래와 같이 2가지를 생각할 수 있다.
| <meta http-equiv="refresh" content="5;url=http://www.homejjang.com/"> |
홈페이지의 주소가 바뀌었을 경우에 사용하는 태그로 5초뒤에 url 속성값으로 지정한 페이지로 이동한다는 의미다.
이렇게 이동하는 것은 하이퍼링크를 눌러서 이동하는거와는 다른 의미를 갖는다.
하이퍼링크를 누른다는것은 한 페이지를 읽고 있다가 다른 페이지로 이동한다는 의미이지만, <meta> 태그를 이용한 페이지 이동은 http-equiv 속성값을 지정된거와 같이 refresh 한다는 의미입니다.
즉 위와 같은 <meta>태그가 입력된 페이지는 읽지 않은걸로 인식하겠다는 의미이다.
그리고 한글로 작성된 홈페이지라는것을 웹 브라우저에게 알리기 위해서는 아래와 같이 <meta>태그를 지정해 준다.
| <meta http-equiv="content-type" content="text/html; charset=euc-kr"> |
이렇듯 웹 브라우저에게 정보를 전달하기 위한 <meta>태그는 http-equiv 라는 속성을 사용한다.
출처 : http://aboooks.tistory.com/352
meta viewport 사용법
<meta name="viewport" content="width=device-width>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
뷰포트 태그는 viewport 크기조절을 위해 만들어졌다.
meta viewport 태그는 w3c 명세에는 없지만 ios 장치가 널리 사용됨에 따라 사실상 표준처럼 사용되고 있고 다른 브라우저들도 채택함
그런데 IE10은 뷰포트 크기 조절을 위해서 @viewport rule을 사용한다. 그래서 아이폰과 IE10 브라우저 양쪽을 타겟으로 웹페이지를 설계하려면 두가지 방식으로 viewport 크기 조절하는 것이 필요하다.
ex)
<meta name='viewport' content='width=divice-width'/>
<style type='text/css'>
@-ms-viewport{ width : device-width; }
@-o-viewport{ width: device-width; }
@viewport{width: device-width;}
</style>
</head>
viewport란?
viewport는 iOS에서 페이지를 표시할 때 사용하며 화면상의 화상 표시 영역을 뜻한다. PC와 모바일 뷰포트는 약간 다르다.
PC viewport는 웹브라우저창의 뷰포트와 동일하다. 유저가 창크기를 조절하면서 뷰포트 조절 가능. 웹페이지가 뷰 포트보다 작으면 스크롤가능
모바일 viewport는 웹브라우저보다 크거나 작을수 있으며 창, 스크롤바,크기조절 버튼이 없다. 다만 상하좌우, 더블탭, 확대축소를 통해 뷰포트 배율 변경 가능
따라서 모바일 장치에 최적화된 웹페이지 만들려면 viewport 설정을 포함되어야 한다.
meta viewport 태그 사용법
1. viewport 너비 설정
<meta name="viewport" content="width=500">
너비는 px 단위이며 메타 태그에서는 단위를 생략하고 content 속성값이 여러개일 경우 , 쉼표로 분리한다.
2.너비를 장치너비로 설정(추천)
<meta name="viewport" content="width=device-width>
브라우저 너비를 장치 너비로 맞추어 표시함
3. 너비를 장치 높이로 설정
<meta name="viewport" content="height=device-width>
4. 초기화면배율(intial-scale) 설정 (zoom레벨 설정)
<meta name="viewport" content="width=device-width, initial-scale=1.0>
1.0 == 100%
5. 최소 최대 화면 배율 설정(mininum and maximum scale)
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0>
최초 설정은 사용자가 너무 극단적으로 화면 축소하는 것을 방지.
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0" />
최대화면 배율 설정은 극단적으로 화면 확대하는 것을 방지함.
6. 사용자가 크기 조절하기를 원치 않을 때
<meta name="viewport" content="user-scalable=no, width\device-width">
'WEB' 카테고리의 다른 글
| AngularJS에서 carousel 적용하기 (0) | 2016.02.24 |
|---|---|
| 20160223 (0) | 2016.02.23 |
| REST API 디자인 가이드 (0) | 2016.02.22 |
| webstorm 에서 Enter Key가 안 먹힐때! (0) | 2016.02.19 |
| 웹스톰 단축키 (1) | 2016.02.18 |
