10. 티스토리 스킨 만들기 카테고리

오늘은 카테고리 부분을 수정해보겠습니다!

먼저 카테고리 부분은 두가지로 나뉩니다.

기본적으로 티스토리 카테고리 설정 부분에서 수정이 가능한 일반적인 카테고리,

카테고리 리스트로 모든 목록이 한번에 보이게 되는 것 두 가지죠.

      <s_sidebar_element>

      <!-- 카테고리 -->

      <div class="category">

        <h3>카테고리</h3>

          [ ##_category_##]

      </div>

      </s_sidebar_element>

이건 기본적으로 제공하는 카테고리입니다.

기본값으로 하위메뉴가 들어가있어서 사이드바의 길이를 줄일때는 이게 더 좋습니다.

      <s_sidebar_element>

      <!-- 카테고리 -->

      <div class="category">

        <h3>카테고리</h3>

          [ ##_category_list_##]

      </div>

      </s_sidebar_element>

다른 하나는 리스트형식으로 하위메뉴도 숨김 없이 바로 보여주게됩니다.

바로바로 하위 카테고리의 내용도 알 수 있으니 숨겨진 것 보다는 사람들이 많이 보겠죠?

어짜피 위쪽의 카테고리와 같은 경우에는 대부분 카테고리 설정에서 수정이 가능하고,

혹시 수정이 안되는 폰트 사이즈 같은 건 리스트 형식에서와 같이 수정 할 수 있으니 리스트 형식 위주로 설명하겠습니다.

먼저 사이드바에 카테고리 모듈을 넣고 저장 해주셔야겠죠?

리스트 형식을 사용했으니 이렇게 나올꺼에요.

어떤게 상위 메뉴고 어떤게 하위 메뉴인지 잘 모르겠죠?

CSS를 수정해봅시다.

.category {

font-weight:bolder;

margin-bottom:10px;

}

.category > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.category > ul {margin-left:10px;}

.category ul{list-style-type:disc;}

.category li li {margin-left:10px;}

.category .c_cnt {font-size:11px; color:#333;}

.category에는 font-weight:bolder로 글자를 진하게 했고, 아래 위치할 모듈과의 거리를 위해 margin-bottom을 10px 줬습니다.

.category > h3에는 notice, search에서 적은 값과 동일한 값을 복사 해왔구요.

.category > ul 부분의 경우에는 기본적으로 적용되어있는 list-style이 보이지 않기 때문에 .category > ul의 왼쪽 마진을 10px을 줬습니다.

10px을 주게 되면 list-style(원,네모)이 보이게 됩니다.

그 다음은 .category ul에 list-style-type을 disc로 바꿔줬습니다.

바꾸기 전에는 전체, 상위, 하위 메뉴가 각각 다른 모양의 원과 네모인데 저는 전부 똑같이 원으로 변경했습니다.

이미지로 바꾸고싶으신분들은 list-style-image 속성을 사용해 주시면 됩니다.

.category li에 한번 더 왼쪽 마진을 준 이유는, 전체, 상위, 하위 메뉴를 각각 알기 쉽게 나눠주기 위해서입니다.

category li에는 margin-left:10px;이 한번, category li li는 두번, category li li li에는 3번 적용되기 때문에 각각 마진이 다르게 적용됩니다.

마지막으로 .c_cnt의 경우 각 메뉴의 우측에 존재하는 글의 개수(3), (2)와 같은 부분을 말합니다.

저는 글자 크기를 11px, 색을 #333으로 줬네요.

뭐 카테고리는 이 정도면 되겠죠?

디자인 능력자분들이라면 대충 사용법 정도만 알아도 알아서 잘 꾸미실테니...

카테고리 부분은 여기까지 적겠습니다.

궁금한 점, 이해가 안되는 부분은 댓글에 남겨주세요^^

위의 블로그는 http://kreedit.tistory.com에서 보실 수 있습니다.