티스토리 스킨 만들기 3 - 문서 형식(DOCTYPE) 선언, 문서 언어 및 문자 설정, html, head 요소 작성하기

2011. 5. 28. 19:21ㆍIT/Tistory Tips

이전 글 보기


여기를 클릭하면 완성된 문서 형식 예제로 바로 이동합니다.

1. 문서 형식 선언 (DOCTYPE)

블로그 레이아웃(배치)을 완성했으니 이제 각 영역에 필요한 정보를 입력하면 될까? 아니다. 그전에 레이아웃 외에 웹 페이지 전체를 구성하는 기본 요소를 추가해야 한다. 대표적인 것이 문서 형식을 선언하는 doctype이다. 지금 티스토리 [HTML/CSS 편집]에서 skin.html을 확인해보자. 맨 위에 doctype이라는 문구를 확인할 수 있을 것이다. (물론, 없을 수도 있다.) doctype은 태그가 아닌 현재 페이지가 어떤 버전의 마크업 언어로 작성되었는지를 웹 브라우저에 알려주는 부분이다. doctype이 없는 웹 문서는 웹 브라우저가 문서를 렌더링(표현, 묘사)할 기준이 없으므로 자체적으로 판단한 기준에 따라 문서를 표시한다. 흔히 Quirks mode라고 하는 방식이다. 예전에 IE가 버전이 올라가면서 조금, 아주 약간 표준에 맞게 수정되었는데 그러자 이전에 작성한 페이지가 제대로 표시되지 않는 현상이 발생했고 그런 이유로 doctype이 없는 문서는 Quirks mode로 doctype이 선언된 문서는 그에 맞는 표준 방식으로 렌더링하도록 했다. 만약 지금 Quirks mode를 사용하도록 작성한다면, 현재 사용자가 알고 있는 스타일 개념을 완벽히 다시 정립해야 할 수도 있다. 게다가 브라우저별로 차이가 있어서 모든 브라우저에 같은 화면을 표시하려면 CSS hack이 난무할 것이다. 명확한 기준이 없으니 작성자가 의도한 것과 사용자가 바라보는 화면이 전혀 다를 수 있다는 이야기다. 이런 이유로 문서 형식 선언은 티스토리 스킨에서 역시 가장 먼저 해결되어야 할 문제다.

지금 주로 사용하는 문서 형식 선언은 크게 세 가지다. 첫째는 HTML 4.01, 둘째는 XHTML 1.0, 마지막은 HTML 5다. HTML 4.01과 XHTML 1.0은 거의 같은 언어다. XHTML은 SGML 기반의 HTML 4.01을 XML로 재구성한 것으로 좀 더 명확한 문법을 사용하지만, 반대로 더 정확하게 의도한 바를 표현할 수 있다. HTML 5를 제외한 나머지는 DTD(Document Type Definition)를 참조하는데, DTD는 웹 브라우저가 웹 문서를 제대로 표현할 수 있게 문서 형식 선언에 맞는 규칙을 지정하는 역할을 한다. 그냥 기본 개념만 알아두면 된다. 적용은 아주 간단하다. HTML 버전별 올바른 문서 형식 선언은 다음과 같다.

<HTML 4.01 문서 형식 선언>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

이름처럼 좀 더 엄격한 문법이 적용되는 선언이다. center, font, s, strike, u 등의 화면 표시와 관련된 요소 일부를 사용할 수 없고 frame, iframe, frameset 등 프레임 요소를 사용할 수 없다.

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

주로 사용하는 선언으로 Strict에서 사용할 수 없는 화면 표시 관련 요소를 모두 사용할 수 있지만, frame, iframe, frameset 등 프레임 요소는 여전히 사용할 수 없다.

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 요소를 모두 사용할 수 있는 선언으로 가장 제약이 적다.


<XHTML 1.0 문서 형식 선언>
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

엄격한 문법이 적용되는 선언이다. center, font, s, strike, u 등의 화면 표시와 관련된 요소 일부를 사용할 수 없고 frame, iframe, frameset 등 프레임 요소를 사용할 수 없다.

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

주로 사용하는 선언으로 Strict에서 사용할 수 없는 화면 표시 관련 요소를 모두 사용할 수 있지만, frame, iframe, frameset 등 프레임 요소는 여전히 사용할 수 없다.

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 요소를 모두 사용할 수 있는 선언으로 가장 제약이 적다.


<HTML 5 문서 형식 선언>
HTML 5
<!DOCTYPE HTML>

