[티스토리 스킨] 카테고리를 분석하고 수정하자!
티스토리에서 스킨을 수정하면서 다루기 가장 귀찮을 요소를 꼽으라면 '카테고리'를 첫 번째로 꼽을 수 있습니다.
원하는 구조로 만들어서 나오는 게 아니라서 직접 수정해야 하는데....그마저도 사용 가능한 클래스 이름은 오버라이드해서 사용해야 하고 그마저도 없으면 css트리로 해결해야 해서 짜증이 증폭되죠 ㅎㅎㅎㅎ
1. 티스토리의 카테고리 알아보기
티스토리에서 카테고리는 2가지 치환자로 제공됩니다.
(참고 : 티스토리 가이드 - 치환자 3-5. 카테고리)
1-1. 폴더 형식의 카테고리
치환자는 '
' 입니다.
테이블 형태로 제공되며 접고 펼치는 기능이 붙어있는 체로 나옵니다.
1-2. 리스트 형식의 카테고리
치환자는 ' ' 입니다.
'<ul><li>' 형태로 출력됩니다.
하위카테고리도 '<ul><li>'형태로 나옵니다.
2. html 분석
일단 생성된 html을 분석해 봅시다.
여기서는 리스트 형식만 사용합니다.
(폴더형식은 나중에 기회가 되면 보도록 하죠.)
'<ul class="tt_category">'가 먼저 나오고 '<li>'가 나오면서 '<a>'태그로 '분류 전체 보기'가 나옵니다.
그 밑으로 '<ul class="category_list">'이 나오면서 카테고리를 구성합니다.
하위메뉴도 비슷하게 '<ul class="sub_category_list">'가 나오면서 하위 카테고리를 구성하게 되어 있습니다.
3. CSS 수정
그럼 이제 CSS로 넘어가서 'tt_category' 밑으로 붙은 카테고리 내용을 수정하면 됩니다.
3-1. 들여쓰기 및 앞표시 제거
들여쓰기가 되어 있는 것을 제거해 봅시다.
|
1
2
3
4
5
6 |
/* 카테고리 - 목록 스타일 */
.tt_category, .tt_category ul {
list-style: none;
margin:0px;
padding:0px;
} |
cs |
들여쓰기와 앞문자가 제거되었습니다.
3-2. 서브 카테고리 들여쓰기
서브 카테고리는 들여쓰기를 넣겠습니다.
|
1
2
3 |
.sub_category_list li {
margin-left: 10px;
} |
cs |
3-3. 테두리 넣기
테두리를 넣어 봅시다.
서브메뉴에는 테두리 넣지 않습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
.tt_category ul li, .link_tit {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.sub_category_list li {
border: 0px !important;
} |
cs |
원래 'not()'로 제어하려고 했는데 먹히질 않네요 ㅡ.-;;;
그냥 강제로 적용하는 걸로 해결했습니다.
마무리
이런 식으로 스타일을 적용하면 카테고리를 원하는 디자인으로 바꿀 수 있습니다.
물론 CSS로 제어하지 못하는 부분도 있으므 이런 부분은 자바스크립트로 해결해야 합니다.