cover

[티스토리 블로그 스킨 제작 가이드 강의 12] 카테고리

categoryCategory
Tistory
tagsTags
Skin
Lecture
calendarCreated
2024-02-17 오전 03:29
calendarUpdated
2024-02-20 오전 08:35

안녕하세요.

이번 시간에는 사이드바에서 카테고리를 구현해보도록 하겠습니다.

loading

카테고리 추가하기

스킨 가이드를 보기전에 Book Club 스킨 처럼 카테고리를 추가해보겠습니다. 그래야 비슷하게 만들어볼 수 있으니까요. 관리페이지로 가서 콘텐츠에 있는 카테고리 관리를 클릭합니다.

loading

최근글과 인기글에서 이미 카테고리를 만들어서 적용해보셨을텐데요. 저도 이런 식으로 몇 개 만들어놨었습니다.

loading

이제 이 카테고리 이름들을 Book Club 스킨과 똑같이 만들어보도록 하겠습니다. 마우스를 가져다 대면 옵션이 나오는데 수정을 클릭하면 이름을 바꿀 수 있어요.

loading

이름을 입력하고 확인을 클릭하면 변경이 됩니다.

loading

이런 식으로 카테고리를 동일하게 만들어줄게요. 카테고리를 새로 추가하려면 카테고리 추가를 클릭하면 됩니다.

loading

이제 서브 카테고리를 만들어보겠습니다. 카테고리에 마우스를 다시 가져다대보면 추가라는 버튼이 있습니다. 이걸 클릭해주시구요.

loading

이름을 입력하고 확인 버튼을 클릭하면 됩니다.

loading

마지막으로 최상단 카테고리 제목을 전체글로 바꾸겠습니다.

loading

변경사항 저장을 클릭해서 저장하겠습니다.

loading

이제 카테고리를 스킨에 추가해보겠습니다.

카테고리 적용하기

사이드바 중에 가장 많이 사용되는 카테고리는 치환자가 딱 두 개밖에 없는데요. 폴더 형식과 리스트 형식, 두 가지가 있습니다.

loading

아래 예시를 복사해서 스킨 편집 페이지에 넣어보겠습니다.

