CSS for 티스토리

[CSS] 티스토리스킨-댓글 스타일시트 이해하기

Kay~ 2009. 11. 12. 09:26

[CSS] 티스토리스킨-댓글 스타일시트 이해하기

시작을 했으니 끝을 내야 할텐데.. 끝이 보이지 않는군요.

점점 더 깊은 수렁으로 빠져들고 있는 느낌이 팍팍 들고 말입니다.
암튼 포스트영역 이번 글로 마무리가 됩니다.

블로거나 방문자나 관심깊은 댓글 치장을 어떻게 해야 하나~~
오늘은 댓글영역의 스타일시트(Cascading Style Sheet)에 대해서 알아보도록 하겠습니다. (이하 존칭생략합니다.)

skin.html의 소스와 style.css 파일의 소스가 가장 많은 부분이 댓글이 아닌가 합니다. 찌글 찌글한 영어들이 쫙 화면 전체에 나타나게 되겠네요!

댓글 스타일 - 리스트 및 답댓글  

현재 Pure Black (text) 스킨 기준으로 댓글은 아래와 같이 표시가 된다.
지정할 수 있는 스타일을 보면 필명, 작성일시, 버튼들, 댓글내용, 줄간격, 테두리와 배경등이다.

댓글 영역 예시

본인의 스킨에서 댓글영역에 대한 스타일이 어떻게 선언되어 있는지 확인하기 위해서는 먼저 skin.html에서 댓글부분을 찾아야 한다. 관리페지이의 skin.html의 내용이 나타나게 한다음 찾기(Ctrl + F)를 이용해서 댓글근처에 있는 단어를 입력해서 검색을 해도 되고 "commentList"를 입력해서 검색해도 된다.

 <skin.html에서 댓글리스트 부분>

