티스토리 스킨 만들기 5 - 본문 구성하기 (1)

2011. 8. 6. 01:30IT/Tistory Tips

드디어 블로그 스킨의 가장 중심이 되는 본문이다. 본문은 크게 실제 글이 들어가는 부분(article)과 글 내용 외의 댓글, 엮인글(트랙백), 태그, 광고 등이 포함되는 나머지 부분으로 나눌 수 있다. 또 티스토리에서 제공하는 태그, 위치 로그, 미디어 로그, 방명록 등의 구성 역시 글 내용 외의 요소에 포함할 수 있다. 일단 가장 중요한 article과 댓글, 엮인글 등을 구성해보자.

HTML5에서 새로 생긴 article 요소는 '그 자체가 발행할 수 있는 글의 요소를 모두 포함하는 단위' 정도로 표현하고 있다. 이 글에서 이야기하는 article이란 것 역시 이 정의에서 크게 벗어나지 않는다. 즉, 흔히 블로그를 방문했을 때 보는 글 그 자체가 article이다. article을 다시 세부 요소로 구분해보면, 맨 위에 이 글의 내용과 성격을 결정하는 제목이 들어간다. 글을 발행한 날짜와 글이 해당하는 분류(category)도 들어가고 원한다면 글을 발행한 이의 이름을 표시할 수도 있다. 그 외에 인쇄, 댓글로 이동 등 글 자체의 내용과는 크게 관련이 없는 요소가 추가될 수 있다. 또 한가지 잊지 말아야 할 것은 로그인한 사용자에게만 표시되는 '수정, 삭제, 트랙백 등록, 공개/ 비공개 전환' 부분이다. 이 부분이 없어도 티스토리 [센터 - 글관리]에서 해당 기능을 사용할 수 있지만, 스킨에 포함된 것이 더 편하다. 어차피 로그인한 사용자만 볼 수 있는 부분이니 디자인에도 크게 신경 쓰지 않아도 된다.

본문의 맨 윗부분 구성이 끝나면 다음은 실제 글 내용이다. 이 부분은 크게 신경 쓸 것이 없다. 그냥 글 내용을 표시하는 치환자 하나면 끝이다. 본문의 마지막엔 글의 성격을 한 단어로 표현하는 태그, 각종 메타 블로그 사이트의 추천 단추 등 부가적인 부분이 들어간다. 특히 태그는 검색 엔진의 검색 결과와도 관련이 있어서 잘 선택하는 것이 좋다. 어쨌든, 이 정도면 댓글, 트랙백 등을 제외한 article 부분이 완성된다.

일단 티스토리 스킨 가이드의 2-8 ~ 2-8-4를 읽어보자. 스킨을 만들 때 작성해야 할 article의 HTML 코드는 이것이 끝이다. 대부분 치환자로 구성되어 있어서 아주 간단하게 작성할 수 있다. 스킨 가이드의 내용을 그대로 붙여넣기만 해도 된다. 디자인, 구성, 배치 등은 CSS에서 담당하므로 HTML에선 복잡할 것이 없다.

일단 스킨 가이드의 샘플을 기초로 간단한 코드를 작성해보자. 가장 먼저 해야 할 것은 본문이 들어갈 영역을 만드는 것이다. 앞에서도 계속 이야기한 것처럼 XHTML에선 div 요소를, HTML5에선 section과 article 요소를 사용할 것이다.

<section id="content">
  <article class="main">
    <s_article_rep>
    </s_article_rep>
  </article>
</section>

section으로 본문이 들어갈 영역을 만들고 article 요소로 글 내용이 표시되는 부분임을 지정한다. 물론 스킨 스타일에 따라 한 번만 영역을 지정해도 되지만, CSS를 지정할 때 section과 article 두 부분으로 나누는 것이 좋을 수 있다. 이는 나중에 CSS를 작성할 때 다시 한 번 이야기하자. s_article_rep은 실제 글 내용이 들어가는 부분이라는 치환자다. 그런데 여기서도 생각해야 할 것이 있다. 내 블로그를 포함한 대부분 티스토리 블로그는 태그, 미디어 로그, 위치 로그, 방명록 등 본문 위치에 실제 글 내용 이외의 것을 나타내야 할 때가 있다. 이 요소들은 실제 글 내용은 아니지만, 글 내용과 같은 영역에 표시되는 것이 일반적이다. article class="main"에는 글 내용뿐 아니라 태그, 방명록, 미디어 로그, 위치 로그 등도 표시될 수 있다. 그렇기 때문에 article class="main"으로 일단 본문 영역을 만들고 그다음 s_article_rep이란 치환자로 치환자 안에 입력된 코드는 모두 글 내용을 표현하기 위한 것이라고 구분한다. 태그나 방명록 등은 역시 article class="main"에 들어가지만, s_article_rep이 아닌 다른 치환자를 사용한다. 일단 이 정도만 알아두자.

