[CSS] 티스토리 스킨 댓글, 트랙백 스타일 이해하기

[CSS] 티스토리 스킨 댓글,트랙백 스타일 이해하기

댓글과 트랙백 관련 html 은 웹으로 나타나는 내용만 볼때는 간단해 보이지만 스킨 내부를 들여다 보면 은근히 복잡합니다.

이 부분에 대해서 설명을 하려다 보니 은근 난해하고 지루해질것 같습니다. 그래서 스타일에 대해서 배우는 만큼 스타일위주로만 간략하게 설명을 할까 합니다. (이후 존칭생략)

 

이번 글에서는 본문하단에 배치되는 태그, 트랙백에 대한 스타일 구성에 대해서 알아볼까 한다.
언뜻보기에 소스가 매우 복잡해 보이는데 하나 하나 들여다보면 그리 복잡할것도 없다 .

태그를 표시하는 스타일

일반적으로 포스트 하단에 위치한 태그 리스트이다. 스킨에 따라 태그의 크기, 글자색을 지정한 경우도 있는데
이 기회에 그 방법을 알아보도록 하자.

 

먼저 skin.html 에서 태그 리스트를 표시하는 부분을 찾는다.

 

< skin.html 에서 태그리스트 출력 부분 >

 

<div class="article">     ##_article_rep_desc_##  <!-- 블로그 본문 --> </div> <div class="author">       ##_article_rep_author_## <!-- 글쓴이 --> </div> <s_tag_label>  <div class="tagTrail"> <!-- 태그 리스트 -->    <span class="tagText">TAG </span> [ ##_tag_label_rep_## ]  </div> </s_tag_label>

 < style.css 파일에 선언한 태그스타일 >

.tagTrail                { padding:8px 5px 5px 30px;  background:url(images/iconTag.gif) center left no-repeat; clear:both;} .tagText                 { display:none;}

[설명]

tag를 표시하는 스타일은 태그가 표시된 전체 영역에 적용되는 .tagTrail과 메모용 .tagText로 구성이 되어 있다. .tagTrail : 위 8픽셀, 오른쪽 5픽셀, 아래쪽 5픽셀, 왼쪽 30픽셀의 패딩(padding)과 배경이미지를 왼쪽에 배치(left)하고 반복없음(no-repeat)로 선언했다. 또 혹시 모를 float의 영향을 제거하기 위하여 clear:both른 선언해줬다. .tagText : display:none은 화면에 표시를 하지 않는 스타일 선언문이다. 그렇기 때문에 skin.html에서 <span class="tagText">TAG</span>에서 "TAG"는 화면에 표시되지 않는다. 여기선 테스트용(또는 메모)으로 보면 된다.

트랙백과 댓글 카운트 스타일

아래 그림을 보면 트랙백 갯수와 댓글 갯수가 있다.

보면 매우 간단하다. 하지만 skin.html은 조금 복잡해보인다.

 

< skin.html 의 트랙백 갯수, 댓글 갯수 표시부분 >

 

<div class="actionTrail">   <a href="#tb" onclick=""><s_tb_count>        트랙백 <span class="cnt"></span>개</s_tb_count></a>,   <a href="#rp" onclick=""><s_rp_count>       댓글 <span class="cnt">13</span>개</s_rp_count></a> </div>

위 소스가 복잡한 이유는 트랙백이나 댓글 갯수를 클릭했을때 해당 트랙백이나 댓글이 펼쳐졌다 접어졌다 하는 링크가 들어가 있기 때문이다. 추가적인 멘트를 넣으려면 이곳에 넣으면 된다.

<style.css에서의 선언>

