1) 개념
meta 태그는 해당 웹 페이지의 중요한 정보를 담을 수 있는 태그입니다.따라서 인코딩 등의 설정을 해당 태그를 통해 할 수 있습니다.
2) 속성
2-1) http-equiv
http-euqiv는 문서의 초기 정보를 나타내며 속성값을 통하여 해당 페이지의 설정을 변경할 수 있습니다.해당 속성이 선언되었다면 content가 같이 선언되어야 합니다. 기능은 문서에서 사용할 문서의 종류나 페이지 이동(새로고침) 등에 사용이 가능하며 속성 값은 아래와 같습니다.
- content-type : 해당 페이지의 인코딩 방식 명시
- content-security-policy : 해당 페이지의 콘텐츠 정책 지정
- default-style : 사용할 스타일 시트를 지정
- refresh : 문서가 자동으로 새로 고쳐지는 시간 간격 지정(초단위 지정)
<!-- 설정 -->
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" >
<!-- 페이지 정책 -->
<!-- CSS 공격을 막기위한 정책 -->
<meta http-equiv-"content-security-policy"
content="default-src 'self'; script-src 'self'; style-src 'self';">
<!-- 적용할 스타일 -->
<meta http-equiv="default-type" content="my stylesheet">
<!-- 2초 뒤에 새로고침 -->
<meta http-equiv="refresh" content="2">
<!-- 2초 뒤에 다른 페이지로 이동 -->
<!-- 기능이 없는 가이드 페이지 작성시 로딩 페이지 처리에 유용함 -->
<meta http-equiv="refresh" content="2; 다른 페이지">2-2) content
content는 http-equiv 또는 name 속성의 값을 지정해줍니다.(해당 속성은 나머지 속성에 대한 보조 역할 이므로 예제는 다른 속성의 표기로 대체하겠습니다.)
2-3) name
name은 해당 문서에대한 부가적인 정보를 제공하며 브라우저나 검색 엔진 등에서 활용합니다.
- viewport : 해당 페이지의 모바일 장치에서 페이지의 레이아웃을 지정
- description : 검색 결과에 대한 페이지의 간단한 설명을 제공
- keyword : 해당 페이지 검색 엔진의 키워드를 지정
- author : 페이지 작성자 표기
<!-- viewport -->
<meta name="viewport"
content="width=기기의 크기, initial-scale=1.0">
<!-- description -->
<meta name="description" content="해당 페이지에 대한 설명">
<!-- keyword -->
<meta name="keyword" content="키워드1, 키워드2, 키워드3">
<!-- author -->
<meta name="author" content="작성자 이름">
개발 학습