HTML meta tag

HTML head에 위치한
meta 태그에 대해 알아보자

meta라는 것은 어떤 것의 부가적인 의미를 갖는다
HTML문서에 대한 정보인 메타데이터를 정의할 때 사용한다

<!-- 검색 엔진을 위한 키워드(keyword)를 정의하는 예제 -->
<meta name="keyword" content="HTML, meta, tag, element, reference">

<!-- 웹 페이지에 대한 설명(description)을 정의하는 예제 -->
<meta name="description" content="HTML meta tag page">

<!-- 문서의 저자(author)를 정의하는 예제 -->
<meta name="author" content="TCPSchool">

<!-- 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제 -->
<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com">

<!-- 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Webview zoom in/out을 위한 viewport meta tag 변경 -->
<meta name="viewport" content="width=device-width, user-scalable=no"> 

사실 이 메타태그에 대한 포스팅을 쓰게 된 이유는 줌인, 줌아웃을 막는 것을 할 수 있다는 것을 알게 되었기 때문이다

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

1. width

• 뷰포트의 크기를 조정
• device-width와 같이 표시하거나(==100vw)
• 1~10,000 사이의 값을 줄 수 있다

2. initial-scale

• 페이지가 처음 로드 될 때 줌 레벨을 조정
• 0.1 ~ 10의 값을 줄 수 있고 기본값은 1이다

3. maximum-scale & minimum-scale

• 사용자가 얼마나 페이지를 확대 또는 축소 할 수 있는지를 정한 값
• 범위 : 0.1~10, 기본값 : 1

4. user-scalable

• 페이지를 줌-인, 줌아웃 할 수 있는지를 설정
• 0, 1, yes, no로 설정할 수 있다(0 == no, 1 == yes, 기본값 : 1)

참고

• http://www.tcpschool.com/html-tags/meta
• https://yenne.tistory.com/4
• https://wonderbout.tistory.com/114
• https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag