ART of WEB

"엑수시아"

티스토리 카테고리(category) 디자인하기!!!

[2015-08-30 블로그 이전 안내]

안녕하세요. 서토리(구 필명 엑수시아)입니다. 전문적인 개발 블로그로 다시 태어나기 위해 부득이하게 블로그를 이전하게 되었습니다. 앞으로는 아래의 주소로 접속 부탁드립니다. 감사합니다.

서토리 블로그 바로가기

티스토리 카테고리(category) 디자인


가끔씩 티스토리 블러그를 돌아 다니다보면 카테고리가 기본형이 아닌 다른 디자인으로 만들어진 것을 볼 수 있습니다.
많은 분들이 설정모드에 없는데 어떻게 이런 디자인이 나올 수 있는지 궁금해 하실텐데, 이 글을 통해 원리를 이해하고 궁금증을 해소하시길 바랍니다.^^




이 그림을 바탕으로 계속 설명하겠습니다. ^^


티스토리 카테고리(category) 치환자


스킨을 만들다 보면 카테고리 부분도 디자인을 변경하고 싶은데, 카테고리에 관련되어 티스토리내에서 제공하는 것은 치환자 밖에 없습니다. 그래서 우리는 주로 아래와 같이 작성을 하게 됩니다.

<div class="category"> 

<h3>카테고리</h3>

<div class="wrapper">

[ ##_category_list_## ]

</div>

</div>


스킨 html 파일을 열어보면 보통 저 부분이 [##_category_##] 이렇게 되어 있는데 이건 table 태그를 이용하겠다는 뜻이고, 위와같이 [##_category_list_##]를 사용하면 ul li 태그(리스트 태그)를 이용해 카테고리를 생성하겠다는 뜻입니다. 사용할 때에는 치환자 부분에 category란 id 속성을 div로 감싸서 css를 주는 것이 보통입니다. 서브 제목은 h3라는 제목 태그로 감싸주는것이 보편적인 방법임을 또한 기억하시기 바랍니다. ^^

[ ##_category_list_## ]이라는 치환자 부분이 실질적으로 페이지가 로딩될 때는 HTML 요소로 바뀝니다.
윗 그림과 같은 카테고리를 구성한다고 가정하면 아래와 같은 내용으로 치환자가 치환됩니다.

<div id="category">

<h3>카테고리</h3>

<div class="wrapper">

<ul>

<li>

<a href="/category">분류 전체보기</a>

<ul>

<li><a href="/category/메뉴1">메뉴1</a></li>

<li><a href="/category/메뉴2">메뉴2</a></li>

<li><a href="/category/메뉴3">메뉴3</a></li>

<li><a href="/category/메뉴4">메뉴4</a></li>

<li><a href="/category/메뉴5">메뉴5</a>

<ul>

<li><a href="/category/메뉴5/메뉴5_1">메뉴5_1</a></li>

<li><a href="/category/메뉴5/메뉴5_2">메뉴5_2</a></li>

<li><a href="/category/메뉴5/메뉴5_3">메뉴5_3</a></li>

</ul>

</li>

<li><a href="/category/메뉴6">메뉴6</a></li>

</ul>

</li>

</ul>

</div><!-- wrapper close -->

</div>


위의 내용을 통해서 화면상에서는 다음과 같은 구성을 보여주는 것이죠.



치환을 통해 얻어낸 결과


치환된 내용들을 통해서, 우리는 css를 적용할 수 있는 몇 가지 요소들을 더 얻어 내었습니다. ^^
이것은 공통적인 내용이므로 모든 티스토리 카테고리에 적용됩니다. 

첫 번째, 치환자 부분은 category div -> wrapper div로 유저가 만들어놓은 div 안에 태그 형태로 들어가게 됩니다. 
두 번째, 티스토리의 치환자는 ul과 il 태그(리스트태그)를 이용하여 3단계 깊이로 구성된다.  



위의 내용을 바탕으로 실질적으로 CSS를 적용해 봄으로, 카테고리 디자인을 변경해 보도록합시다.
 


CSS 적용하기


위의 내용을 알았다면, 스킨을 제작해보신 분들이라면 더 이상 디자인 변경하기는 어렵지 않을겁니다. ^^
단지 3단계 깊으로 css 적용을 해야 하는데 그 부분만 간단하게 짚어보죠.

우리는 아래와 같은 카테고리 디자인을 만들어보려고 합니다. (티스토리 기본스킨으로 제공되는 것 중에 하나입니다.)


제작자가 작성해야 할 HTML 부분

<div class="category"> 

<h3>카테고리</h3>

[ ##_category_list_## ]

</div>


간단하죠?? ^^

그럼 제작자가 작성해야 할 CSS 부분을 보시죠.

/* ***** Category ***** */

#category {

  margin-right:1px;

  margin-left:1px;

}


#leftside #category h3 {

  background:url(images/title_category.gif) no-repeat 1px 0;

  width:113px;

  height:37px;

  text-indent:-5000px;

  display:block;

  border-bottom:1px solid #ddd;

}


#category ul,#category li {

  margin:0;

  padding:0;

  list-style:none;

}


#category li a {

  font:11px Dotum, sans-serif;

  color:#4A4945;

}


