meta 태그 정의

해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에 사용된다.

html 5에서는 요소를 통해 웹 페이지가 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name속성에 viewport 속성값을 제공하고 있다.

사용할 수 있는 속성

속성명	속성값	설명
charset	문자셋	해당 문서의 문자 인코딩 방식을 명시함.
content	텍스트	name 속성이나 http-equiv 속성과 관련된 값(value)를 명시
http-equiv	content-type	content 속성에 명시된 값에 대한 HTTP 헤더를 제공
	default-style	"
	refresh	"
name	application-name	메타데이터를 위한 이름을 명시
	author	"
	description	"
	generator	"
	keywords	"
	viewport	"
scheme	포맷 또는 URL	content 속성의 속성값을 해석하는데 사용할 스키마(scheme)를 명시
		HTML5에서는 더 이상 지원하지 않음

반응형 웹이란?

반응형 웹(responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태플릿 PC 등 접속하는 디스플레이의 종류에 따라 화면 크기가 자동으로 변하도록 만든 웹 페이지

viewport란?

모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 된다. 뷰포트는 웹 페이지가 사용자에게 보여지는 영역을 말한다.

ex) 데스크탑에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다 보여지지 않고 스크롤 해서 봐야 하는경우 브라우저에서 보여지는 부분이 뷰포트

<meta name="viewport" content="width=device-width, initial-scale=1.0">

주요 속성

• width=device-width: 페이지의 너비를 기기의 스크린 너비로 설정, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어준다.
• initial-scale=1.0: 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다.0~10사이의 값을 가진다.

기타 속성

• minimum-scale: 줄일 수 있는 최소 크기를 지정, 0~10사이의 값
• maximum-scale: 늘릴수 잇는 최대 크기를 지정, 0~10사이의 값
• user-scalable: yes/no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정