<div class="comment">
<div class="commentList">

 <s_rp_container>
  <ol>
   <s_rp_rep>                            <!-- 댓글 표시부 -->
    <li id="[ ##_rp_rep_id_##]">
       <div class="[ ##_rp_rep_class_##]">
       <span class="name">[ ##_rp_rep_name_##]</span> <!-- 댓글작성자이름 -->
       <span class="date"> [ ##_rp_rep_date_##]</span> <!-- 댓글 작성일시 -->
       <span class="control">
         <a href="[ ##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a>
         <a href=" #" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>
         <a href="#" onclick="[ ##_rp_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a>
       </span>
       <p>[ ##_rp_rep_desc_##]</p>  <!-- 댓글내용 -->
      </div>
      <s_rp2_container>                <!-- 댓글에 대한 답글 표시부 -->
       <ul>
        <s_rp2_rep>
          <li id="[ ##_rp_rep_id_##]">
           <div class="[ ##_rp_rep_class_##]">
           <span class="name">[ ##_rp_rep_name_##]</span> <!-- 답댓글 작성자이름 -->
           <span class="date"> [ ##_rp_rep_date_##]</span> <!-- 답댓글 작성일시 -->
           <span class="control">
              <a href="[ ##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a>
              <a href=" #" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>
           </span>
           <p>[ ##_rp_rep_desc_##]</p>  <!-- 답댓글 내용 -->
         </div>
        </li>
       </s_rp2_rep>
      </ul>
     </s_rp2_container>
    </li>
   </s_rp_rep>
  </ol>
 </s_rp_container>
</div>
   댓글입력폼
</div>

캬~ 내용이 제법 길다. 소스만 봐도 머리가 아프면 안봐도 된다. ^^
그냥 본인이 필요한 부분만 찾아서 보면 된다.

위에서 파랑색과 빨강색으로 표시된 부분에 대해서 스타일이 선언이 되어 있다.

< style.css의 댓글선언 부분>

.comment                  { width: 608px;border:1px solid #F0F0F0; background:#F9F9F9; padding:5px 5px 0 5px; overflow:hidden;}
.comment p               { margin:3px 0 0 0; padding:0;}
.comment h3              { display:none;} /* 메모숨기기용 */
.comment ol,
.comment ul               { margin:0;  padding:0;  list-style:none;}
.comment .date           { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#777;}
.comment .name          { color:#666; font-weight:bold;}
.comment .name a       { color:#ccc; font-weight:bold;}
.comment ol li             { border-bottom:1px dashed #999; margin:0 0 7px 0; padding:0 0 7px 0; }
.comment li ul li           { padding:5px 10px 5px 35px;  background:url("images/iconReComment.gif") no-repeat 12px 6px; border:none;}
.comment .control a.address       { background:url(images/btnAddress.gif) no-repeat;  padding-left:24px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.address span  { display:none;}         /* 메모 숨기기용 */
.comment .control a.modify        { background:url(images/btnModifyDelete.gif) no-repeat;  padding-left:24px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.modify span   { display:none;}         /* 메모 숨기기용 */
.comment .control a.write         { background:url(images/btnReply.gif) no-repeat;  padding-left:13px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.write span    { display:none;}          /* 메모 숨기기용 */

와우~ 제가 봐도 정신이 사납군요!

[설명]

거두절미하고 바로 설명으로 들어가기로 한다.

.comment   : 댓글과 댓글쓰기 영역까지 아우르는 스타일로서 가로폭과 테두리, 배경을 지정
.comment p  : 댓글의 내용에 대한 스타일로 댓글의 글자색,크기, 줄간격은 여기서 지정한다.
.comment ol,
.comment ul  : ol과 ul을 동시에 지정
.comment .date  : 댓글, 답댓글의 날짜 표시 스타일
.comment .name  : 댓글, 답댓글 작성자 
.comment .name a  : 댓글, 답댓글 작성자에 링크스타일, 링크가 걸렸을때만 적용됨
.comment ol li        : comment 내의 <ol>에 포함되어 있는 <li>에 대한 스타일 
.comment li ul li     : 답 댓글에만 적용되는 스타일로 comment 內의 li 속의 ul 태그의 하위에 존재하는 li 태그에 대한 스타일 선언. 설명조차도 안되는데 위 skin.html에 표시된 주황색 부분의 <li>태에만 적용하기 위한 스타일선언이다. 답댓글의 앞에 표시되는 를 표시하는 스타일
.comment .control a.address  : comment 블록내의 control 블록에서 <a>태그내에 있는 address 클래스 선언, 각각의 댓글주소 링크를 담고 있는 버튼스타일
.comment .control a.modify  : 수정/삭제(  )버튼 스타일
.comment .control a.write    : 댓글달기(  )버튼 스타일  

간단하게 설명을 했는데 중첩된 스타일에 대한 설명이 필자가 생각해도 어렵다... 
이해가 안가면 째려보다보면 이해가 갈것이다. ㅋㅋ

필자도 그동안 손하나 안되던 댓글스타일중 글자색만 간단하게 변경해봤다. 

글자색만 바꿨을 뿐인데 제일위의 이미지와 비교해보면 느낌이 많이 차이가 난다.
회색빛의 우울함에서 밝고 부드러운 느낌으로 바뀌었다.

이렇게 스타일은 모든 내용을 억지로 변경하는 것보다 간단한 변경만으로도 새로운 느낌을 줄수도 있다.  

댓글 입력폼 스타일 (댓글 쓰기)  

이제 댓글 입력창에 대한 스타일에 대해서 알아보도록 하자.

사설없이바로 skin.html의 댓글쓰기에 해당하는 소스를 보도록 하겠다.

<skin.html의 댓글작성 폼 소스>

<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
   <s_rp_guest>
     <p>
       <input type="text" name="" value="" />
       <label for="name"> : 이름 </label>
    </p>
    <p>
       <input type="password" maxlength="8" name="" value="" />
       <label for="password"> : 패스워드 </label>
    </p>
    <p>
       <input type="text" class="homepage" name="" value=""/>
       <label for="homepage"> : 홈페이지 </label>
    </p>
   </s_rp_guest>
   <p class="secretWrap">
      <input type="checkbox" name="" class="checkbox" />
      <label for="secret"> 비밀글 </label>
   </p>
</s_rp_member>
<p>
  <textarea name="" rows="5" cols="50"></textarea>
</p>
<p>
  <input type="submit" value="댓글 달기" onclick="" class="submit" />
</p>
</div><!-- commentWrite close -->
</s_rp_input_form>

댓글 입력 영역은 <div class="commentWrite"> 로 블록화되어 있다.
댓글 입력 소스는 로그인 했을때와 로그인하지 않았을때 서로 다른 내용이 표시되도록 되어있다. 
 <s_rp_guest>와  </s_rp_guest>사이의 내용은 로그인을 하지 않았을 때만 표시되는 내용이다.

댓글 입력 폼

<style.css 내용>

.commentWrite                 { overflow: hidden; padding:5px; }
.commentWrite input         { width:150px; color:#666; }
.commentWrite textarea     { width: 575px;overflow: hidden;  padding:5px; margin:0; color:#666;}
.commentWrite .homepage           { width:300px;}
.commentWrite .submit             { background:url(images/btn_reple.gif) no-repeat; width:71px; height:23px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto; }
.commentWrite .secretWrap         { clear:both; float:right; position:relative; top:0px; left:-10px; margin-bottom: 5px;}
.commentWrite .checkbox           { border:none; padding:0; margin:0; width:25px;}

 [설명]

위의 style.css 내용중 클래스의 용도 위주로 알아보기로 하자.

.commentWrite                ;댓글 입력 영역 지정
.commentWrite input        ; <input> 태그를 사용하면 자동으로 적용되는 스타일 지정, 본 스킨에서는 이름, 주소, 비밀번호등의 입력창에 대한 스타일이다.
.commentWrite textarea    ; 댓글 내용이 입력되는 textarea에 대한 스타일
.commentWrite .homepage  ; 블로그 또는 홈페이지 주소 스타일
.commentWrite .submit       ; 댓글입력 버튼() 스타일
.commentWrite .secretWrap ;비밀글 작성시 체크상자가 표시될 위치를 지정하는 스타일
    float:right 은 오른쪽 정렬
.commentWrite .checkbox    ; 체크상자 스타일 

덧1.
댓글 입력창을 댓글리스트의 위쪽으로 옮기려면 제일 위의 소스에서
<div class="comment">와 <div class="commentList"> 사이로 입력폼을 옮기면 됩니다.
입력폼은 <s_rp_input_form>부터 </s_rp_input_form> 까지의 내용입니다. 
위의 댓글쓰기폼 스타일을 참고하세요!

연관글. 2008/06/27 - [블로그팁] - 블로그 댓글창에 배경그림 넣기

관련글. 
 - 스타일시트(CSS) 이해하기 for 티스토리
 - 스타일시트(CSS)의 선언방법 1
 - 스타일시트의 선언방법 및 사용 예제 2
 - 크리스마스 트리장식으로 알아보는 CSS
 - 티스토리 뽀개기 - 스킨 구조(skin.html) 이해하기
 - 티스토리 뽀개기 - div 와 span
 - (css) border로 꾸미는 나만의 이미지 스타일
 - 티스토리 스킨 style.css 완전정복 1
 - 티스토리 스킨 style.css 완전정복 2
 - 티스토리 블로그꾸미기 - 메뉴,사이드바,애드센스등