태그 클라우드로 이동
HTML 강한참조 udemy SVG css 티스토리 프로퍼티 protocol 프로토콜 함수 javacript Button HStack 약한참조 javascript 이니셜라이저 메서드 CLASS 루프 list HTML문법 삼항연산자 Binding 매개변수 crack 옵셔널 IF 바인딩 foreach arc 클로저 struct TextField SwiftUI ObservedObject 반복 lottie 스킨 Break GeometryReader
궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
카카오페이 QR코드 모바일이시라면 클릭

서근 개발노트

서근 개발노트
티스토리에 팔로잉
TIP/CSS & Tistory

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기!

서근
QUOTE THE DAY

“ 일이 재미있으면 인생은 낙원이다. 일이 의무라면 인생은 지옥이다. ”

- Gorky (고리키)
Written by SeogunSEOGUN

목차

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기!

오늘은 사이드바 카테고리 접기 및 펼치기 기능을 구현하면서 어떻게 적용시키는지 알아보도록 하겠습니다.

사이드바 카테고리 접기 및 펼치기 버튼 구현

티스토리에서 기본적으로 제공하는 카테고리는 보통 펼쳐진 상태입니다. 만약 본인이 사용하는 스킨에 카테고리 접기 및 펼치기 스크립트 기능이 없다면 카테고리의 서브메뉴가 길어지면 길어질수록 가독성도 그렇고 상당히 보기 지저분해지는 경향이 있습니다.

 

만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

 

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스...

seons-dev.tistory.com

티스토리에서 제공하는 카테고리 치환자

티스토리는 

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 티스토리에서 제공하는 카테고리 치환자
TREASURE (408)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 티스토리에서 제공하는 카테고리 치환자
SWIFT (91)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
SWIFTUI (100)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
PROJECT (15)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
USEFUL CODE (7)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
FRONT-END (110)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
TIP (49)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
ADOBE (3)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
ISSUE (5)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
PLAY (26)
 라는 치환자와 치환자 두 가지를 기본적으로 제공하고 있습니다. 이 둘의 차이점은 뭘까요? 카테고리를 접고 싶다면
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
TREASURE (408)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
SWIFT (91)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
SWIFTUI (100)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
PROJECT (15)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
USEFUL CODE (7)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
FRONT-END (110)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
TIP (49)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
ADOBE (3)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
ISSUE (5)
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
PLAY (26)
치환자를 반대로 펴고 싶다면 를 사용해주면 됩니다. 

 

그럼 그냥 저대로 치환자만 바꿔주면 되는거 아니야?

 

아닙니다! 일단 결과 화면을 보여드리겠습니다.

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역
왼: 카테고리 펼친 상태 / 오: 카테고리 접은 상태

제가 사용하는 스킨에서는

카테고리 펼침을 기본 제공하고 있기 때문에 스킨이 제대로 적용이 되어있지만 접은 상태는 그렇지 않습니다. 또, 보기도 깔끔하지 않죠. 

 

이렇기 때문에 카테고리를 접고 펼치는 스크립트를 사용하는것이 가장 정확하고 깔끔합니다. 물론, 현재 사용하고 있는 스킨의 CSS 부분도 많은 부분 침해하지 않는다는 장점도 있습니다.

JavaScript 코드

위 기능을 사용하려면 아래 자바스크립트를 </body> 안쪽에 코드를 넣어줘야 합니다.

html
UNFOLDED
<html>
  <header>
 
    </header>
 
   <body>
   
        <!--여기에 추가-->
        
        </body>
 </html>

위치를 알았다면 아래 코드를 저 공간에 넣어줘야 하는데, 티스토리 스킨 HTML 안에 자바스크립트를 넣으시려면 반드시 <script></script>를 감싸서 넣어줘야 한다는 점을 명심하셔야 합니다.

html
UNFOLDED
<script>
$(function() {
    $(".category_list").children("li").has("ul").addClass("cat-sub-menu"),
        $(".cat-sub-menu .link_item").append().addClass("cat-toggle"),
        $(".cat-sub-menu").each(function() {
            var c = $(this).children(".link_item"),
                d = c.attr("href");
            c.removeAttr("href"),
                $(this).children("ul").prepend(), c.children("span").appendTo(c.parent(".cat-sub-menu").find(".view-all"))
        }),
        $(".cat-toggle").click(function() {
            var c = $(this).parent(".cat-sub-menu");
            c.children("ul").toggle(250), c.toggleClass("expanded")
        })
});
</script>

만약, 새로운 JS파일로 저장하시고 싶으시다면 <script></script> 부분은 제외하고 파일을 생성해주시면 됩니다.

 

위 코드에서 .category_list는 티스토리의 기본 클래스 명이고, cat-sub-menu라는 클래스를 스크립트를 통해 생성해줍니다. 그리고 toggle이 가능한 클래스 등을 새롭게 생성해 주게 됩니다.

CSS 스타일 코드

자바스크립트로 클래스들은 생성했으니, 이제 CSS를 통해 스타일을 입혀주면 됩니다. 

css
UNFOLDED
.sub_category_list { display:none }
 
.cat-toggle i { 
    transition:.1000s ;
}
.cat-sub-menu.expanded .cat-toggle i { 
    transform:scaleY(-1) 
}
.cat-sub-menu .cat-toggle i {
   float: left;
   padding-right: 5px;
   cursor: pointer;
}
 