아래는 스킨 가이드를 참고로 작성한 댓글과 트랙백을 제외한 글 본문 부분의 코드다.

<div class="titleWrap">      <!--글 제목 부분 시작-->
  <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>      <!--글 제목-->
  <div class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a></div>      <!--분류-->
  <div class="date">[##_article_rep_date_##]</div>      <!--날짜-->
  <s_ad_div>      <!--관리자 영역 시작 치환자: 로그인한 사용자에게만 표시되는 부분-->
    <div class="admin">      <!--관리자 영역 시작-->
      <a href="[##_s_ad_m_link_##]">수정</a> : 
      <a href="#" onclick="[##_s_ad_m_onclick_##]">수정(창으로)</a> | 
      ([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> | 
      <a href="#" onclick="[##_s_ad_t_onclick_##]">관련글(트랙백)</a> | 
      <a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a>
    </div>      <!--관리자 영역 끝-->
  </s_ad_div>      <!--관리자 영역 끝 치환자-->
</div>      <!--글 제목 끝-->
<div class="article">      <!--글 내용 시작-->
  [##_article_rep_desc_##]
</div>      <!--글 내용 끝-->
<s_tag_label>      <!--태그 시작 치환자-->
  <div class="tagTrail">      <!--태그 영역 시작-->
    <span class="tagText">TAG </span> [##_tag_label_rep_##]
  </div>       <!--태그 영역 끝-->
</s_tag_label>      <!--태그 끝 치환자-->
<div class="actionTrail">      <!--댓글/엮인글 수 표시 및 댓글/엮인글 접고 펴기 영역 시작-->
  <a href="#tb" onclick="[##_article_rep_tb_link_##]">
  <s_tb_count>트랙백 <span class="cnt">[##_article_rep_tb_cnt_##]</span>개</s_tb_count></a>, 
  <a href="#rp" onclick="[##_article_rep_rp_link_##]">
  <s_rp_count>댓글 <span class="cnt">[##_article_rep_rp_cnt_##]</span>개가 달렸습니다.</s_rp_count></a>
</div>      <!--댓글/엮인글 수 표시 및 댓글/엮인글 접고 펴기 영역 끝-->

위 코드에서 <!-- 내용 --> 부분은 주석으로 어떤 내용을 입력해도 웹브라우저가 알아서 넘어간다. 각 줄이 어떤 부분인지를 간략히 설명한 부분이다. 그냥 설명이라 생각하고 넘어가자. article 부분은 이 정도면 충분하다. 글 제목, 분류, 날짜, 관리자 영역, 글 내용, 태그, 댓글 및 엮인글 표시하고 숨기는 단추(댓글 0개, 엮인글 0개가 있습니다. 등)가 모두 포함되어 있다. 스킨 가이드에서 제시한 위 내용을 기초로 CSS를 적용하기 편하게 조금씩 수정하면 된다.

위의 예제 코드를 <s_article_rep>    </s_article_rep> 사이에 입력하면 일단 기본적인 본문의 모습이 갖춰진다. 이제 article 부분 아래에 댓글, 트랙백을 추가하고 그 외에 방명록, 태그 페이지 등을 추가하면 된다. 이 부분은 다음 게시물에서 자세히 살펴보자. HTML 문서 구조 예제는 본문의 나머지를 모두 완성한 다음 추가하겠다.

  • 프로필사진
    Favicon of https://ok-dj.com BlogIcon CANTATA2011.08.07 13:24 신고

    이런 능력으로^ ㅎ
    근사한 스킨하나 만들어서 배포해주실 생각은 없으신가요?ㅎ
    스킨계의 능력자이신데 ㅎㅎ
    저는 그저 기본 틀 수정하는 정도네요... 애초에 처음부터 쌓아가기는 쉽지 않겠어요...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.07 17:56 신고

      에공; 저도 근사한 스킨 만들고 싶지만, 딱히 떠오르는 디자인이 없어서요^^;;;
      능력자 아닙니다 호호호'''
      혹시 지금 사용하고 있는 스킨이라도 괜찮으면 소스 배포할께요. 만에 하나라도 원하시면 댓글 남겨주세요^^
      다음에 스킨 바꿀 땐 그 스킨 소스도 같이 공개하도록 하겠습니다~

  • 프로필사진
    알 수 없는 사용자2011.08.08 19:04

    ^^ 안녕하세요...
    워낙 홈쳐가고싶은 스킨이라.... 혹시나 스킨 배포하시나 기다리는 사람중에 하나 입니다..
    조그만 지나면 여름의 끝이 보이겠죠? 건강 유의 하세요!!

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.09 01:04 신고

      지금 쓰고 있는 스킨 올렸습니다.
      혹시 생각 있으시면 수정해서 사용하세요~
      오늘 하루 마무리 잘 하시구요^^

  • 프로필사진
    알 수 없는 사용자2012.05.31 00:09

    댓글부분이 출력이 안돼내요;; 어떻게해 할까요 ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.05.31 20:31 신고

      남겨주신 내용만으론 어떤 문제가 있는지 잘 모르겠네요^^:;
      좀더 자세히 알려주세요.
      어떤 스킨에 어떤 수정을 했더니 댓글 부분이 어떻게 되었다 최대한 자세히 알려주셔야 답을 드릴 수 있습니다.^^

  • 프로필사진
    Favicon of https://lemonave.tistory.com BlogIcon lemoncoa2012.07.13 10:09 신고

    안녕하세요~ 스킨만들기 1에서 질문했었는데.. 5까지 왔네요. ㅎㅎ
    쭉 따라오긴 했는데 좀 더 차분히 해봐야겠어요.
    일단은 올려주신 예제가지고 다 붙였는데 어려워요. 흑

    근데 지금 사용하시는 스킨도 올리셨나요?
    찾아봤는데 없어서. 완성된 소스 보면서 공부해볼라구요. ㅎㅎㅎ

    질문이 하나 있다면,
    edit plus에서 쭉 따라갔었는데 인터넷 익스플로러에서 보기 누르니까 다 깨지더라구요.
    아마 티스토리 형식으로 저장이 되어서 그런거 같은데 테스트 할 때는 어떻게 하는 건가요?

    감사합니다. :D

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.07.13 12:48 신고

      일단, 지금 제가 사용하는 스킨은 요기↓↓서 받을 수 있구요.
      http://circlash.tistory.com/642

      티스토리 스킨 보시면 [샵샵_어쩌구저쩌구_샵샵] 이런 표시가 있죠? 치환자라고 부르는 건데 이건 티스토리에서만 제대로 표시가 되요. title 치환자를 사용하면 해당 블로그 제목을 표시하는 그런 식이죠~

      테스트는 일단 티스토리 기본 사이트로 가세요.
      www.tistory.com

      여기서 로그인하시면 왼쪽에 블로그 목록이 나오고 그 아래에
      [내 블로그 만들기]라는 버튼이 있어요.
      그 버튼을 꾹 누르면 새로 블로그를 만들 수 있습니다!

      새로 만든 블로그에 HTML/CSS 수정 부분에서 해당 HTML 소스를 붙여넣고 어떤 모습으로 표시되는지 확인하면 됩니다.^^

      혹시 제가 이야기한 게 헷갈리면 다시 댓글 남겨주세요^^

  • 프로필사진
    Favicon of https://lemonave.tistory.com BlogIcon lemoncoa2012.07.14 06:38 신고

    아. 와~ 감사합니다.
    한번 해볼게요. 전에 포스팅에 쓰신대로 새로 만들어보는 것보다 일단 수정하면서 배워야할 것 같아요. ^^

    요즘 배우고 있는 중인데 마음만 급하고 되질 않으니까 막 가슴치면서 해요. 답답해서. ㅋㅋㅋ
    천천히 차근차근 해야겠어요. 감사해요. (^^)(__)(^^)

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.07.14 11:12 신고

      새로 블로그 만들고 티스토리 기본 스킨 중 간단한 구조의 스킨이나
      http://circlash.tistory.com/656
      위 글에 있는 스킨을 수정하면서 적용하면 금방 배우실 꺼에요^^

      일단 구조가 간단한 스킨 한번 뜯어보시면 아~ 하는 순간이 있을 겁니다~
      중간에 궁금한 것 있으실 땐 언제든 댓글이나 방명록으로 질문 남겨주세요^^