#category li a:hover {

  color:#3649AE;

  text-decoration:none;

}


#category .wrapper {

  margin-left:10px;

  width:93px;

}


#category a:hover .c_cnt {

  letter-spacing:0;

}


/*1depth*/

#category ul {

  margin-top:10px;

}


#category ul li {

  background:none;

}


/*2depth*/

#category ul li ul {

  margin-top:0;

  border-top:1px solid #EBEBEB;

}


#category ul li ul li {

  background:none;

  border-bottom:1px solid #EBEBEB;

  padding-top:4px !important;

  padding-bottom:5px !important;

  line-height:13px;

}


/*3depth*/

#category ul li ul li ul {

  border-top:1px solid #EBEBEB;

  margin-top:5px !important;

}


#category ul li ul li ul li {

  background:none;

  border:none;

  line-height:19px;

  padding-left:8px;

  padding-top:0 !important;

  padding-bottom:0 !important;

}


#category ul li ul li ul li a {

  color:#908F8D;

}


#category ul li ul li ul li a:hover {

  color:#848FCC;

  text-decoration:none;

}

 
위를 보면 딱히 이해가 안가는 부분은 없을 텐데 단지 ul il 이 반복 되는 것이 무엇인지 햇갈리시죠.
 ul il이 반복되는 것은 "깊이"를 뜻합니다.

1단계 깊이를 말합니다. 위에 보면 제가 카테고리 부분을 HTML로 보여준 그림 있죠? 거기에 빨간색 부분에 해당합니다.
#OOO  ul {}
#OOO  ul li {}

2단계 깊이
#OOO  ul li ul {}
#OOO  ul li ul li {}  
파란색 부분에 해당합니다.

3단계 깊이
#OOO  ul li ul li ul {}
#OOO  ul li ul li ul li {}
녹색 부분에 해당합니다.


마치며.


기본적인 원리를 설명하고 쉽게 이해시키려고 했는데 긴 논문처럼 되어버렸네요 -_-
아무튼 이 글이 category 디자인 하실 때 유용하게 쓰였으면 좋겠습니다. 

도움이 되셨다면, 추천추천~ 퐝퐝!! ^^


태그목록> , , ,

COMMENT

비밀글 Add Comment
  1. BlogIcon 푸른 연필 ㆍ2013.03.31 16:03 신고ReplyEdit

    우와 대박이네요 ㅠㅜ완전 친절해요, 설명이!
    도전! 이런 정보 찾고 있었는데 ㅜㅜ 감사합니다. 잘 읽고 가요.

    • BlogIcon 엑수시아 ㆍ2013.03.31 17:32 신고Edit

      안녕하세요 ㅎㅎ 도움이 되셨다니 정말 다행입니다 . 이 글 쓴지가 오래되서 살펴보니 틀린부분이 적잔히 있네요 -_-; 조만간 수정하도록 하겠습니다 ^^*

    • BlogIcon 엑수시아 ㆍ2013.03.31 19:36 신고Edit

      글 수정했습니다. 확인하시고 궁금하신 사항있으면 블로그에 남겨주세요. 감사합니다. ^^

  2. BlogIcon StarCatch ㆍ2013.04.13 22:37 신고ReplyEdit

    한번 수정해 봐야겠네요... 좋은글 감사합니다...

  3. BlogIcon 위드와플 ㆍ2013.05.12 14:49 신고ReplyEdit

    저같은 경우에는 각각의 그룹카테고리를 다르게 하기 위해서 jQuery를 이용했어요.
    티스토리의 한계성을 벗어나기 위해서죠.

  4. BlogIcon 다가즈 ㆍ2013.10.21 23:56 신고ReplyEdit

    이거 해보고싶긴한데... 아직 잘모르것습니다 ㅎㅎ 주말에 시간되시면 설명좀 부탁드려요

  5. 드림걸
    드림걸 ㆍ2013.11.16 05:59 신고ReplyEdit

    엑수시아님처럼 탑 메뉴를 구성하고 싶은데...
    어떻게 설치하는지 가르켜 주세요!
    포스팅으로 답해 주시면 감사하겠습니다.
    멋진 주말 보내세요~~^^

  6. BlogIcon 죠쓰v ㆍ2017.11.13 03:29 신고ReplyEdit

    대박ㅋㅋ 제가 찾던거 완전 쉽게 설명해주셔서 감사합니다..