티스토리 스킨 만들기 4 - 헤더(header) 구성하기

2011. 7. 6. 23:52IT/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>

헤더는 블로그를 방문했을 때 가장 먼저 눈에 들어오는 부분이다. 별다른 내용이 없다고 쉽게 지나칠 수도 있지만, 사실 블로그를 한 단어로 압축하는 블로그의 제목과 조금 더 상세한 정보를 제공하는 블로그 설명이 들어가는 부분이다. 블로그 제목과 블로그 설명만 봐도 이 블로그가 어떤 이야기를 무게 있게 다루겠다는 것을 예측할 수 있는 만큼 꽤 중요하다. 또한, 블로그 탐색 메뉴를 포함하고 있다면, 방명록이나 태그 등 기타 정보를 확인할 때 꼭 필요한 부분이다. 유명 블로그나 홈페이지를 돌아다니다 보면 개성 있는 헤더가 많다는 점 역시 헤더의 중요성을 뒷받침할 수 있는 부분이라 생각한다. 그러나 헤더는 블로그를 압축적으로 표현할 뿐 그 자체가 글의 내용은 아니다. 위의 예를 참고하면 어렵지 않게 구성할 수 있다.

  • 프로필사진
    Favicon of https://kachingtip.tistory.com BlogIcon 글쓴이입니다2011.07.11 16:36 신고

    스킨이 정말 깔끔하네요.
    네이버에서 이것저것 검색하다가 들어왔어요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.13 18:16 신고

      고맙습니다^^
      제가 디자인 감각이 좀 꽝이라서;;
      다음 번엔 좀 더 나은 모습이 되겠죠?
      즐거운 하루 보내세요@.@

  • 프로필사진
    알 수 없는 사용자2011.07.13 10:01

    시간이 되면 자작 스킨을 만들어 보고 싶은데 좋은 강좌를 해주셔서 감사합니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.13 18:19 신고

      시간은 좀 걸려도 내가 만든 스킨이란 생각에 괜히 기분 좋은 것 같아요^^

      안타까운 점은 기술이 있다고 해도 떠오르는 디자인이 없다는 것 정도? ㅜㅠ
      여행자님도 디자인 잘 고민하셔서 멋진 스킨 만드시길!
      얼릉얼릉 나머지 시리즈도 써야겠군요~
      오늘 하루 마무리 잘 하세요.
      초복 전야 잘 보내시길!

  • 프로필사진
    Favicon of https://bestbest.tistory.com BlogIcon 파더J2011.07.14 03:04 신고

    댓글먼저달고..천천히 읽어볼께요...ㅎ

  • 프로필사진
    알 수 없는 사용자2011.07.14 12:03

    스킨이 너무 심플하고 멋있습니다...^^ 왠지 홈쳐 가고 싶으네요...
    좋은 강좌 잘보고 갑니다... 처음 시작이라 호기심은 많은데..아는것이 없으니 마냥 걱정입니다..
    본격적인 더위 시작인것 같습니다.. 무더운 여름철 건강에 유의하시기를 바라겠습니다...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.14 21:21 신고

      좋게 봐주셔서 다행이네요^^
      혹시 필요하시면 말씀하세요~
      코드 대강 정리해서 드릴께요.
      지금은 막 쓰다보니 HTML이나 CSS나 지저분해서요;;

      비 그치면 무더위라더니 또 태풍이 온다기에 걱정입니다.
      오키드멜로디님도 건강 조심하세요^^

  • 프로필사진
    알 수 없는 사용자2011.07.15 07:24

    강좌가 너무나 훌륭하십니다.
    제가 스킨을 만들고 있는데 특히 티스토리 블로그 스킨이요.
    근데 중요한건 치환자를 어디어디에 배치해야 하는지 전체 그림을 못그리겠네요...
    코드를 적어야 하는건 분명히 skin.html랑 .css뿐인데 말이죠 ㅠㅠ
    부디 저를 거둬주세요..

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.15 16:09 신고

      본문은 치환자가 많아서 귀찮긴 해도 티스토리 측에서 꽤 괜찮은 가이드를 제공합니다. 이것 대로만 해도 대강 틀은 잡히실 겁니다.

      하나하나 처음부터 수정하기보단, 스킨 가이드에 나온 치환자를 사용해서 대강 틀을 만들고 그 다음에 수정하는 편이 더 간편할 겁니다.

      http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4

      위 주소를 방문하면 skin.html에 사용하는 티스토리 스킨 치환자가 거의 대부분 설명되어 있습니다.
      일단 틀을 만든 다음 세부 구성을 조금씩 수정해보세요.

      예를 들어
      본문 제목 - 날짜 - 범주/분류 - 본문 내용 - 댓글 - 트랙백 - 페이지
      이런 식으로 구성한 다음 나중에 댓글을 본문과 다른 탭으로 구분한다던지 하는 것도 괜찮을 것 같구요.
      기본 틀만 잡히면 그 다음엔 아무래도 디자인이고 개인의 아이디어인 것 같아요^^;;

      일단 스킨 가이드 한 번 보시고 궁금한 내용 있으면 다시 댓글 남겨주세요~

  • 프로필사진
    알 수 없는 사용자2011.07.18 14:44

    안녕하세요.
    댓글 잘 보았습니다. ^^
    circlash님의 글대로 티스토리 가이드를 따라서 쭈욱 만들고는 있는데요
    한가지 문제에 봉착했습니다.
    바로 레이어에 관한 문제 같은데요.
    저는 float 구문을 사용하지 않아서 레이어가 구분되어지지 않았을텐데도
    이상하게 첫 페이지에 header부분은 가운데로 위치해 있는데
    중간 레이어와 footer쪽의 레이어가 왼쪽위치로 변해 버렸어요...
    아무리 문제점을 찾으려 해도 찾을수가 없군요.
    제가 원래 티스토리에서 제공하는 스킨을 부분부분 고치고 있어서
    먼가 레이어 자리에 관한 중요한 명령을 지워버린거 같은데요.
    우선 제 블로그에 한번 와주시지 않겠어요?
    kutnpeist.tistory.com
    입니다. 깔끔하게 만들고 싶은데 코드가 정리가 되지 않아서 지금 굉장히 애를 먹고 있네요 ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.18 18:47 신고

      일단 div id="container"에 width:800px; margin:0 auto 속성이 있으므로 블로그 스킨 전체의 내용이 800px 너비로 고정되고 좌우 여백이 auto로 지정되어서 가운데 정렬이 됩니다. margin:0 auto는 상하 외부 여백이 0이고 좌우 외부 여백은 너비에 맞춰서 화면에 맞게끔 자동으로 조정하는 것이라 가운데 정렬과 같은 효과가 나옵니다.

      header와 footer에 포함된 wrap 클래스에 text-align:center 속성이 부여되어 있네요. 이것 때문에 header와 footer는 글자가 가운데 정렬 되구요.

      마지막 div id="content" 부분은 text-align:center 등 내용물을 가운데 정렬할 때 사용하는 속성이 전혀 부여되지 않아서 기본 값으로 표현됩니다. 기본값은 가운데 정렬이 아니므로 header, footer와 달리 가운데 본문 부분만 왼쪽 정렬이 되는 상태입니다.

      float 속성은 보통 사이드바를 본문 좌우 중 한 위치에 고정시킬 때 상하가 아닌 좌우로 정렬할 때 주로 사용하는 속성입니다. 지금 만들고 있는 스킨은 사이드바가 없으므로 float 속성을 사용할 일은 아직까진 없는 것 같네요^^

      혹시 다른 궁금한 점 있으면 다시 질문 남겨주세요~ 근데 깔끔한 느낌이 아주 좋습니다. 지금 스킨은 좀 정신없지만, 전 심플한 걸 더 좋아하거든요^^

  • 프로필사진
    알 수 없는 사용자2011.09.07 16:05

    티스토리 페이지 구성하는 첫번째 글부터 보기 시작했는데요,
    처음엔 가볍게 보려다가 점점 메모장 켜놓고 필기하면서 보게 되네요ㅎㅎ
    제가 이런쪽으로는 초보라서..;;;.이건 중급이상의 내용이겠죠???ㅎㅎ
    저는 다시 처음부터 한번만 더 필기하면서 보고 한번 따라해봐야되겠어요!!
    좋은 정보 감사합니다^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.09.16 09:08 신고

      관심 가져주셔서 고맙습니다.
      요즘 컴퓨터앞에 앉을 시간이 없어서 글을 못썼는데, 얼렁얼렁 마무리지어야겠네요^^
      멋진 스킨 만드시길!!

  • 프로필사진
    2011.09.13 00:11

    비밀댓글입니다

  • 프로필사진
    ㅠㅠ2011.09.13 00:13

    위에 비밀댓글 올린 사람이에요
    수정이 안돼서 또 올립니다ㅠ 답글은 이 댓글에 달아주셔요ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.09.16 09:13 신고

      안녕하세요,
      블로그 방문해봤는데 본문 내용에 테두리가 없는 것 같은데요^^;;
      사진 있는 본문에 테두리가 있다는 이야기인가요?

      아니면 혹시 '카테고리 다른 글' 보기 부분을 이야기하시는건가요?
      카테고리 다른 글 부분은 style.css 젤 끝에 다음 내용을 추가하시면 됩니다.

      .another_category{border:0!important}

      다른 부분이라면 어떤 부분인지 다시 자세한 설명 남겨주세요^^

  • 프로필사진
    Favicon of https://communicatist.tistory.com BlogIcon 청렴한피노키오2012.01.21 00:55 신고

    안녕하세요. 따라하려 하지만 생초보한테는 너무나 힘든 일이네요.

    블로그에 헤더부분에 이미지를 넣으려 하는데 앞쪽 부분이 비고 그림이 뒤쪽으로 옮겨지네요

    왜 그런지 잘 모르겠어요...

    http://secrettrickster.tistory.com/

    여기입니다.. 하.. 고민이네요..ㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.01.25 22:33 신고

      지금은 해결하신거죠? 블로그 방문해보니 헤더 부분 이미지가 제 위치에 있는것 같네요^^
      혹시 다른 의문사항 있으면 다시 댓글 남겨주세요~