티스토리에서 스킨을 수정하면서 다루기 가장 귀찮을 요소를 꼽으라면 '카테고리'를 첫 번째로 꼽을 수 있습니다.

원하는 구조로 만들어서 나오는 게 아니라서 직접 수정해야 하는데....그마저도 사용 가능한 클래스 이름은 오버라이드해서 사용해야 하고 그마저도 없으면 css트리로 해결해야 해서 짜증이 증폭되죠 ㅎㅎㅎㅎ

 

1. 티스토리의 카테고리 알아보기

티스토리에서 카테고리는 2가지 치환자로 제공됩니다.

(참고 : 티스토리 가이드 - 치환자 3-5. 카테고리)

 

1-1. 폴더 형식의 카테고리

치환자는 '[##_category_##]' 입니다.

테이블 형태로 제공되며 접고 펼치는 기능이 붙어있는 체로 나옵니다.

 

 

1-2. 리스트 형식의 카테고리

치환자는 '[##_category_list_##]' 입니다.

'<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로 제어하지 못하는 부분도 있으므 이런 부분은 자바스크립트로 해결해야 합니다.

  1. Favicon of http://kangmori.tistory.com BlogIcon 강모사랑 2016.10.27 16:46 신고  Address  Edit/Delete  Reply

    잘봤습니다!

댓글 작성

이름
패스워드
홈페이지
비밀글

티스토리 툴바