HTML 5는 문서 형식 선언이 하나다. 또 이전보다 굉장히 간단해졌다. HTML 5는 SGML 기반이 아니므로 DTD를 참조할 필요가 없고, 브라우저가 알아서 제대로 표시한다. 또한, 대소문자 구별 없이 사용할 수 있다.

현재 가장 많이 사용하는 문서 형식 선언은 위의 세 가지다. 세 가지 중 어떤 것을 사용해도 되지만, 각 선언에 맞는 문법으로 페이지를 구성해야 한다. XHTML은 태그에 소문자를 사용해야 하고 태그를 반드시 닫아야 하는 등 HTML과 약간의 차이가 있다. 자세한 내용은 위키백과에서 확인할 수 있다. HTML 5는 XHTML 문법을 기본으로 추가된 요소를 사용하고 제한된 요소나 속성을 사용하지 않으면 된다. 또 문법에 맞게 작성된 XHTML 문서의 문서 형식 선언만 HTML 5로 바꾸고 몇 가지 요소만 수정하면 HTML 5 문법에 맞는 문서가 된다. 자신이 사용할 문서 형식 선언을 skin.html 맨 위에 붙여 넣으면 문서 형식 선언은 끝이다. 개인적으론 XHTML 1.0이나 HTML 5 중 하나를 사용할 것을 추천하며, 아래의 내용은 이 두 가지 문서 형식에 대해서만 이야기할 것이다.

2. <html> 요소와 문서 언어 선언

문서 형식 선언을 마친 다음 할 일은 기본 요소(root element)인 html 요소를 추가하는 일이다. HTML 문서를 작성할 때 가장 기본이 되는 요소가 바로 html이다. 문서 형식 선언 바로 아래 <html>과 </html>을 추가하고 그 사이에 웹 페이지를 구성할 요소를 배치한다. 구조는 다음과 같다.

<문서 형식 선언과 html 요소 추가> 
<!DOCTYPE HTML>
<html>
  페이지 전체 내용 구성
</html>

그런데 문서 형식 선언 외에도 문서 정의에 포함되어야 하는 것이 있다. 바로 문서 언어 선언이다. 문서 언어 선언은 html 요소에 속성으로 추가할 수 있다.

<문서 형식 선언과 html 요소 예제>
XHTML 1.0 - Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
  페이지 내용
</html>
HTML 5
<!DOCTYPE html>
<html lang="ko">
  페이지 내용
</html>

XHTML에서 xmlns="http://www.w3.org/1999/xhtml"는 문서가 XHTML 네임스페이스를 포함한다는 것이다. HTML 5는 기본값으로 지정되어 있으므로 사용하지 않는다. lang="ko"와 xml:lang="ko"는 문서 언어 선언을 위한 부분이다. 이 문서의 주 언어가 한국어라는 것을 의미한다. HTML 5에서는 간단히 lang="ko"만 사용한다.

3. 메타정보(metadata) 구성

메타정보는 문서가 담고 있는 내용에 대한 정보다. 사용자를 위한 부분은 아니지만, 웹 브라우저나 검색 엔진 등에 내 블로그에 대한 정보를 제공한다. 메타정보는 <head> 요소에 삽입하는데, <meta> 요소를 사용한다. 기본적으로 필요한 메타정보는 콘텐츠 유형(content-type)과 문자 설정(charset)이다.

<문서 형식 선언과 html, 메타정보 구성 예제>
XHTML 1.0 - Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
</head>
</html>
HTML 5
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
</head>
</html>

meta 요소에서 http-equiv는 콘텐츠 유형을 지정하기 위한 것이다. content="text/html; charset=UTF-8"이라고 입력함으로써 이 문서가 일반 텍스트로 구성된 HTML 문서이며 UTF-8 문자 인코딩을 사용한다는 것을 웹 브라우저에 알려준다. charset은 여러 가지가 있지만, UTF-8은 대부분 문자를 지원하므로 위와 같이 지정하는 것이 좋다. HTML 5에서는 이 역시 아주 간결해졌는데, <meta charset="UTF-8" />만 입력하면 끝이다.

meta 요소를 사용하면 검색 엔진 등에 내 블로그에 대한 다양한 정보를 제공할 수 있다. 가장 흔히 사용하는 것은 위의 author, description, keywords다. author은 페이지 작성자이고 description은 페이지가 담고 있는 내용에 대한 또는 내 블로그에 대한 간략한 설명이다. keywords는 내 블로그의 특징을 나타내는 키워드인데 검색 엔진의 분류 등에 이용되니 되도록 작성하는 것이 좋다. 각 키워드는 쉼표(,)로 구분한다. 메타정보의 종류와 각 기능에 대한 상세한 설명은 HTML <meta> Tag에서 확인할 수 있다.

