2011. 7. 6. 23:52ㆍIT/Tistory Tips
앞에서 스킨 뼈대를 만들었으니 이제 실제 내용을 작성할 차례다. 먼저 간단한 헤더 부분부터 시작하자. header는 보통 블로그 이름, 설명, 로고, 블로그 탐색 메뉴 등이 포함되는 부분이다. /'pəlp/ 블로그의 header 부분도 블로그 이름, 설명, 블로그 탐색 메뉴로 구성된다. 블로그 구성에 따라 header를 맨 위에 만들 수도 있고, 블로그 이름과 탐색 메뉴를 웹 페이지 맨 위에 고정할 수도 있다. 또 header를 사이드 바처럼 사이드의 특정 위치에 블로그 이름과 함께 고정해서 사용할 수도 있다. 보통 header는 맨 위에 자리 잡고 있으니 그걸 기준으로 만들어 보자.
header에 들어갈 블로그 이름과 설명은 아주 간단하다. 블로그 이름은 [##_title_##]이란 치환자를 사용하고 블로그 주소는 [##_blog_link_##]란 치환자를 사용한다. 치환자는 티스토리가 해당 블로그에 맞는 특정 부분을 표시하라고 지정하는 것이다. 블로그 이름을 표시하고 이름을 클릭했을 때 블로그 대문으로 이동하도록 하려면 다음과 같이 입력한다.
<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
h1은 이 부분이 웹 페이지 전체 제목이라는 것을 알려주기 위해 사용한 태그다. h1 안에 a 요소를 사용해서 블로그 제목을 클릭하면 블로그 대문으로 이동하게 연결한다. 치환자를 사용하면 스킨을 어떤 블로그에 적용하든 그 블로그에 맞게 적용된다.
<span> - [##_desc_##]</span>
[##_desc_##]는 블로그 설명을 표시하는 치환자다. [블로그 정보]에 입력한 블로그 설명을 표시한다. 나중에 스타일을 지정하기 편하게 span 요소로 묶었다.
사용자의 취향에 따라 로고와 블로그 탐색 메뉴를 추가해도 괜찮다. 로고는 나중에 CSS에서 배경으로 사용할 수 있으니 HTML 문서에 추가할 내용은 없다. 블로그 탐색 메뉴는 CSS로 이미지, JavaScript 없는 블로그 메뉴 만들기 게시물에서 이야기한 것을 참고 해서 ul 요소로 구성한다. 간단히 다음과 같이 만들 수 있다.
<nav>
<ul>
<li>Home</li>
<li>Tag</li>
<li>Media</li>
<li>Location</li>
<li>Guestbook</li>
<li>Admin</li>
</ul>
</nav>
이제 헤더 구성을 정리해보자.
| 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">
<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1><span> - [##_desc_##]</span>
<div class="nav">
<ul>
<li>Home</li>
<li>Tag</li>
<li>Media</li>
<li>Location</li>
<li>Guestbook</li>
<li>Admin</li>
</ul>
</div>
</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">
<h1><a href="[##_blog_link_##]">[##_title_##]</a></h1><span> - [##_desc_##]</span>
<nav>
<ul>
<li>Home</li>
<li>Tag</li>
<li>Media</li>
<li>Location</li>
<li>Guestbook</li>
<li>Admin</li>
</ul>
</nav>
</header>
<section id="content">
<article class="main">
본문(article) 내용
</article>
</section>
<aside id="aside">
사이드 바 내용
</aside>
<footer id="footer">
footer 내용
</footer>
</body>
</html> |
헤더는 블로그를 방문했을 때 가장 먼저 눈에 들어오는 부분이다. 별다른 내용이 없다고 쉽게 지나칠 수도 있지만, 사실 블로그를 한 단어로 압축하는 블로그의 제목과 조금 더 상세한 정보를 제공하는 블로그 설명이 들어가는 부분이다. 블로그 제목과 블로그 설명만 봐도 이 블로그가 어떤 이야기를 무게 있게 다루겠다는 것을 예측할 수 있는 만큼 꽤 중요하다. 또한, 블로그 탐색 메뉴를 포함하고 있다면, 방명록이나 태그 등 기타 정보를 확인할 때 꼭 필요한 부분이다. 유명 블로그나 홈페이지를 돌아다니다 보면 개성 있는 헤더가 많다는 점 역시 헤더의 중요성을 뒷받침할 수 있는 부분이라 생각한다. 그러나 헤더는 블로그를 압축적으로 표현할 뿐 그 자체가 글의 내용은 아니다. 위의 예를 참고하면 어렵지 않게 구성할 수 있다.