2011. 8. 6. 01:30ㆍIT/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 문서 구조 예제는 본문의 나머지를 모두 완성한 다음 추가하겠다.