mango-punch.tistory.com
mango-punch.tistory.com
Go back
티스토리 카테고리 꾸미기 tips

(http://mango-punch.tistory.com)


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 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 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 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 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 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 { }

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

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

.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; } /* 카테고리 세로 간격 */

.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; }

.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; }


티스토리툴바