티스토리 스킨 카테고리 꾸미기

사는이야기 2017. 7. 6. 12:17
반응형

개인적으로 블로그 스킨을 우리말 '살결'로 부르고 있다. 영향력 없는 나 혼자 그렇게 부른다고 뭐가 달라지랴마는 스킨보다 정이 가는 말이다. 내 식대로 제목을 달자면 '티스토리 살결 꾸미기'에서 글갈래 꾸미기가 되겠다.
티스토리 카테고리를 불러 들이는 치환자는 둘이 있다. 하나는

전체 (1482)
수학이야기 (645)
사는이야기 (837)
이고 다른 하나는 이다. 첫째는 큰 갈래만 보여주고 아래 작은 갈래는 감추어지는 것이고 둘째는 작은 갈래까지 모두 펼쳐서 보여주는 것이다. 차이는 목록을 table로 만드는가 아니면 ul li로 만드는가다.  으로 만들어야 카테고리 꾸미기가 쉬워진다.
 
치환자는 아래와 같은 HTML로 치환되게 된다.

<div id="category">
     <h3>글갈래</h3>
     <div class="menu">
          
     </div>
</div>
<div id="category">
 <h3>글갈래</h3>
 <div class="box">
 
 <ul>
 <!--1단계 메뉴-->
  <li>
       <a href="/category">전체</a>
       <ul>                                   
       <!--2단계 메뉴-->
        <li><a href="/category">메뉴1</a></li>
        <li><a href="/category">메뉴2</a></li>
        <li><a href="/category">메뉴3</a></li>
             <ul>           
             <!--3단계 메뉴-->
              <li><a href="/category">메뉴3-1</a></li>
              <li><a href="/category">메뉴3-2</a></li>
             </ul>
            <li><a href="/category">메뉴4</a></li>
             <ul>
                 <!--3단계 메뉴-->
              <li><a href="/category">메뉴4-1</a></li>
              <li><a href="/category">메뉴4-2</a></li>
                 </ul>
           </ul>
  </li>
 </ul>
 </div><!--box close-->
</div><!--category close-->

이제 CSS 파일에 적어야 할 것을 알아보자. 먼저 div 요소에서 id와 class가 있다. 이 둘의 차이는 없는데 같은 이름이면 id를 먼저 반영한다. CSS에서 id는 앞에 #을 달아서 #category {}로 적고 class는 온점( . )을 달아서 .box {}로 적는다.

#category{
 margin:0;
 padding:0;
}

#category h3{
 margin:0;
 padding:0;
 font:1.2em malgun gothic;
 color:#ccc;
}

<!--링크된 list 보이는 모습-->
#category li a{
 font:1.2em malgun gothic;
 color:#ccc;
}
<!--링크에 커서 올렸을 때 보이는 모습-->
#category li a:hover{
 font:1.2em malgun gothic;
 color:#000;
}

<!--1단계 메뉴 보이는 모습-->
.box ul{
 color : #999;
 font-size : 1.2em;
 font-family : malgun gothic, verdana;
}
.box ul li{
 padding:3px 0px;
 list-style:none;
}

<!--2단계 메뉴 보이는 모습-->
.box ul li ul{
 color : #666;
 font-size : 1.0em;
 font-family : malgun gothic, verdana;
}
.box ul li ul li{
 padding:3px 10px;
 border-bottom:1px dotted #ddd;
 list-style:none;}

<!--3단계 메뉴 보이는 모습-->
.box ul li ul li ul{
 color : #333;
 font-size : 0.8em;
 font-family : malgun gothic, verdana; 
}
.box ul li ul li ul li{
 padding:3px 30px;
 border-bottom:1px dotted #ddd;
 list-style:none;
}

보기 좋은 색을 고르고 테두리를 두르고 글꼴을 바꾸는 것은 각자가 해야 할 일이다. 말그대로 개성이 넘치는 디자인을 선보이면 된다. 

반응형
저작자표시 비영리 변경금지

꼬리표

'사는이야기' 더보기

티스토리툴바