HEAD(문서 머리) 영역 #2 - META 요소

head 요소에 포함되는 meta 요소에 대하여 설명합니다. 하나씩 설명을 적어넣으며 웹 문서의 완성될 모습을 그리곤 하는 곳이지요.

메타데이터(METADATA)

메타데이터는 "데이터에 관한 데이터"를 의미한다. 문서에 관한 정보로 구성되는데 어떤 정보로 구성되어야 하는가에 대한 규칙은 정해진 바 없다. 일반적으로 제공자(author), 저작권(copyright), 키워드(keyword), 언어(language)등 문서의 성격을 파악하는데 도움을 줄 수 있는 정보가 포함된다. 이러한 정보는 사람보다는 기계(브라우저, 검색엔진)를 위한 것이다.

charset(문자세트) 속성

charset 속성은 문자 세트를 지정한다. 문자 세트는 사용언어를 표현하는 데 필요한 모든 문자를 모아둔 것으로, 여기에는 기호, 공백 등도 포함된다. 문자 인코딩은 문자 세트를 컴퓨터에서 사용하기 적합한 형식으로 변환하는 것이다. 즉, 문자 세트를 기계가 이해할 수 있는 형식으로 만드는 규칙이다. 이 규칙에 따라 하나의 문자 세트는 여러 개의 인코딩을 가질 수 있으며, 브라우저가 인코딩을 정확하게 알아야만 HTML문서를 제대로 해석하여 문자로 표현할 수 있다.

모든 HTML 문서는 반드시 인코딩 방식을 선언해야 하며, 이 선언은 문서당 한 번만 이루어져야 한다. 물론 인코딩 방식을 선언하지 않더라도 브라우저가 알아서 HTML 문서를 제대로 렌더링할 수도 있으나, 모든 브라우저가 그런것은 아니다.

<meta charset="utf-8" />

우리나라의 경우 웹페이지에 사용되는 문자셋은 크게 euc-kr 과 utf-8 정도가 있다.

EUC-KR

• 2350개의 한글문자, 한국에서 통용되는 한자 그리고 영문을 표현할 수 있다.
• 문서를 작성할때 한정된 범위내의 문자만을 사용할 경우 사용한다.
• 한글 한 자를 2바이트로 처리한다.

UTF-8 (유니코드)

• 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩이다. 한글이라고는 구경해 본 적도 없는 세계 방방 곳곳의 어느 컴퓨터에서도 우리가 작성한 한글을 문제 없이 표현할 수 있게 된다.
• 한글 한 자를 3바이트로 처리하기 때문에 문서가 다소 커질수가 있으나 공백이나 영문 한 자는 1바이트로 처리하는 유연함을 보여 준다.
• 문자셋을 UTF-8로 작성한다면 HTML 파일을 저장할 때 파일 타입도 UTF-8로 저장해야 한다.

브라우저가 문서의 문자 인코딩을 결정하는 우선순위

1. Content-Type 필드의 HTTP charset 파라미터
2. META 요소의 http-equiv에 의한 Content-Type과 charset 속성
3. 특정 요소의 charset 속성

charset은 <title> 이전에 선언해야 합니다.

http-equiv 속성

클라이언트와 서버간의 통신에서 주고받는 데이터 단위를 HTTP 메시지라고 부르는데, 이 HTTP 메시지는 HTTP 헤더, 바디, 트레일러로 구성된다. 이때 요청횟수와 전송량을 줄이기 위해 클라이언트와 서버는 HTTP 메시지의 바디(body)를 처리 전에 HTTP 헤더를 먼저 처리하므로 저작자가 적절한 HTTP 헤더를 제공하면 클라이언트와 서버 사이의 작업 효율성을 증가시킬 수 있다. http-equiv 속성은 이 HTTP 헤더와 같은 값을 지정하는 것이다.

아래는 http-equiv 속성값에 대한 설명이다.

http-equiv="content-type"

콘텐츠 타입을 지정하는데 이것은 문자 인코딩 방식을 지정하는 것이며 charset 속성의 대체 형식이다. 문자 인코딩 방식에 대한 선언은 한 번만 이루어져야 하므로 charset 속성이든 http-equiv 속성이든 하나만 사용해야 한다.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

http-equive="default-style"

기본 스타일 시트를 지정한다. LINK 요소에 의해 여러 종류의 스타일 시트가 정의되어 있는 경우 기본 스타일 시트를 지정하는 것이다. LINK 요소의 title 속성값을 content 속성으로 지정하며 해당 LINK 요소의 스타일 시트가 기본 스타일 시트가 된다.

