[HTML] meta 태그에 관하여, "ie=edge", "view-port" 등등

Kyung_j99·2022년 10월 25일
0

HTML

목록 보기
1/2
post-thumbnail

html 문서 단축키를 쓰면 항상 자동적으로 완성되는 메타 태그..
<head> 태그에 포함되면서 반응형 관련 viewport, SEO를 위한 키워드 담기 등등..
html 문서에 대한 정보를 나타내주는 태그로 익히 알고 있지만 제대로 알기 위해 정리해 본다.

<meta>

해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.
빈 요소이지만 XHTML 문서 같은 경우 꼭 닫아줘야 한다.

html 문서일 때
<meta>
xhtml 문서일 때
<meta />

<meta> 속성

name

전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공한다.
name 속성이 명시되었으면 content 속성 값 또한 필수이다.
name 속성으로 쓸 수 있는 표준 메타데이터들은 매우 다양하다.

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

디바이스의 해상도에 따라서 적절하게 대응하는 반응형 웹을 만들기 위해 viewport를 설정한다. (모든 기기에서 올바른 크기로 조정할 수 있음)
content="width=device-width" ➡️ 브라우저 너비를 장치의 너비로 설정
content="initial-scale=1.0" ➡️ 초기 확대/축소 값
content="minimum-scale=1.0, maximum-scale=1.0" ➡️ 최소와 최대 확대/축소 값

<meta name="description" content="meta 태그 정리">

description은 페이지 문서에 대한 설명이나 요약 자료로 쓰일 확률이 매우 높다.
ex) 즐겨찾기 페이지의 기본 설명 값

표준 메타데이터 관련 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

http-equiv

웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.
http-equiv 속성이 명시되었으면 content 속성 값 또한 필수이다.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

IE 브라우저에서 가장 최신 버전을 선택하는 문서 모드이다.
문서 유형 선언<!doctype html>과 함께 사용해야 유효하며, 가장 최신 웹표준을 지원하는 html5를 추천한다.
IE8 이하 버전부터는 지원 안 되는 기능들이 많기 때문에 명시해 주는 것이 좋을 것 같다.

<meta http-equiv="refresh" content="30">

refresh는 content="값" 간격으로 웹 페이지가 자동적으로 새로고침이 된다.

http-equiv 관련 사이트
http://www.tcpschool.com/html-tag-attrs/meta-http-equiv

charset

<meta charset="utf-8">

char은 'Character(문자)'를 의미하며, character + set = charset "문자 집합"이라는 의미를 내포하고 있다.
다국어를 설정할 수 있는 속성이며 인코딩 설정이 잘못되면 글자가 깨져 보인다.

인코딩 관련 사이트
https://theqoop.tistory.com/266

.
.
.
.
이렇듯 메타 태그를 잘 활용하면 더욱 가치있는 웹 페이지를 만들 수 있다! 🤓

참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
http://www.tcpschool.com/html-tags/meta
https://youtu.be/zO5zHxX2lNI
https://web.dev/i18n/ko/viewport/
https://webclub.tistory.com/354
https://aboooks.tistory.com/357

profile
코드로 그림 그리는 사람 🎨

0개의 댓글