개발 공부 기록하기

[생활코딩] 18강. <meta> 본문

프밍/HTML

[생활코딩] 18강. <meta>

태영(泰伶) 2022. 10. 11. 23:50
  • 문서에 대한 정보를 기술하는 tag.
  • <head> 아래쪽에 등장하는 tag.

<meta name="데이터의 이름" content="meta data의 값"/>

 

<meta> tag는 어떤 content를 담는 게 아니라,

속성을 통해서 정보를 표현하는 형식의 tag.

 

 

 

예제 1.

name="description"

문서에 대한 좀 더 명시적인 설명.

주로 검색 엔진 같은 데에서, 어떤 데이터를 검색할 때, description에 사용된 내용을 중요하게 다룬다.

 

name="keyword"

일종의 해시태그 느낌. 이 웹 페이지에서 주요하게 사용되는 단어들.

주로 검색 엔진 같은 데에서, 어떤 데이터를 검색할 때, keyword에 사용된 내용을 중요하게 다룬다.

 

http-equiv

HTTP 헤더에 정보 또는 값을 제공하는 content 속성.

이게 쓰였으면 반드시 content 속성도 같이 쓰여서 그 값이 명시되어야 한다.

(강의에는 이 내용이 명확히 설명되지 않은 것 같아 추가로 찾아봤다.)

 

text/html

이 문서가 html 문서임을 다시 한 번 명시해주는 느낌.

 

charset

character set의 약자. 문자의 코드.

여러 이유들(역사적 이유 포함)로 인해

각 문자는 그 문자를 내부적으로 표현하는 방식이 제각각이다.

문자 코드를 제대로 기술해주지 못하면, 문자가 깨지거나 알아볼 수 없게 될 수 있다.

 

 

if, 한글로 만든 문서를 웹 브라우저로 열었는데 글자가 깨진다?

→ 제일 먼저 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 부분을 의심해 보자.

 

utf-8

Unicode Transformation Format - 8bit.

가장 많이 사용되는 가변 길이 유니코드 인코딩.

* 가변 길이(variable length): 특정 기억 장소나 자료 요소 내에 수용될 수 있는 문자의 수.

* 유니코드: 전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식. 전 세계의 모든 문자를 담는 ISO/IEC 10646 코드표를 사용하고 있어, 각 언어와 문자 체계에 따른 충돌 문제를 해결했다.

* 인코딩(encoding): 원래의 데이터 양을 줄이기 위하여 데이터를 코드화하고 압축하는 것.

 

 

 

 

 

예제 2.

http-equiv="refresh"

새로고침.

 

content="2; url=https://opentutorials.org/"

2초 후에 url에 적힌 주소로 이동해라.

 

  → 간혹 본 적이 있을 것이다.

 이 페이지는 ~~로 이동하였습니다. 5초 후에 ~~~~로 이동합니다. 하고 자동 새로고침 되는 경우.

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

[생활코딩] 20강. 서버(Server)와 클라이언트(Client)  (0) 2022.10.14
[생활코딩] 19강. <title>  (0) 2022.10.11
[생활코딩] 17강. <head>  (0) 2022.10.11
[생활코딩] 16강. 표 <table>, <tr>, <td>, <th>  (0) 2022.10.11
[생활코딩] 15강. 이스케이핑(escaping)  (0) 2022.10.09
'프밍/HTML' Related Articles more
Comments