Section 8 - 티스토리 반응형 스킨 만들기 - sidebar에 카테고리 넣기 : 누구야 티스토리

Section 8 - 티스토리 반응형 스킨 만들기 - sidebar에 카테고리 넣기

nOo9ya
2017. 9. 28. 23:19

지난 섹션까진 사이드바 개념을 집중적으로 설명했지만 이제부터 본격적인 스킨 작업에 돌입합니다.
그 첫번째로 CATEGORY 입니다.
카테고리는 내 블로그에 어떤 종류의 글이 있는지 확인 및 이동 할 수 있게 해주는 아주 중요한 요소입니다.
이 카테고리를 우리는 사이드바에 넣어 모듈 처럼 언제든지 사이드바에 넣고 빼기가 가능하게 만들겁니다.

본격적으로 소스 작업을 하기 전에 카테고리 종류에 대해서 간단하게 설명드립니다.

티스토리에서 지원하는 카테고리는 크게 두가지입니다.
하나는 트리구조형, 또 다른 하나는 리스트형입니다.

우리는 이쁘게 이쁘게 만들기 위하여 리스트형으로 하겠습니다.

※ 깨알 팁 :
트리구조는 치환해서 아웃풋으로 나오는 html이 기본적으로 table 코드를 출력합니다.
리스트구조는 html ul 코드를 출력합니다.
table은 말 그대로 표입니다.
우리는 navigation을 만드는 것이기 때문에 이왕이면 시멘틱코딩에 더 적합한 ul > li 태그가 출력되는 리스트형 카테고리를 만들겁니다.
시멘틱코딩은 구글신에게 구걸하시면 정보를 얻을 수 있습니다 ㅡ/.,ㅡㅋㅋ

STEP 1. 카테고리 생성하기

"블로그 관리 -> 콘텐츠 -> 카테고리 관리" 페이지에 추가 된 카테고리가 없다면
백날천날 치환자를 이쁘게 넣어도 카테고리가 출력되는 일이 없겠죠?
그래서 저는 아래와 같이 카테고리를 임의로 추가했습니다.

1-category 설정

STEP 2. 사이드바에 카테고리 치환자 넣기

우선 트리형과 리스트형 두개를 모두 넣고 어떤 차이점이 있는지 확인해봅시다.

트리구조형 :

분류 전체보기 (68)

티스토리 소식 (1)

티스토리 사용법 (0)

티스토리 스킨만들기 (47)

블로그 운영 (1)

PHP (9)

사이트맵 (1)

이왕이면 잘 살아보자 (2)

공부는 끝이 없다 (6)

리스트형 :

분류 전체보기 (68)

2-category 출력화면

차이점은 트리구조로 접었다가 펼쳤다가 하는 버튼이 있고, list형은 버튼 없이 목록을 나열하는 구조이다.
파악이 끝났다면 바로 진행한다.

STEP 3. 사이드바 목록형 카테고리 넣기

테스트로 넣었던 트리형 카테고리는 삭제하고 목로형 카테고리 치환자만 넣습니다.

이렇게만 넣으면 category html 작업은 끝. 나머지는 스타일쉬트에서 처리하면됩니다.

STEP 4. style.css 수정

우선 본문과 사이드바가 header영역과 붙어 있어서 이쁘게 보이기 위하여 layout부분을 아래와 같이 수정합니다.

/* layout */
#container {background:#f3f5f7; min-width:1200px}
#header {padding:10px; border-bottom:1px solid #ddd; background:#fff;}
#contentWrap {width:1200px; margin:10px auto;}
#contentWrap:after {display:block; clear:both; content:'';}
#content {width:900px; float:left;}
#sidebar {width:280px; float:right;}
#footer {padding:20px; border-top:1px solid #ddd; background:#fff;}

#contentWrap 에 margin:10px auto로 수정하여 컨텐츠 영역이 위 아래로 10px의 여백을 추가

#sidebar 의 배경색을 삭제

/* sidebar */
/* sidebar */
#sidebar div {margin-bottom:10px; padding:10px; background:#fff; border:1px solid #ddd}
.category {}