<meta http-equiv="default-style" content="phone">
<link rel="stylesheet" href="phone.css" title="phone">
<link rel="stylesheet" href="desktop.css" title="desktop">

http-equive="refresh"

문서의 새로고침을 지정한다. 속성값은 숫자 값으로 지정되며, 이 값은 초 단위의 시간 주기를 의미한다. 이때 URL을 지정하면 새로 고침과 동시에 해당 URL에 있는 문서로 자동 이동한다. 만약 URL을 지정하지 않으면 현재 문서가 다시 로딩된다.

<meta http-equiv="refresh" content="60; url=example.html">
<meta http-equiv="refresh" content="60">

http-equive="X-UA-Compatible"

IE8이 개발되면서 생긴 호환성모드에 대응하긴 위한 속성이다. IE=edge는 항상 최신의 표준엔진을 사용해 렌더링하게 한다.

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

name 속성

name 속성은 메타데이터 이름을 지정한다. 이 속성으로 메타데이터 이름을 지정했다면 content 속성으로 메타데이터의 용도와 성격을 지정한다. 즉 name과 content 속성이 한 쌍으로 작성되는데 name 속성에는 이름, content 속성값을 작성한다. 중요도가 높거나 자주 사용하는 메타데이터는 아래와 같이 name 속성값이 정해져 있다.

아래는 name 속성값에 대한 설명이다.

name="application-name"

웹 애플리케이션 이름을 지정한다. 웹 애플리케이션이 아닌 때에는 이 속성값을 사용할 수 없으며 문서 내에서 한 번만 지정할 수 있다.

<meta name="application-name" content="Gmail">

name="author"

저작자 이름(author)을 지정한다. 일반적으로 제공자나 개발자 이름을 기입한다.

<meta name="author" content="Douglas Ham">

name="description"

문서 설명을 지정한다. 검색엔진은 이 문서 설명을 검색 결과로 보여준다. 문서 내에서 한 번만 지정할 수 있다.

<meta name="description" content="현재 페이지의 요약글, 설명">

name="generator"

문서 작성에 사용한 저작 도구를 지정한다. 저작자가 저작 도구를 사용하지 않고 직접 작성한 때에는 이 속성값을 사용하지 않는다.

<meta name="generator" content="Dreamweaver CS5.5">

name="keyword"

키워드를 지정한다. 이 키워드는 문서 내용과 관련 있는 단어로 작성되며 콤마를 이용하여 복수의 키워드를 제공할 수 있다.

<meta name="keyword" content="html, css, javascript, php">

웹 문서의 META 요소를 이용하여 키워드(keyword)나 설명(description)을 제공할 수 있다. 이 키워드와 설명은 웹 문서에 나타나는 것이 아니라 검색엔진과 같은 사용자도구가 문서 내용을 예측할 수 있도록 돕는다. 물론 스팸 키워드처럼 관련 없는 키워드와 설명이 임의로 포함될 수 있기 때문에 구글과 같은 검색엔진 서비스는 메타데이터의 키워드와 설명을 제한적으로만 참고하거나 아예 참고하지 않는다.

name="viewport"

모바일, 탭과 같은 다양한 기기들의 화면의 크기를 제어한다.

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

width=device-width는 화면사이즈(320px)가 맞춰진다. 웹 문서가 유동적인 데스크탑 디자인이라면 모바일기기에서 이 속성과 속성값을 사용하는 것이 더 보기 좋다. 또한 고정된 데스크탑 디자인이라도 문제될 것이 없으며, 모바일용 디자인이라면 더할 것이 없다.

intial-scale=1는 모바일 브라우저에서는 zoom을 많이 사용하게 되는데, 최적의 사용환경을 위해 이를 방지해야 할 경우 속성 값을 1로 고정한다.

content 속성값은 아래와 같다.

• user-scalable=no : 사용자의 확대보기 허용 여부(yes/no)
• intial-scale=1.0 : 페이지 로딩시 확대비율
• maximum-scale=1.0 : 최대확대비율
• minimum-scale=1.0 : 최소축소비율
• width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐.
• target-densitydpi=medium-dpi : dpi([dots per inch])

content 속성

content 속성은 메타 정보의 내용을 지정한다. 이 속성은 단독으로 사용될 수 없으며 name, http-equiv 속성과 함께 사용해야 한다. 저작자 정의에 의해 새로운 메타데이터가 생길 수 있다. 그리고 자주 사용하는 메타데이터라 할지라도 저작자 의도에 따라 다른 용도로 사용될 수 있으므로 name 속성을 사용하여 메타데이터 이름을 지정했다면 content 속성을 사용하여 메타데이터가 어떤 용도이며, 어떤 성격인지 알 수 있도록 메타 정보를 제공해야 한다.