"> [14. 메타 태그(Meta)]
본문 바로가기

HTML/기초

[14. 메타 태그(Meta)]

메타 태그(Meta Tag)

meta태그는 웹 문서에 대한 메타데이터를 웹 브라우저나 검색엔진에게 전달하는 태그입니다.

웹 문서의 메타데이터에는 문자 인코딩, 검색 키워드, 저자, 페이지 초기 설정 등이 있습니다.

모든 메타데이터는 하나의 meta 태그 안에 속성들로 이루어져 있습니다.

 

meta태그에 어떤 속성들이 있는지 알아보겠습니다.

 

속성 & 속성 값 설명
charset 문서의 인코딩 방식
name, content 문서의 메타데이터를 설정(같이 사용됩니다.)
http-equiv, content 전처리 구문 지시자(content 속성과 같이사용)
페이지를 새로고침 하는 리로드 시간을 줄 때 주로 사용된다.

 

주로 사용되는 속성들을 정리해봤습니다.

한 가지 주의할 점은 meta 태그를 사용할 시, content 속성을 제외한 다른 속성들은 같이 사용되선 안됩니다.

<meta name="title" content="meta태그">                 (사용 가능 O)
<meta charset="utf-8" name="title" content="meta">  (사용 불가능 X)

 

 

 

 

 

 

Meta Chraset 사용

meta 태그 속성 중 하나인 웹 페이지(문서)의 인코딩 방식을 결정하는 태그이다.

해당 속성을 사용해서 웹 페이지를 브라우저 화면상에 출력할 때, 글자가 깨지거나 브라우저와 페이지가 

서로 맞지 않는 인코딩 방식을 사용해 알 수 없는 언어로 출력되는 현상들을 올바르게 수정할 수 있다.

 

웹 페이지와 웹 브라우저의 인코딩 방식이 동일하지 않으면 생겨나는 글자 깨짐 현상

 

 

현재 에디터에서 작성 중인 웹 페이지(문서)에 대한 인코딩 방식은 "UTF-8"인 것을 확인.

 

 

웹 브라우저에게 해당 문서는 "utf-8" 유형으로 인코딩 되었다고 인지시켜줍니다.

 

 

웹 브라우저와 문서 간의 인코딩 방식이 동일하여 올바르게 글자가 표기됩니다.

 

 

서로 인코딩 방식이 다르다면?

인코딩 방식이 다르면 어떻게 표시되는지 확인하기 위해, 웹 브라우저에게 "euc-kr" 유형으로 인코딩 되게 전달합니다.

 

 

인코딩 방식이 서로 다르므로, 글자 깨짐 현상이 나타나는 것을 확인할 수 있습니다.

'HTML > 기초' 카테고리의 다른 글

[16. 웹 사이트 제작]  (0) 2020.01.08
[15. 링크 태그(A)]  (0) 2020.01.08
[13. 웹 페이지 제목 태그(TITLE)]  (0) 2020.01.07
[12. HTML 언어 구조]  (0) 2020.01.07
[11. 목록 태그(li,ul,ol)]  (0) 2020.01.06