카테고리 꾸미는 방법

아래 위 스샷이랑 비교해서 보면 조금 더 이해가 쉬울거야~
소스 사용할땐 별★ 지우기!

1. 폴더형 카테고리 
티스토리에서 제공하는 기본 카테고리 
관리자화면 - 카테고리 설정에서 설정 가능

   skin.html

<★div class="category">[★##_category_##]<★/div>

2. 리스트형 카테고리 (세로)
style.css에서 직접 꾸밀 수 있다.

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

* 왼쪽 여백 없애기

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

.category ul { padding:0; margin:0; list-style-type:none; }

.category a { text-decoration:none; color:#000; } /* #000 카테고리 글자색 *★/

.category a:hover {  } /* 마우스오버시 색깔 넣고 싶으면 color:#fff; 이용해 색상코드 삽입 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 서브카테고리에 아이콘 넣기

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

.category ul { padding:0; margin:0; list-style-type:none; }

.category a { text-decoration:none; color:#000; } /* #000 카테고리 글자색 *★/

.category a:hover {  } /* 마우스오버시 색깔 넣고 싶으면 color:#fff; 이용해 색상코드 삽입 *★/

.category > ul > li > ul > li > ul > li > a { padding-left:15px; background:url(images/icon3depth.gif) no-repeat center left; } /* padding-left값을 이용해 서브카테고리 위치 조정, icon3depth.gif 대신 파일업로드를 이용해 올린 아이콘의 파일 이름 넣기 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 상위 카테고리부분만 꾸미기

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

.category ul { padding:0; margin:0; list-style-type:none; } 

.category a { text-decoration:none; color:#000; }

.category > ul > li > a { background-color:red; } /* 카테고리 전체보기 부분 *★/

.category > ul > li > ul > li > a { background-color:green; } /* 상위 카테고리 부분 *★/

.category > ul > li > ul > li > ul > li > a {  } /* 서브카테고리 부분 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 예제

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { width:180px; text-align:center; line-height:40px; } /* width를 넣어서 카테고리 가로길이 설정, line-height로 카테고리 간격 설정 *★/

.category ul { padding:0; margin:0; list-style-type:none; }

.category a { text-decoration:none; color:#000; }

.category a:hover { font-weight:bold; color:red; }

.category > ul > li > a { display:none; } /* 분류 전체보기 없애기 (위 스샷과 비교) *★/

.category > ul > li > ul > li > a { font-style:italic; font-weight:bold; color:blue; display:block; border-top:1px solid #000; border-bottom:1px dashed #000; } /* 상위카테고리 꾸미는 부분, border-top 실선, border-bottom 점선 *★/

.category > ul > li > ul > li > a > span.c_cnt { display:none; } /* 상위카테고리의 글 갯수 없애기 *★/

.category > ul > li > ul > li > ul > li > a {  } /* 서브카테고리 꾸미는 부분 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 예제2
상위카테고리 마우스오버하면 하위카테고리가 나옴!
스샷처럼 category2에 마우스오버하면 category3이 밑으로 밀리면서 하위카테고리가 나오는거ㅇㅇ

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { width:300px; text-align:center; line-height:40px; } /* width는 카테고리 가로크기, line-height로 카테고리 간격조절 *★/

.category ul { padding:0; margin:0; list-style-type:none; overflow:hidden; }

.category a { text-decoration:none; color:#000; }

.category span.c_cnt { font-family:verdana; font-size:10px; }

.category > ul > li > ul li:hover ul { display:block; }

.category > ul > li > ul > li > ul { display:none; }

.category > ul > li > ul > li > ul { border:1px solid #666; background-color:#fff; width:220px; margin:0 auto; overflow:hidden; } /* width는 하위카테고리 박스 가로크기 *★/

.category > ul > li > ul > li > ul > li {border-bottom:1px dashed #000; margin-bottom:-1px; }

* 예제3
이건 상위카테고리가 고정되어있고 마우스오버하면 오른쪽에 박스형태로 하위카테고리가 나옴.

   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { position:relative;}

.category a { text-decoration:none; color:#000; font-family:dotum; font-size:12px; }

.category ul, .category li { list-style-type:none; padding:0; margin:0; }

.category ul { float:left; position:relative; }

.category > ul > li > a { display:none; }

.category > ul > li > ul > li { position:relative; width:200px; height:30px; } /* width, height로 상위카테고리 크기 조절. 크기가 작거나 이 값을 지워버리면 하위카테고리로 마우스 옮길때 하위카테고리가 사라져버림. 한번 직접 적용 해 보면 무슨 말인지 이해될거야;ㅅ; *★/

.category > ul > li > ul > li > ul { display:none; position:absolute; left:80px; top:0px; } /* left값이 클 수록 하위카테고리 박스가 오른쪽으로 움직임. 카테고리명 길이에 따라 조절필요. *★/

.category > ul > li > ul > li:hover ul { z-index:9; display:block; width:150px; border:1px solid #000; background-color:#fff; margin-left:10px; } /* width 하위카테고리 박스 가로값 *★/

.category > ul > li > ul > li > ul > li { height:30px; line-height:30px; padding-left:15px;} /* height, line-height로 하위카테고리 간격조절. 둘이 같은 값 줘야 보기 좋더라~ *★/

.category > ul > li > ul > li > ul > li:hover { background-color:pink; }

3. 리스트형 카테고리 (가로)



   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

.category ul, .category li { padding:0; margin:0; list-style-type:none; display:inline; }

.category li ul li {padding:0 0 0 20px;} /* 카테고리 사이 간격 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 상위 카테고리 우측에 아이콘 넣기



   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { }

.category a { text-decoration:none; color:#000; }

.category ul, .category li { padding:0; margin:0; list-style-type:none; display:inline; }

.category li ul li {padding:0 0 0 20px;} /* 카테고리 사이 간격 *★/

.category > ul > li > a { background:url(images/line.png) no-repeat center right; padding-right:20px;} /* 분류전체보기 오른쪽에 있는 아이콘 *★/

.category > ul > li > ul > li > a { background:url(images/line.png) no-repeat center right; padding-right:20px;} /* 상위카테고리 우측 아이콘 *★/

.category > ul > li > ul > li > ul > li > a {  } /* 서브카테고리 꾸미는 부분 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 서브카테고리만 세로로 정렬



   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { overflow:hidden; }

.category a { text-decoration:none; color:#000; display:block; width:150px; }

.category ul, .category li { padding:0; margin:0; list-style-type:none; overflow:hidden; }

.category > ul > li > a { float:left; } 

.category > ul > li > ul > li > a { } 

.category ul li li { float:left; }

.category ul li ul li li { clear:both; }

.category > ul > li > ul > li > ul > li > a {  } /* 서브카테고리 꾸미는 부분 *★/

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 예제



   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { line-height:40px; overflow:hidden; } /* 카테고리 세로 간격 *★/

.category a { text-decoration:none; color:#000; display:block; width:220px; text-align:center; } /* width로 실선 길이 설정 *★/

.category a:hover { color:yellow; } /* 카테고리에 마우스 오버시 바뀌는 색깔 *★/

.category ul, .category li { padding:0; margin:0; list-style-type:none; overflow:hidden; }

.category > ul > li > a { display:none; } /* 분류전체보기 없애기 *★/

.category > ul > li > ul > li > a { font-weight:bold; color:red; font-style:italic; border-bottom:1px solid #000;  } /* 상위 카테고리 꾸미기 *★/

.category > ul > li > ul > li > a > span.c_cnt { display:none; } /* 상위카테고리 글 수 없애기 *★/

.category ul li li { float:left; padding-right:20px; } /* 스샷에서 실선 사이의 간격 *★/

.category ul li ul li li { clear:both; }

.category span.c_cnt { } /* 카테고리 글 수 꾸미는 곳 *★/

* 예제2. 드롭다운형 (상위카테고리 마우스오버시 서브카테고리 출력)



   skin.html

<★div class="category">[★##_category_list_##]<★/div>


   style.css

.category { line-height:40px; clear:both; overflow:hidden; }

.category a { text-decoration:none; color:#000; display:block; width:220px; text-align:center; } /* width로 상위카테고리 가로간격 설정 *★/

.category ul, .category li { padding:0; margin:0; list-style-type:none; overflow:hidden; }

.category > ul > li > a { display:none; } /* 분류전체보기 없애기 *★/

.category > ul > li > ul > li:hover { background-color:pink; } /* 상위카테고리 마우스오버시 바뀌는 부분(스샷에서 핑크색배경) *★/

.category > ul > li > ul > li > a { font-weight:bold; color:red; font-style:italic; } /* 상위카테고리 글꼴 *★/

.category > ul > li > ul > li > a:hover { color:#000; } /* 상위카테고리 마우스오버시 글꼴 *★/

.category > ul > li > ul > li > a > span.c_cnt { display:none; } /* 상위카테고리 글 수 없애기 *★/

.category > ul > li > ul li:hover ul { display:block; position:absolute; }

.category > ul > li > ul > li > ul { display:none; }

.category > ul > li > ul > li > ul { border:1px solid #666; background-color:#fff; } /* 상위카테 마우스오버시 나타나는 하위카테고리 영역 꾸미는곳 *★/

.category > ul > li > ul > li > ul > li:hover { background-color:#eee; } /* 하위카테고리 마우스오버시 바뀌는 부분(스샷에서 회색배경) *★/

.category > ul > li > ul > li { float:left; }

.category ul li ul li li { clear:both; }

★
.category > ul > li > a { display:none; }
.category > ul > li > ul > li > a > span.c_cnt { display:none; }

나도 이 글 쓰기 전까진 생각도 못하고 있었는데
분류 전체보기를 아예 없애고 상위 카테고리 글 수만 없애도 더 깔끔하고 심플해 보이는거 같더라~
그래서 밑에 따로 또 적어놔본다능ㅋㅋㅋ

글에는 간단하게 글자 색깔 정도만 넣어봤는데 padding, background-color, background:url(), hover 등등 이용하면 더 멋질거야!
암튼 냔들에게도 도움이 되었길바라~

+

(글 수)에서 괄호만 없애고 싶은거야? 글 수 자체를 없애고 싶으면 카테고리 설정에서 글수해제하면 되고 괄호만 없애고 싶으면 
</s_t3> 바로 위에 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
$(function(){ 
$('span.c_cnt').each(function(){ 
var _this = $(this); 
if( _this.text() ){ 
var _searchCntStr = _this.text().replace('(', '').replace(')', '') + '' + ''; 
_this.text(_searchCntStr); 
} 
}); 
}); 
</script> 
이거 넣어봐~ 근데 카테고리에 글이 없어도 0으로 글 갯수가 뜬다능~ 진짜 딱 괄호만 없애는 소스야!