본문 바로가기
프로그래밍/HTML, CSS, JavaScript

티스토리 폴더 형식의 카테고리 달기

by [바가지] 2018. 2. 21.
반응형

 

티스토리 카테고리 달기

 

티스토리 카테고리

 

카테고리가 바로 보여지는 스킨이 아니여서 카테고리만 우측공간에 보여주고 싶다라는 생각이 들었습니다.

카테고리가 보여질 때 페이지 뷰 횟수가 더 늘 것 같다라는 생각이 들었기 때문이기도 하죠.

 

간단하게 달아 보았는데 그 내용에 대하여 포스팅을 해 봅니다.

 

카테고리를 달기 위해서는 티스토리에서 제공되는 카테고리 정보에 대하여 먼저 알아야 합니다.

 

먼저 치환자 부분입니다.

폴더 형식과 리스트 형식 두가지 형태의 치환자가 제공됩니다. 제가 추가로 설치 해 본 것은 폴더 형식 입니다.

티스토리 스킨 가이드 화면을 보면 친절하게 사용 예시 부분도 적혀 있습니다.

 

치환자

 

치환자

분류 전체보기
구매 가이드
주식 정보
프로그래밍
어린이 코딩
컴퓨터 일반
부분을 적용 후 확인 해 보면 테이블(table) 모양으로 카테고리 소스가 생성 되어 있는 것을 확인 할 수 있습니다. F12 키를 클릭하여 확인 해 볼 수 있겠죠.

 

다음으로 티스토리에서 제공되는 스타일 부분 입니다.

스타일 부분은 테이블 형태로 생성 된 코드에 CSS를 적용하는 부분입니다.

 

크게 세가지 부분을 제공해 주고 있습니다. 카테고리 텍스트 및 이미지를 포함하고 있는 셀의 스타일 <TD> 영역 클래스(class) 명인 ib 와 branch3 입니다.

사용예시의 cursor:pointer 은 마우스 모양을 설정 하는 부분입니다. 손 모양으로 바뀌게 하는 역할을 합니다.

 

스타일1

 

개발자 도구를 이용하여 branch3 이란 class명이 있는지 확인 해 보도록 하겠습니다.

 

개발자 도구로 확인

 

개발자도구로 확인

 

다음 사용예시의 .c_cnt 는 갯수 부분의 스타일을 설정 합니다.

저는 갯수 부분을 안보이도록 하였습니다. 즉 CSS 부분에 display:none 로 설정을 하였습니다.

 

스타일2

 

저의 경우 반응형 스킨이기 때문에 media 부분 설정을 해주어야 합니다. PC환경에서 볼 경우(큰 사이즈)만 카테고리를 보이도록 해 주기 위해서 입니다. 작은 사이즈에서도 보여진다면 보기에 좋지 않기 때문입니다.

 

예를 들어 다음과 같이 추가 하였습니다.

 

@media only screen and (max-width:320px)

{

  s_sidebar_element {display:none;}

}

 

마지막으로 제가 추가한 코드는 다음과 같습니다.

 

HTML

 

<s_sidebar_element>
   <div id="category"><!-- 카테고리 모듈 -->
    
분류 전체보기
구매 가이드
주식 정보
프로그래밍
어린이 코딩
컴퓨터 일반

   </div>
</s_sidebar_element>

 

CSS

s_sidebar_element {float:right; width:150px; display:block;}
.ib { cursor:pointer;} /* 카테고리 - 이미지 버튼 */
.branch3 { cursor:pointer;} /* 카테고리 - 트리 셀 */
.c_cnt { display:none; font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f30;} /* 카테고리 - 카테고리 옆 개수 스타일 */
#category {position:fixed; font-family:'고딕', sans-serif; margin:50px 0px 0px;}
#category img {border:0;}
#category td {line-height:1.0; font-size:12px; font-family: Georgia, "맑은 고딕", serif; color:#666666;}

 

 

@media only screen and (max-width:738px){
 /* 우측영역 - 카테고리 */
  s_sidebar_element {display:none;}

}

 

@media only screen and (max-width:320px)

{

  s_sidebar_element {display:none;}

}

 

@media only screen and (min-width:738px) and (max-width:1262px){
 /* 우측영역 - 카테고리 */
  s_sidebar_element {display:none;}

}

 

결과 모습

 

결과

 

우측 상단에 고정형식으로 추가하였는데 디자인 감각이 없어 꾸미지 않고 최대한 깔끔하게 해 보았습니다.

 

반응형