카테고리 치환자가 만드는 구조

스킨 파일(skin.html)에는 이렇게 적었다. 티스토리 치환자는 스킨이 스스로 어떤 구조를 만들도록 하는 파일을 모아 놓은 명령 뭉치다. 카테고리 치환자

• 전체
  • 논어
  • 취미와 잡담
  • SKIN & CSS
  • 맛집&여행
  • 사진
  • WWW
  • LaTeX

는 일련의 작업을 벌여서 새로운 문서를 만든다.

<s_sidebar_element>
                  <!-- 카테고리 모듈 -->
                   <div class="category">
                          

• 전체
  • 논어
  • 취미와 잡담
  • SKIN & CSS
  • 맛집&여행
  • 사진
  • WWW
  • LaTeX

<!--카테고리 치환자-->
                   </div>
</s_sidebar_element>

모니터에 구현된 에이치티엠엘 문서는 아래와 같은 태그를 가지고 있다.

<div id="sidebar">

    <!-- 카테고리 모듈 -->
    <div class="category">
        <ul class="tt_category">
            <li class="">
                <a class="link_tit" href="/category">글갈래 <span class="c_cnt">(1149)</span></a>

                <ul class="category_list">
                    <li class="">
                        <a class="link_item" href="/category/1"> 수학 이야기 </a>

                        <ul class="sub_category_list">
                            <li class="">
                                <a class="link_sub_item" href="/category/1-1">미적분</a>
                            </li>
                            <li class="">
                                <a class="link_sub_item" href="/category/1-2">기하, 벡터 </a>
                            </li>
                            <li class="">
                                <a class="link_sub_item" href="/category/1-3">확률, 통계 </a>
                            </li>

                        </ul><!--sub_category_list-->

                    </li>
                    <li class="">
                        <a class="link_item" href="/category/2">사는 이야기 </a>

                        <ul class="sub_category_list">
                            <li class="">
                                <a class="link_sub_item" href="/category/2-1">여행, 음식</a>
                            </li>
                            <li class="">
                                <a class="link_sub_item" href="/category/2-2">레고 </a>
                            </li>
                            <li class="">
                                <a class="link_sub_item" href="/category/2-3">들꽃 </a>
                            </li>
                        </ul><!--sub_category_list-->

                    </li> <!--""-->
                </ul> <!--category_list-->
            </li> <!--""-->
        </ul><!--tt_category-->
    </div>


</div>

스킨에 따라 조금 다를 수 있으므로 브라우저에서 소스 보기를 눌러서 확인해 보자. 따로 이름을 정해주지 않았지만 치환자가 클래스 이름이 tt_category인 ul 안에 이름이 category_list인 ul과 또 그 안에 이름이 sub_category_list인 ul을 만든다. 색을 다르게 해서 구분했으니 확인해 보자. 구조를 알았으니 이제 파일 style.css를 열어서 스타일을 정해주면 된다.

/* category */
#sidebar .category {
    padding: 0px;
    border-top: 1px solid #333;
}
#sidebar .link_tit {
  font: 13px 'Noto Sans KR', sans-serif;
  margin-bottom: 5px;
  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
  color: #333;
  font-weight: bold;
}
#sidebar .category_list li {
  list-style: square;
  list-style-position: inside;
  color: #666;
  border-top: 1px solid #ddd;
}
#sidebar .sub_category_list li {
  padding: 0px 15px;
  list-style: circle;
  list-style-position: inside;
  border-top: 1px solid #ddd;
}
#sidebar li a {
   padding: 3px 6px;
}

#sidebar .link_sub_item {
   padding: 3px 0;
}
#sidebar a:hover {
    background-color: #333;
    color: #fff;
}

아직은 디자인 내공이 부족해서 선(border)와 글꼴 바꾸기 밖에 못했다. 아! 리스트-스타일도 사각형과 원으로 적용하고 마우스 올렸을 때 글자가 흰색으로 반전되도록 해 보았다. 시험해 보니 깊이 1인 ul은 여백 주기(padding)가 제대로 잘 반영되지 않는데 그 이유는 아직 찾지 못했다.

적용된 모습 보기

수학과 사는 이야기