style.css 파일 제일 하단분에 sidebar 에 필요한 코드를 추가합니다.

#sidebar 영역안에 있는 div 요소는 모두다 아래 여백 10px 추가, 내부 여백 10px, 배경색, 테두리 추가 합니다.(나름 디자인)

새로 추가 된 .category 영역에 대한 css 코드를 넣을 준비!!

이렇게 소스를 다 넣으면 아래와 같은 화면이 완성됩니다.(카테고리는 각 개인이 설정한게 나옵니다. 아래와 똑같지 않아요!!)

카테고리 중간출력화면

위 처럼 나왔다면 잘 따라오고 있는 겁니다.

좀 이쁘장하게 들어간거 같지만 막상 카테고리의 1차와 2차 구분이 안되고 있습니다.
치환자로 출력된 카테고리 html 소스를 보면


	
		분류 전체보기(28)
			
		
		
			티스토리 스킨만들기(11)
			
				티스토리 치환자(0)
				
					header(0)
					footer(0)

ul.tt_category > li > ul.category_list > li > ul.sub_category_list > li 이런 구조로 나옵니다.

.tt_category 는 티스토리 카테고리 목록

li > a.link_tit 는 "분류 전체보기" 제목

ul.category_list 는 본인이 설정한 카테고리 목록

ul.sub_category_list 는 2차 카테고리 목록을 출력한거죠.

자세한 설명은 아래 이미지 참고!!

카테고리-구조

구조 파악이 끝났다면 카테고리와 서브 카테고리의 구분을 지을 수 있도록 수정합니다.

/* sidebar */
#sidebar div {margin-bottom:10px; padding:10px; background:#fff; border:1px solid #ddd}
.category {}
.category .tt_category {}
.category .tt_category .link_tt {}
.category .tt_category .c_cnt {color:#ff8149; font-size:0.85em;}
.category .tt_category img {display:none;}
.category .tt_category ul.category_list {margin:10px 0 0 4px}
.category .tt_category ul.category_list li {list-style:circle inside}
.category .tt_category ul.category_list li a {}
.category .tt_category ul.category_list li ul.sub_category_list {margin:0 0 10px 26px;}
.category .tt_category ul.category_list li ul.sub_category_list li {list-style:none}
.category .tt_category ul.category_list li ul.sub_category_list li a {font-size:0.95em; color:#777;}

결과물 확인

카테고리 최종 출력화면

카테고리 모양이 어느정도 나왔습니다.

카테고리 옆의 카운트 안보이게 하려면? .c_cnt 클래스를 아래처럼 display:none으로 숨기시면 됩니다.

.category .tt_category .c_cnt {display:none}

분류 전체보기라는 타이틀을 안보이려면? .link_tt 에다가 display:none을 넣으시면됩니다.

.category .tt_category .link_tt {display:none}

새글이 등록되면 카테고리 옆에 "N" 아이콘이 안나오게 하려면? img 스타일에 display:none 붙이시면 됩니다.

.category .tt_category img {display:none}

참 쉽죠?

분류 전체보기를 다른 텍스트로 전환하려면 javascript로 처리하시면 됩니다.
이것도 물론 어렵지 않습니다.
하지만 아직 html과 css를 모르시는 분들이 있을 수 있으므로 자바스크립트로 처리하는 기능들은 다른 포스트에서 다루기로 하겠습니다.
자바스크립트로 다루는 것들은 "분류전체보기"를 다른 텍스트로 나오게 하거나, 관리자로 로그인시 관리자 화면으로 이동 버튼 노출 등등
티스토리 블로그 접속시 자바스크립트에 기본적인 정보를 담고 시작하는데 이 정보들을 이용하여 다양한 다른 기능들을 구축할 수 있습니다.
궁금하시면 "티스토리 반으형 스킨 만들기"시리즈가 모두 끝날때까지 기다려주세요.

카테고리 만들기는 여기까지 하고 다음은 본격적으로 컨텐츠 영역에 대하여 다루기로 하겠습니다.

이번 섹션도 고생하셨습니다~

누구야 티스토리