-
티스토리 카테고리(category) 디자인하기!!!블로그멘토/블로그 팁 2012. 2. 13. 22:11
티스토리 카테고리(category) 디자인
가끔씩 티스토리 블러그를 돌아 다니다보면 카테고리가 기본형이 아닌 다른 디자인으로 만들어진 것을 볼 수 있습니다.
많은 분들이 설정모드에 없는데 어떻게 이런 디자인이 나올 수 있는지 궁금해 하실텐데, 이 글을 통해 원리를 이해하고 궁금증을 해소하시길 바랍니다.^^
이 그림을 바탕으로 계속 설명하겠습니다. ^^
티스토리 카테고리(category) 치환자
스킨을 만들다 보면 카테고리 부분도 디자인을 변경하고 싶은데, 카테고리에 관련되어 티스토리내에서 제공하는 것은 치환자 밖에 없습니다. 그래서 우리는 주로 아래와 같이 작성을 하게 됩니다.
<div class="category">
<h3>카테고리</h3>
<div class="wrapper">
[ ##_category_list_## ]
</div>
</div>
스킨 html 파일을 열어보면 보통 저 부분이
이렇게 되어 있는데 이건 table 태그를 이용하겠다는 뜻이고, 위와같이 를 사용하면 ul li 태그(리스트 태그)를 이용해 카테고리를 생성하겠다는 뜻입니다. 사용할 때에는 치환자 부분에 category란 id 속성을 div로 감싸서 css를 주는 것이 보통입니다. 서브 제목은 h3라는 제목 태그로 감싸주는것이 보편적인 방법임을 또한 기억하시기 바랍니다. ^^
분류 전체보기 (52)
공지사항 (0)
엑수시아스토리 (3)사진 (0)IT (46)블로그멘토 (3)TS플로그인 (0)
[ ##_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 디자인 하실 때 유용하게 쓰였으면 좋겠습니다.
도움이 되셨다면, 추천추천~ 퐝퐝!! ^^'블로그멘토 > 블로그 팁' 카테고리의 다른 글
티스토리 카테고리, 드롭다운 리스트로 변경하기 (18) 2013.11.17 티스토리 블로그 페이지 이동 시 로딩바를 달아보자. (18) 2013.05.12
