카테고리 정렬과 수정방법

티스토리 스킨을 사용하던중 카테고리 부분에 대해서 이해가 안가는 분을 위해 몇자 적습니다.
초보분들과 티스토리 스킨에서 카테고리를 수정하고 싶은 분들은 이 글이 도움이 될겁니다.
일단 제일먼저 카테고리를 리스트 형식으로 볼거냐?그냥 카테고리 형식으로 볼거냐?.를 결정하셔야 합니다.
카테고리 리스트
스킨 - html/css 편집에서 단축키 Ctrl + F (찾기)를 통해 _category_ 를 찾습니다.



그럼

[#\#_category_list_##] 인경우(1번)와
[#\#_category_#\#] 인경우(2번)를 볼수가 있습니다.

1번 리스트의 경우는 아래처럼 리스트 모양으로 나옵니다.



2번인경우 아래그림처럼 + 버튼이 나오게끔 나옵니다.



위의 두경우다 큰메뉴가 있고 그 아래에 하위메뉴가 있는경우 입니다.



1번과 2번 모두 선택해서 사용할수 있습니다. 단, 스킨배포당시 css를 다 정해놓은경우는 문제없이 보여지지만 css를 지정하지 않았을경우는 좀 이상하게 보여질수 있습니다.

카테고리 리스트 다듬기

일반적으로 카테고리는 sidebar 아래에 div id=category 형식으로 지정을 많이 합니다.
그래서 css 편집창에서 카테고리만 지정을 했는지 , 아니면 사이드바 전체에 지정을 했는지 우선 알아봅니다.
#sidebar ul li a{padding:5px;}
// 이런식으로 지정하면 사이드바 전체에 padding값이 적용이 됩니다.
#category ul li a{padding:5px;}
//이런식으로 지정하면 category ul li a 에만 padding값이 적용이 됩니다.


제 경우처럼 큰 메뉴가 있고 그 하위메뉴가 좀 들어간듯한 형식으로 지정하려면 아래처럼 하면 됩니다.
자세한 것은 좀더 세분화해서 봐야하지만 대략 이런형식이란것만 알아두세요.

#category ul li a{padding:5px;}
#category ul li ul li a{padding-left:5px;}
#category ul li ul li ul li a{padding-left:5px;}

블릿의 삽입.

리스트 형식에는 블릿이라고해서 글앞에 모양이 나오게도 할수 있습니다. 이부분이 위에서 말한 padding부분과도 연관이 있기에 꼭 알아두고 넘어가야 합니다.
자세한것은 이전에 작성한 글로 대신합니다.
css 목록 ul 에서 여백과 모양 => http://demun.tistory.com/1593
위의글은 배경 즉 background 가 없이 하는것이고 호환이 좋은 배경으로해서 블릿을 지정하기도 합니다.
즉 아래의 이미지를 스킨편집에서 업로드한 상태라고 가정합니다.
물론 이미지 이름도 right.gif 라고 가정하고 배경으로 넣어보겠습니다. 이것도 하나의 예시일뿐입니다.세세한건 잘 들여다봐야 정확하게 알수있습니다.



#category ul li a{
	background:url(./images/right/gif) no-repeat 0 0;
	padding:5px 5px 5px 10px; 
}

아시겠지만 padding는 위,오른쪽,아래,왼쪽순으로 값을 정합니다. 대략 5px 정도 주었고 왼쪽으로만 배경이 위치한다고 가정하고 오른쪽으로 좀 들어가게 10px 로 주었습니다.

오버기능 추가하기.

배경으로 지정했기 때문에 마우스를 갖다대면 배경이 변하게도 지정할수 있습니다.
만약 아래의 이미지를 right_on.gif 라고 가정하고 티스토리에 업로드한 상태라고 가정합니다.



그럼 아래처럼 지정하면 되겠죠.

#category ul li a:hover{
	background:url(./images/right/gif) no-repeat 0 0;
	padding:5px 5px 5px 10px; 
}

그러면 평상시에는 right.gif 가 블릿으로 배경으로 자리를 잡고, 마우스를 올리면 right_on.gif가 배경으로 보여지게 됩니다.
리스트 형식에 블릿이 아닌 배경을 줘서 깔끔하게 보이는 방법 => http://demun.tistory.com/1652
아래는 사이드바에 관련한 팁 몇가지 입니다.
검색창 꾸미기 => http://demun.tistory.com/1604
studiopress adsense 스킨 사이드바 수정하기(최근댓글) => http://demun.tistory.com/1589
티스토리 사이드바 스킨 수정팁-동일하게 관리하기 => http://demun.tistory.com/1498
사이드바에 더보기 기능 적용하기 => http://demun.tistory.com/1649

아래는 스킨수정에 관한 글입니다.

참고링크

티스토리 꾸미기 팁 정리 => http://demun.tistory.com/988
티스토리 스킨 완벽 마스터하는 방법 => http://demun.tistory.com/1393
롤오버효과 다운로드링크 서식만들기 => http://demun.tistory.com/1462
믹시 다음뷰 추천버튼과 카테고리 더보기 글 정리하는 법 => http://demun.tistory.com/1574
댓글 배경 꾸미기 => http://demun.tistory.com/1602
댓글창 이미지 넣기 => http://demun.tistory.com/1601
블로그 타이틀 이미지 롤오버 효과내기 => http://demun.tistory.com/1611
제목에 그림자 효과내기 => http://demun.tistory.com/1612
멀티 드롭다운 메뉴 달기(Vertical CSS Menus) => http://demun.tistory.com/1616
개    개