.actionTrail             { border-top:1px dotted #ccc;  padding:7px 5px 7px 0;  font-weight:bold;clear:both;} .actionTrail .cnt        { color:#f60;}

 [설명]

.actionTrail 은 전체영역에 적용되는 스타일이 선언되어 있다. 여기서는 태그와 구분하기 위하여 위쪽으로 점선을 표시하고( border-top:1px dotted #ccc; ), 공백지정(padding) 및 볼드(font-weight:bold)를 지정했다. .actionTrail.cnt : 카운트된 숫자에 대한 스타일이다. 필자는 주황색 계열의 색을 지정해봤다.

 

트랙백 주소 및 트랙백 리스트 style

트랙백 주소는 별로 수정하지 않지만 트랙백 리스트는 많이 수정하는 스타일이다.

위 그림처럼 트랙백 부분은 트랙백 주소와 트랙백 내용(제목과 작성자, 간략내용)으로 구성되어 있으며 각각에 대한 스타일을 지정할 수가 있다. 여기서의 설명은 빨간 테두리에 해당하는 스타일시트이다.

<skin.html 내용>

<div class="trackback">  <h3>트랙백 주소 :: </h3>  <s_tb_container>   <ol>    <s_tb_rep>     <li id="">      <h4>Subject: <a href="" onclick="window.open(this.href); return false" rel="external nofollow"></a></h4>      <span class="from">Tracked from <span class="name"></span></span>      <span class="date"></span>      <a href="#" onclick="; return false"            class="delete">&nbsp;<span>삭제</span></a>      <p></p>     </li>    </s_tb_rep>   </ol>  </s_tb_container> </div><!-- trackback close -->

위의 내용에 색으로 진하게 표시된 부분이 모두 스타일시트가 적용된 부분이다. 이 각각에 대하여 선언한 스타일시트의 내용은 아래와 같다.

 <style.css 내용>

.trackback               { width:/*@post-width:-12=*/ 608px /*@*/;border:1px solid #F0F0F0; background:#F9F9F9; padding:5px 5px 0 5px; margin-bottom:10px; overflow:hidden;} .trackback a             { color:#000;} .trackback h3            { font:11px Verdana; color:#333;  border-bottom:1px solid #f5f5f5;  margin:5px 5px 10px 5px;} .trackback h4            { font:12px Verdana; font-weight:normal;  margin:0;} .trackback ol            { margin:0;  padding:0;  list-style:none;} .trackback li            { border-top:1px dotted #ccc;  padding:5px;} .trackback .date         { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#777;} .trackback p             { font:0.95em Dotum, Arial, sans-serif;  color:#999;  margin:3px 0 0 0; padding:0;  letter-spacing:-1px} .trackback a.delete      { background:url(images/iconDelete.gif) left top no-repeat;  padding-left:8px;  text-decoration:none;} .trackback a.delete span { display:none;}

 [설명]

트랙백의 전체 영역(블록)에 대한 스타일을 trackback에 선언을 하고 그 영역내에 표시되는 트랙백의 제목이나 보낸사람, 날짜, 요약내용, 링크, 삭제버튼등에 대한 스타일이 각각 선언되어 있다. 위의 skin.html에서 색으로 표시한 부분을 참고하면서 설명을 보면 좀더 쉽게 이해할 수 있다. .trackback : 트랙백영역 전체에 적용되는 블록에 대한 스타일로 트랙백영역의 폭은 608픽셀로 잡아주고, 테두리(border)와 배경색(background:#F9F9F9;), 패딩을 선언하였고 하단의 마진(margin-bottom:10px;)을 10픽셀로 지정하였으며 이 영역을 벗어난 내용은 숨기도록 (overflow:hidden;) 선언 위 skin.html을 보면 트랙백과 관련된 모든 내용은 빨간색으로 표시한 trackback 스타일의 영향을 받는다. .trackback a : 클래스 trackback 안에서 사용되는 <a>태그에 대한 글자색(검정) 스타일을 선언 .trackback h3  : trackback 안에서 사용되는 <h3> 태그에 대해서 스타일선언, 내용상으로는 트랙백 주소에 대한 스타일이다. .trackback h4 :  trackback 안에서 사용되는 <h4>태그에만 적용되는 스타일을 선언, 트랙백 타이틀 'Subject'에 적용되는 스타일이다. .trackback ol : trackback 스타일영역내에서 사용되는 <ol> 태그에 대한 스타일로 여기서는 트랙백과 트랙백간의 사이를 조절한다. .trackback li  : trackback 스타일영역내에서 사용되는 <li> 태그에 대한 스타일로 트랙백을 구분하기 위하여 위쪽에 선(border)을 그리는 스타일이다. .trackback .date : 트랙백을 보낸 날짜에 대한 스타일 .trackback p :  trackback 스타일영역내에서 사용되는 <li> 태그에 대한 스타일로 트랙백의 요약내용에 적용되는 스타일이다. 글자크기를 조금 작게 (font:0.95em) 표시하고, 자간을(letter-spacing:-1px) 줄였다. .trackback a.delete : <a>태그 내에 사용된 클래스 delete에 대한 선언으로 여기서는 x 버튼을 표시 ( background:url(images/iconDelete.gif) left top no-repeat;)하고 밑줄이 나타나지 않도록 선언(text-decoration:none ) .trackback a.delete span : a.delete 내의 <span>태그내의 내용을 숨김 ( display:none )

원래는 댓글 스타일도 같이 설명하려고 했으나 내용이 길어서 트랙백으로 끝내기로 하겠습니다.

여기서는 지금까지와는 다르게 스타일이 중첩적으로 선언된 부분이 많이 있고 그동안 나오지 않았던 <OL>,<LI>태그도 많이 나옵니다. 기본적으로 스타일시트를 알고 사용하기 위해서는 태그의 기능과 사용법은 알고 있어야 합니다.

그리고 여기서 선언된 트랙백 스타일은 모두 특정영역에 대해서 적용이 되도록 선언이 되었습니다.
예를 들어

  a {color: #000}                 은 모든 <a> 태그에 적용이 되지만..
  trackback a {color: #000}  은 trackback 스타일 내에 사용될때만 적용이 됩니다.

  trackback a.delete 도 마찬가지 의미입니다.

마지막으로 트랙백 스타일에서는 선언된 스타일에 대한 세세한 설명은 하지 않았고 어느 영역에 대한 스타일인지에 중점을 두어 설명하였습니다. 세세한 내용은 이미 앞전에 설명한 내용들이고 중요한것은 적용되는 부분이 더 중요하기 때문입니다.

지루한 내용 끝까지 읽어주셔서 감사합니다. ^^

2009/09/24 - [CSS for 티스토리] - (css) border로 꾸미는 나만의 이미지 스타일
2009/10/20 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 1
2009/10/21 - [CSS for 티스토리] - 티스토리 스킨 style.css 완전정복 2
2009/10/23 - [CSS for 티스토리] - [css]스타일쉬트 여백 지정시 꼭 알아야 할 padding, margin, width 정리