/*toggle 아이콘 변경*/
.cat-toggle ::after {
    font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
    content: "\f107";
    font-weight: bold;
    cursor: pointer;
    outline: none;
    float: right;
    margin-right: 15px;
    transform: translateY(15%); 
}

우리가 개인적으로 수정해야할 부분은 .cat-toggle ::after 부분입니다. 사용자마다 스킨이 다르니 이 부분은 직접 수정해주셔야 합니다. font-family 에는 FontAwesome 폰트명을 넣어주면 되는데, FontAwesome에 대한 사용법을 모르신다면 구글링해서 넣어주시기 바랍니다. 

 

FontAwesome에 대해 파악하셨으면, content 부분에 원하는 아이콘 코드명을 넣어주시고, 만약 중앙 정렬이 안되어 있어나 오른쪽에 여백을 주고 싶으시다면 margin-right 부분과 transform 부분의 코드를 적절히 수정해주세요.

해결해야 하는 사항

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역

혹시 위 결과 화면에서 문제점을 찾으셨나요?

토글이 되서 서브메뉴가 나왔는데도 아이콘이 아래를 보고 있네요?!

네. 토글이 되었는데도 arrow 아이콘이 아래를 향하고 있습니다. 이 부분은 클래스를 통해 추가해주시면 되는데 아주 간단합니다. 스크립트에서 expanded라는 클래스를 추가했었죠? 토글이 되면 이 클래스가 생성됩니다. 이것을 활용하면 됩니다.

 

.cat-toggle ::after를 세분화시켜주도록 하겠습니다.

css
UNFOLDED
/*toggle 아이콘 변경*/
.cat-toggle ::after {
    font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
    font-weight: bold;
    cursor: pointer;
    outline: none;
    float: right;
    margin-right: 15px;
    transform: translateY(15%); 
}
.cat-sub-menu .cat-toggle ::after {
    content: "\f107"
}
.expanded .cat-toggle ::after {
    content: "\f106"
}

.expanded 클래스가 붙어있는 코드는 토글이 되었을 때 아이콘입니다. 이 부분을 파악하시고 아이콘을 변경해주시면 됩니다. 그리고 .cat-toggle ::after는 expanded 클래스와 공통으로 가지는 값입니다.

자바스크립트와 CSS 전체 코드

javascript
UNFOLDED
<!--카테고리 접기/펼치기-->
<script>
$(function() {
    $(".category_list").children("li").has("ul").addClass("cat-sub-menu"),
        $(".cat-sub-menu .link_item").append().addClass("cat-toggle"),
        $(".cat-sub-menu").each(function() {
            var c = $(this).children(".link_item"),
                d = c.attr("href");
            c.removeAttr("href"),
                $(this).children("ul").prepend(), c.children("span").appendTo(c.parent(".cat-sub-menu").find(".view-all"))
        }),
        $(".cat-toggle").click(function() {
            var c = $(this).parent(".cat-sub-menu");
            c.children("ul").toggle(250), c.toggleClass("expanded")
        })
});
</script>
css
UNFOLDED
.sub_category_list { display:none }
 
.cat-toggle i { 
    transition:.1000s ;
}
.cat-sub-menu.expanded .cat-toggle i { 
    transform:scaleY(-1) 
}
.cat-sub-menu .cat-toggle i {
   float: left;
   padding-right: 5px;
   cursor: pointer;
}
 
/*toggle 아이콘 변경*/
.cat-toggle ::after {
    font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
    font-weight: bold;
    cursor: pointer;
    outline: none;
    float: right;
    margin-right: 15px;
    transform: translateY(15%); 
}
.cat-sub-menu .cat-toggle ::after {
    content: "\f107"
}
.expanded .cat-toggle ::after {
    content: "\f106"
}

결과 화면

카테고리 접기 및 펼치기 자바스크립트와 CSS를 모두 티스토리 스킨 편집의 HTML 부분에 넣어줬으니 결과 화면을 봐야겠죠?

(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! - 결과 화면 - 모든 영역

성공적으로 구현했습니다! 

 

이렇게 오늘은 티스토리 스킨에서 카테고리 접고 펼치는 스크립트 구현 방법에 대해 알아봤습니다. 티스토리를 사용하시는 모든 분들께 조금이나마 도움이 되셨기를 바랍니다!

 

P.S. 티스토리 스킨에 대해 지식이 부족하신 분들을 위해 쉽게 풀어봤는데 도움이 되실까 모르겠습니다.. 혹시 어려우신 부분이 있으셨다면 댓글로 남겨주세요.

 

읽어주셔서 감사합니다🤟

 

 

 

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.
저작자표시 비영리 변경금지

'TIP > CSS & Tistory' 카테고리의 다른 글

(티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부!  (73) 2022.03.16
(티스토리) 스킨 편집 기초 상식  (33) 2022.03.15
[애드센스] 광고 크롤러 오류? 수익 손실 발생! 해결방법  (31) 2022.03.13
2022년 구글 상위 노출! SEO(검색 엔진 최적화) 최적화 글쓰기 방법  (14) 2022.03.10
(카카오뷰) 요즘 대세! 카카오뷰 생성 및 친구 추가 늘리기(맞추)  (22) 2022.03.09

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

Seogun

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

GitHub Seogun.blog Email
facebook twitter kakaoTalk kakaostory naver band

'TIP/CSS & Tistory' 카테고리의 관련 포스팅

더보기
서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

티스토리툴바