html
      <s_sidebar_element>
  <!-- 카테고리 -->
  <div class="category">
    <h3>카테고리</h3>
    [##_category_##]
  </div>

  <div class="category">
    <h3>카테고리</h3>
    [##_category_list_##]
  </div>
</s_sidebar_element>

적용하고 새로고침을 한 다음 자연스럽게 사이드바 설정으로 가서 카테고리를 옮겨줍니다.

loading

이제 블로그로 이동해서 보면 두 가지 형태의 카테고리가 있는 것을 볼 수 있습니다.

loading

개발자 도구를 통해서 보시면 [##_category_##] 치환자는 <table> 태그를 이용해서 구현되어 있는데요. 적용되어있는 스타일도 많고 table로 스타일을 꾸미기 쉽지 않기 때문에 대부분의 스킨에서는 잘 사용하지 않습니다.

loading

그 다음으로 [##_category_list_##] 치환자는 이름처럼 리스트 태그들을 이용해서 구성하고 있고 좀 더 단순한 형태로 되어있어서 스타일을 꾸미기가 상대적으로 더 쉽습니다.

loading

그래서 우리는 [##_category_list_##] 치환자로 카테고리를 구현해보겠습니다. HTML 편집 페이지로 돌아와서 이전 예시는 지우고 [##_category_list_##]를 추가하겠습니다.

html
      <s_sidebar_element>
  <!-- 카테고리 -->
  [##_category_list_##]
</s_sidebar_element>

적용하고 새로고침을 하면 이렇게 나타나는데요.

loading

이전에 <ul> 태그에서 제거했던 기본 스타일을 다시 살려보겠습니다. 해당 스타일을 개발자도구에서 제거해볼게요.

loading

그러면 이렇게 list를 갖게 되는데요.

loading

다음과 같이 태그와 class를 가지고 있습니다.

loading

그리고 각 list 태그마다 a태그로 또 감싸져 있습니다.

loading

이것들을 감안해서 CSS로 구현을 해보겠습니다.

CSS 구현

CSS 탭으로 이동해서 먼저 recent-notice 에 적용했던 스타일을 가져와서 tt_category class에 적용해보겠습니다.

css
      .tt_category {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

Book Club 스킨을 잘 보시면 카테고리 아래에 얇은 선 테두리가 있습니다. 그래서 아래에 padding과 border를 추가해볼게요.

css
      .tt_category {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;

  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

그리고 전체글 부분만 글자를 굵고 진하게 해보겠습니다.

css
      .tt_category .link_tit {
  color: #222;
  font-weight: bold;
}

여기까지해서 적용하고 새로고침을 하면 이렇게 나타나게 되는데요.

loading

그리고 카테고리에 마우스를 가져다 댈 때마다 글자 색이 진해지고 아래에 밑줄이 나타나도록 하겠습니다.

css
      .tt_category a:hover {
  color: #333;
  text-decoration: underline;
}

스킨 편집페이지에선 마우스를 가져다대도 아무 일이 일어나지 않기 때문에 블로그로 가서 봐야합니다. 새로고침을 하고 마우스를 가져다대면 이렇게 색이 진해지고 밑줄이 생깁니다.

loading

이제 다음으로 메인 카테고리들을 수정해볼건데요. 전체글보다는 덜 진하게하고 전체글과 좀 떨어져 있게 하겠습니다. 그리고 각 카테고리간의 간격은 10px이 되도록 할게요.

css
      .tt_category .category_list {
  margin-top: 10px;
  color: #666;
}

.tt_category .category_list > li {
  margin-bottom: 10px;
}

적용하고 새로고침을 하면 이렇게 적절하게 떨어져 있게 되는데요. 마지막으로 세부 카테고리들도 수정해보겠습니다.

loading

세부 카테고리 왼쪽에 border를 추가하고 border와의 간격이 좀 떨어져 있게 하겠습니다.

css
      .tt_category .sub_category_list {
  border-left: 2px solid #ddd;
  padding-left: 10px;
}

그리고 메인 카테고리와의 간격도 좀 떨어져 있게 하고, 각 리스트의 간격을 4px 정도로 넣은 다음 색상을 많이 연하게 할게요.

css
      .tt_category .sub_category_list {
  border-left: 2px solid #ddd;
  padding-left: 10px;
  margin-top: 10px;
}

.tt_category .sub_category_list li {
  margin-bottom: 4px;
  color: #aaa;
}

적용하고 새로고침을 하면 이렇게 카테고리가 완성되었습니다.

loading

이런 식으로 만들어서 스타일을 적용해주시면 됩니다.

카테고리 설정

마지막으로 카테고리 설정하는 방법에 대해 알아볼게요. 카테고리도 사이드바에 있는 거지만 카테고리 관리에서 별도로 설정을 합니다.

첫 번째는 말 그대로 글자수를 정할 수 있으며, 두 번째는 카테고리에 해당하는 글 개수를 옆에 표시할지 여부를 결정할 수 있습니다.

마지막 세 번째는 해당하는 카테고리에 새로운 글이 나오면 N이라는 이미지가 나타나는데 직접 설정해서 보는게 좀 더 이해가 잘되겠죠? 모두 표시합니다라고 설정한 다음 변경사항 저장을 클릭해주세요.

loading

블로그에 돌아와서 새로고침을 하면 이렇게 새로운 글 표시와 몇 개의 글이 들어가있는지 나타나게 됩니다.

loading

개발자 도구를 통해서 보시면 c_cnt라는 class가 들어간 <span> 태그에는 글 개수가 들어 있고, 새로운 글 표시는 <img> 태그로 하고 있습니다.

네 이렇게 해서 카테고리를 다뤄보았습니다. 카테고리 설정은 원래대로 되돌리고 마무리하겠습니다.

감사합니다.

전체코드

html
      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <s_t3>
      <div class="container">
        <header>
          <div class="top">
            <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
            <s_search>
              <div class="search">
                <input
                  name="[##_search_name_##]"
                  value="[##_search_text_##]"
                  placeholder="검색내용을 입력하세요."
                  onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
                />
                <button onclick="[##_search_onclick_submit_##]">
                  <img src="./images/search.svg" />
                </button>
              </div>
            </s_search>
            [##_blog_image_##]
          </div>
          [##_blog_menu_##]
        </header>
        <div class="wrapper">
          <main></main>
          <aside>
            <s_sidebar>
              <s_sidebar_element>
                <!-- 방문자 수 -->
                <div class="counter">
                  <div class="total">
                    <div>전체 방문자</div>
                    <div>[##_count_total_##]</div>
                  </div>
                  <div class="today">Total : [##_count_today_##]</div>
                  <div class="yesterday">
                    Yesterday : [##_count_yesterday_##]
                  </div>
                </div>
              </s_sidebar_element>
              <s_sidebar_element>
                <!-- 태그 클라우드 -->
                <div class="tagbox">
                  <h3>태그</h3>
                  <s_random_tags>
                    <a href="[##_tag_link_##]" class="[##_tag_class_##]"
                      >[##_tag_name_##]</a
                    >,
                  </s_random_tags>
                </div>
              </s_sidebar_element>
              <s_sidebar_element>
                <!-- 최근 댓글 -->
                <div class="recent-reply">
                  <h3>최근댓글</h3>
                  <ul>
                    <s_rctrp_rep>
                      <li>
                        <a href="[##_rctrp_rep_link_##]"
                          >[##_rctrp_rep_desc_##]</a
                        >
                      </li>
                    </s_rctrp_rep>
                  </ul>
                </div>
              </s_sidebar_element>
              
              <s_sidebar_element>
                <!-- 최근에 올라온 글 -->
                <div class="recent-posts">
                  <h3>최근글</h3>
                  <s_rctps_rep>
                    <a class="item" href="[##_rctps_rep_link_##]">
                      <div class="text">
                        <h4>[##_rctps_rep_title_##]</h4>
                        <p>[##_rctps_rep_simple_date_##]</p>
                      </div>
                      <s_rctps_rep_thumbnail>
                        <img src="[##_rctps_rep_thumbnail_##]" />
                      </s_rctps_rep_thumbnail>
                    </a>
                  </s_rctps_rep>
                </div>
              </s_sidebar_element>

              <s_sidebar_element>
                <!-- 인기글 -->
                <div class="recent-posts">
                  <h3>인기글</h3>
                  <s_rctps_popular_rep>
                    <a class="item" href="[##_rctps_rep_link_##]">
                      <div class="text">
                        <h4>[##_rctps_rep_title_##]</h4>
                        <p>[##_rctps_rep_simple_date_##]</p>
                      </div>
                      <s_rctps_rep_thumbnail>
                        <img src="[##_rctps_rep_thumbnail_##]" />
                      </s_rctps_rep_thumbnail>
                    </a>
                  </s_rctps_popular_rep>
                </div>
              </s_sidebar_element>

              <s_sidebar_element>
                <!-- 공지사항 -->
                <div class="recent-notice"> 
                  <h3>공지사항</h3>
                  <ul>
                    <s_rct_notice_rep>
                      <li>
                        <a href="[##_rctps_rep_link_##]">[##_rctps_rep_title_##]</a>
                      </li>
                    </s_rct_notice_rep>
                  </ul>
                </div>
              </s_sidebar_element>
              <s_sidebar_element>
                <!-- 카테고리 -->
                [##_category_list_##]
              </s_sidebar_element>

            </s_sidebar>
          </aside>
        </div>
      </div>
    </s_t3>
  </body>
</html>
css
      a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style-type: none;
  padding: 0;
}

button {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

header {
  max-width: 1080px;
  margin: 0 auto;
}

header .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 0;
}

header .top > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 10px;
}

header .title {
  font-size: 30px;
  margin-right: auto;
}

header ul {
  display: flex;
}

header ul li {
  padding: 0 30px;
}

header ul a {
  padding: 20px 0;
  color: #666;
  border-bottom: 5px solid transparent;
  transition: all 0.3s;
}

header ul a:hover {
  color: black;
  border-color: black;
}

.search {
  width: 200px;
  height: 30px;
  position: relative;
}

.search input {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 0 33px 0 10px;
  box-sizing: border-box;
}

.search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 20px;
  height: 20px;
}

.search img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.wrapper {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
}

main {
  flex: 1;
  padding-top: 60px;
  padding-right: 40px;
}

aside {
  width: 230px;
  padding: 60px 40px;
  border-left: 1px solid #eee;
}

aside h3 {
  color: #666;
}

.counter .total div:nth-child(1) {
  font-size: 16px;
}

.counter .total div:nth-child(2) {
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 2px;
}

.counter .today,
.counter .yesterday {
  color: gray;
}

.tagbox {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.tagbox h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-reply {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-reply h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-posts {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-posts h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.recent-posts .item {
  display: flex;
  height: 60px;
  margin-bottom: 15px;
}

.recent-posts .item img {
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.recent-posts .item .text {
  margin-right: 25px;
}

.recent-posts .item h4 {
  font-size: 13px;
  font-weight: normal;
  margin-top: 3px;
  margin-bottom: 0;
}

.recent-posts .item p {
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.recent-notice {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-notice h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

.tt_category {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.tt_category a:hover {
  color: #333;
  text-decoration: underline;
}

.tt_category .link_tit {
  color: #666;
  font-weight: bold;
}

.tt_category .category_list {
  margin-top: 10px;
  color: #666;
}

.tt_category .category_list > li {
  margin-bottom: 10px;
}

.tt_category .sub_category_list {
  border-left: 2px solid #ddd;
  padding-left: 10px;
  margin-top: 10px;
}

.tt_category .sub_category_list li {
  margin-bottom: 4px;
  color: #aaa;
}