[HTML5] tistory에서 카테고리 선택 팝업창 추가

들어가기

tistory에서 글이 많아지면서 원하는 글을 찾기위해 카테고리 별로 선택할 수 있는 기능이 필요했다. 현재 사용하는 스킨이 나쁘지는 않아 변경할 생각은 없었다. 그래서 카테고리 선택하는 팝업창을 만들기로 했다. 어떻게 만드는지 살펴보자.
이글은 HTML과 CSS에 대한 자세히 설명은 생략했다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

스킨 편집 하기

먼저 스킨 편집기로 이동해야 한다. 관리자 화면에서 [꾸미기 > 스킨편집] 버튼이 있다.

fig 01. 스킨편집 버튼

클릭하면 스킨편집 화면이 새로운 탭으로 열린다. 스킨편집 화면 오른쪽에 [html 편집] 버튼이 있다.

fig 02. 스킨편집 화면

[html 편집] 버튼을 클릭하면 팝업 경고 창이 뜨는데 자신이 수정하다가 문제가 생기면 알아서 해결(?)하라는 의미이다.

fig 03. 편집 경고 창

가볍게 [확인] 버튼을 선택한다. 그러면 HTML 편집 화면이 열린다.

fig 04. HTML 편집 화면

중요한 부분은 상단에 HTML과 CSS 선택 버튼이 있다. 해당 버튼을 클릭해 HTML 또는 CSS 편집을 전환할 수 있다. 편집이 끝났다면 반드시 [적용]버튼을 클릭해야 한다. 아니면 작업할 결과물이 사라질 수 있다.

HTML 추가

먼저 HTML 편집 모드에서 작업을 시작하자. 먼저 아이콘을 사용하기 위해 Font Awesome을 사용하기 위해서 해당 CSS을 추가한다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">

다음으로 카테고리 팝업 창을 뛰우기 위한 버튼을 추가하자.

<s_list>
    <button class="btn_category">
        <i class="fa-solid fa-list fa-xl"></i>
        <span class="title_category">[​##_list_conform_##​]<em>([​##_list_count_##​])</em></span>
    </button>
</s_list>

앞에 목록 아이콘과 뒤에는 현재 선택된 카테고리 명 그리고 카테고리에 있는 글의 개수가 표시된다. 기본은 "전체 글"로 되어 있다.
"[## ... ##]"은 tistory에서 제공되는 기능이다. "##list_conform##"은 현재 카테고리 명이고, "##list_count##"은 현재 카테고리의 글 개수이다. 그리고 반드시 s_list 태그 안에 있어야한다.
아래 이미지가 최종적으로 보여질 버튼 모양이다. 실제 보여질 결과는 현재 자신의 스킨에 따라 달라질 수 있다.

fig 05. 카테고리 버튼

다음으로 카테고리 팝업 창이다. 추가 위치는 아무데나 상관없지만, 저는 body 테그 안에 마지막 위치에 추가했다.

<div class="popup_layer">
    <div class="inner_layer">
        <div class="layer_header">
            <strong class="title">카테고리</strong>
            <a href="#" class="btn_close">
                <i class="fa-solid fa-x fa-xl"></i>
            </a>
        </div>
        <div class="layer_body">
            [​##_category_list_##​]
        </div>
    </div>
</div>

"##category_list##" 부분이 카테고리 목록이 생성된다. 자신의 카테고리 정보를 가지고 카테고리 목록을 생성한다.
"##category_list##"가 추후에 실제 생성되는 HTML은 다음과 같은 형태가 된다. 세부적인 부분은 자신의 tistory 설정에 따라서 달라질 수 있다.

<ul class="tt_category">
  <li class="">
    <a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(2)</span> </a>
    <ul class="category_list">
      <li class="">
        <a href="/category/%EA%B3%B5%ED%86%B5" class="link_item"> 공통 <span class="c_cnt">(0)</span> </a>
      </li>
      <li class="">
        <a href="/category/%EC%B7%A8%EB%AF%B8" class="link_item"> 취미 <span class="c_cnt">(2)</span> </a>
      </li>
    </ul>
  </li>
</ul>

최종적으로 CSS가 적용되면 보여질 팝업 창의 모습은 다음과 같다.

fig 06. 카테고리 팝업창

이것으로 HTML 작업은 완료되었다.

CSS 추가

다음으로 CSS를 추가하기 위해 CSS 편집 모드로 이동한다.
먼저 추가할 CSS는 카테고리 팝업 창을 뛰우기 위한 버튼을 위한 스타일이다.

 .btn_category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 3px;
    cursor: pointer;
}

.btn_category .title_category {
    display:  inline-block;
    font-size: 16px;
    line-height: 1.3;
    vertial-align: top;
    padding: 4px 15px 0px 6px;
    margin-bottom: 0;
    padding-top: 0 !important;
}

다음으로 팝업창을 위한 스타일이다.

.popup_layer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
}

.popup_layer .inner_layer {
    height: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fff;
}

.popup_layer .layer_header .title {
    display: block;
    padding: 40px  20px 15px;
    font-family: sans-serif;
    font-size: 32px;
    line-height: 32px;
    font-weight: normal;
}

.popup_layer .layer_header .btn_close {
    position: absolute;
    top: 20px;
    right: calc(20px + env(safe-area-inset-right));
    width: 30px;
    height: 30px;
}

.popup_layer .layer_body .category_list li {
    border-top: 1px solid #eee;
}

.popup_layer .layer_body  .tt_category li {
    padding: 4px 0;
}

.popup_layer .layer_body .tt_category {
    display: block;
    overflow: hidden;
    justify-content: space-between;
    font-size: 17px;
    line-height: 46px;

}

.popup_layer .layer_body .tt_category .link_tit,
.popup_layer .layer_body .tt_category .link_item{
    padding: 0 20px;
    color: #222;
}

.popup_layer .layer_body .tt_category .link_sub_item {
    padding: 0 36px;
    color: #222;
}

여기까지 했으면 큰 작업은 끝이다. 마지막으로 Javascript을 추가하면 된다.

Javascript 추가

마지막으로 Javascript 추가를 위해 HTML 편집 모드로 변경한다. jQuery를 사용하고 있어서 현재 스킨에 없다면 추가가 필요하다. 있다면 건너뛰면 된다.

<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>

최종적으로 아래 스크립트를 추가한다.

<script>
    const popup_layer = $('.popup_layer')
    $('.popup_layer .btn_close').click(()=> popup_layer.toggle() )
    $('.btn_category').click(()=> popup_layer.toggle() )
</script>

별다른 기능이 없다. 팝업창을 보이고 안보이게 해준다.

마무리

마지막으로 [적용] 버튼을 클릭해서 적용하고 자신의 tistory 페이지를 로딩해서 확인하면 된다.
부족한 글이지만 도움이 되었으면 하네요. 오늘도 즐거운 하루되세요. ^^

참조

[1] 티스토리 스킨 가이드, https://tistory.github.io/document-tistory-skin/