4. head에 포함할 기타 요소(title, link)

head에 포함되어야 하는 중요한 요소 중 하나는 title, 즉, 문서 전체의 제목이다. 문서 제목은 웹 브라우저 탭이나 즐겨찾기, 검색 엔진 결과 등에 사용된다. 어떤 형식이든 원하는 형식을 사용할 수 있는데, 티스토리 블로그에서 블로그 제목 - 글 제목 형식으로 문서 제목을 표시하려면 아래와 같이 입력한다.

<티스토리 블로그 title 유형>
<title>[##_title_##] - [##_page_title_##]</title>

다음은 link 요소다. link 요소는 HTML 문서와 외부 자원을 연결하는 기능을 한다. 가장 많이 사용되는 것은 CSS와 RSS다. 티스토리에선 주로 CSS, RSS, 파비콘을 연결할 때 사용한다. 아래 내용을 참고 해서 버전에 맞는 것을 추가한다.

<link 요소 추가(CSS, RSS, 파비콘 순서)>
XHTML 1.0
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
HTML 5
<link rel="stylesheet" href="./style.css" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

link 요소는 XHTML 1.0과 HTML 5에서 거의 같다. rel 부분은 HTML 문서와 외부 자원의 관계를 규정하는 부분이다. stylesheet는 외부 스타일 시트(CSS)를 의미한다. alternate는 문서의 다른 버전을 의미하는데 주로 RSS, ATOM, 인쇄 페이지, 다른 언어로 번역된 페이지 등에 사용한다. shortcut icon은 흔히 파비콘이라 부르는 작은 아이콘을 연결한다. HTML 5에선 스타일 시트의 문서 형식(type="text/css")을 생략할 수 있다. 두 번째 RSS 항목의 href는 RSS 주소를 추가하는 부분인데 티스토리 기본 RSS를 사용한다면 [##_rss_url_##]를 입력하고 FeedBurner 등 외부 RSS 사용하면 http://feeds.feedburner.com/circlash 등 자신의 RSS 주소를 입력한다.

5. 결론 - 문서 형식 선언 및 head 요소 구성

앞의 내용을 정리해서 블로그 스킨에 사용할 문서의 기본 구성을 작성해보자.

<문서 기본 구성>
XHTML 1.0 - Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
  <title>[##_title_##] - [##_page_title_##]</title>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
</head>
<body>
  실제 문서 내용
</body>
</html>
HTML 5
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
  <title>[##_title_##] - [##_page_title_##]</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
</head>
<body>
  실제 문서 내용
</body>
</html>

위 내용에서 author, description, keywords, RSS를 자신의 블로그에 맞게 수정해서 사용한다. body 요소 안에는 실제 페이지에 표현될 내용을 입력한다. 이미 앞에서 XHTML 1.0과 HTML 5에서 사용할 수 있는 블로그 기본 구성을 작성했으니 그걸 삽입해보자.

<블로그 레이아웃을 포함한 문서 기본 구성>
XHTML 1.0 - Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
  <title>[##_title_##] - [##_page_title_##]</title>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
</head>
<body>
  <div id="header">
    header 내용
  </div>
  <div id="content">
    <div class="article">
      article 내용(본문)
    </div>
  </div>
  <div id="aside">
    사이드바 내용
  </div>
  <div id="footer">
    footer 내용
  </div>
</body>
</html>
HTML 5
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="author" content="circlash" />
  <meta name="description" content="circlash의 블로그" />
  <meta name="keywords" content="컴퓨터,프로그램,한글화,블로그,웹,HTML,CSS" />
  <title>[##_title_##] - [##_page_title_##]</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
  <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <header id="header">
    header 내용
  </header>
  <section id="content">
    <article class="main">
      본문(article) 내용
    </article>
  </section>
  <aside id="aside">
    사이드 바 내용
  </aside>
  <footer id="footer">
    footer 내용
  </footer>
</body>
</html>

세부 항목은 지정되지 않았지만, 여기서부턴 하나의 완성된 HTML 문서라고 할 수 있다. 위 태그를 기본으로 이제 header, 본문, 사이드 바, footer에 들어갈 내용을 채워넣으면 된다. 단, HTML 5로 스킨을 작성할 땐 IE8 이하에서 HTML 5 section 요소를 지원하지 않으니 꼭 html5shiv 부분을 head에 추가한다.

다음 글


관련글

댓글 12

티스토리툴바