티스토리 / 카테고리 리스트 치환자, 메뉴 꾸미기

▶ 카테고리 리스트 치환자 : [##_category_list_##]

카테고리 관리에 저장된 카테고리 리스트를 불러오는 치환자. 티스토리에는 메뉴를 만드는 방법이 몇가지 있는데 나는 이 치환자를 주로 사용한다.



▶ 치환자 예제


- 카테고리 관리


- 치환자 HTML 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ul class="tt_category">
    <li class="">
        <a class="link_tit" href="/category">
            ALL            
        </a>
        <ul class="category_list">
            <li class="">
                <a class="link_item" href="/category/BOX">
                    BOX                        
                </a>
                <ul class="sub_category_list">
                    <li class="">
                        <a class="link_sub_item" href="/category/BOX/PIC">
                            PIC
                        </a>
                    </li>
                    <li class="">
                        <a class="link_sub_item" href="/category/BOX/TXT">
                            TXT
                        </a>
                    </li>
                </ul>
            </li>
            <li class="">
                <a class="link_item" href="/category/TIP">
                    TIP                        
                </a>
            </li>
        </ul>
    </li>
</ul>
cs



▶ 치환자 HTML 분석


ul.tt_category : 카테고리 전체 묶음

ul > li > a.link_tit : 전체 카테고리 링크 (/category)

ul > li > ul.category_list : 전체 카테고리 링크를 제외한 카테고리 묶음

ul > li > ul > li : 각각의 1차 카테고리 (1차 카테고리에 딸려있는 2차 카테고리까지 하나로 묶음, 치환자 출력 HTML에서 7~23번째줄)

ul > li > ul > li > a.link_item : 1차 카테고리 링크

ul > li > ul > li > ul.sub_category_list : 2차 카테고리 묶음

ul > li > ul > li > ul > li :  각각의 2차 카테고리

ul > li > ul > li > ul > li > a.link_sub_item : 2차 카테고리 링크



▶ CSS 예제


- 기본 디자인 (편의를 위해 약간의 CSS를 입힌 상태)



- 링크 꾸미기


1
.tt_category a{color:#fff; background:#111;}
cs



- 전체 카테고리 꾸미기


1
.tt_category .link_tit{background:#b22546;}
cs



- 전체 카테고리 지우기


1
.tt_category .link_tit{display:none;}
cs



- 1차 카테고리 꾸미기


1
ul.tt_category > li > ul > li > a {background:#2561b2;}
cs



- 2차 카테고리 꾸미기


1
ul.tt_category > li > ul > li > ul > li a {background:#aaa; margin-left:50px;}
cs



▶ CSS가 적용 안되는 경우


1. 수정 CSS를 기존 CSS 소스의 맨 아래 넣는다. (CSS는 순서대로 적용되기 때문에 중복되는 소스는 마지막 소스가 적용됨)


2. !important 를 붙인다. (예: .link_tit{display:none !important;})