개인적으로 블로그 스킨을 우리말 '살결'로 부르고 있다. 영향력 없는 나 혼자 그렇게 부른다고 뭐가 달라지랴마는 스킨보다 정이 가는 말이다. 내 식대로 제목을 달자면 '티스토리 살결 꾸미기'에서 글갈래 꾸미기가 되겠다.
티스토리 카테고리를 불러 들이는 치환자는 둘이 있다.
하나는 [ ##_category_##]이고 다른 하나는 [ ##_category_list_##]이다.
첫째는 큰 갈래만 보여주고 아래 작은 갈래는 감추어지는 것이고 둘째는 작은 갈래까지 모두 펼쳐서 보여주는 것이다. 차이는 목록을 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;
}
보기 좋은 색을 고르고 테두리를 두르고 글꼴을 바꾸는 것은 각자가 해야 할 일이다. 말그대로 개성이 넘치는 디자인을 선보이면 된다.
