[티스토리 블로그 스킨 제작 가이드 강의 13] 태그 클라우드

안녕하세요

이번 시간에는 콘텐츠에 대해서 잠시 다루고 태그 클라우드를 구현해보겠습니다.

콘텐츠는 헤더나 사이드바와 다르게 현재 주소에 따라 보여주는 화면이 달라집니다.

예를 들어, 전체 글을 클릭해보겠습니다.

그러면 중간에 메인 화면이 바뀌면서 전체 글 목록이 나오는데요.

이 때 주소창을 보시면 블로그 주소 뒤에 /category 라는 글자가 추가되어 있습니다.

/ 전까지의 주소가 집이라면 / 뒤에 있는 것은 집 안에 세부 위치라고 보시면 되는데요.

글 목록 중에 하나를 선택하면 이렇게 글 목록 화면이 글 내용으로 바뀝니다. 그리고 주소를 보시면 /39로 바뀌어있는데 39번 째 글이라는 뜻이죠.

이번에는 공지사항 맨 위 에 있는 글을 클릭해볼게요. /notice/43 으로 바뀝니다. 공지사항의 43번째 글로 이동한 것입니다.

이런 식으로 티스토리 블로그 안에는 여러가지 주소들이 들어있습니다. 나열하자면 다음과 같은 것들이 있는데요.

이 주소에 따라 메인에서 보여주는 내용들이 달라집니다. 이것이 어떻게 달라지게 하는거냐면 특정 태그를 나타나거나 사라지게 하는겁니다.

예를 들어, 공지사항 글에 들어왔다면 공지사항 관련된 태그들만 보여주고 나머지는 사라지게 하는거죠!

만들어보면서 알게 되겠지만, 한번 페이지를 돌아다니며 주소가 어떻게 바뀌는지 한번 보시면 이해가 좀 더 잘 되실거에요.

태그 클라우드

이제 콘텐츠 중에 하나인 태그 클라우드를 구현해보겠습니다. 이전에 사이드바에 있는 랜덤태그로 태그들이 나오게 구현한 적이 있었는데요.

다른 점은 모든 태그를 다 볼 수 있다는 것과 태그 페이지로 이동해야만 볼 수 있다는 겁니다.

북클럽 스킨에서 블로그 주소 뒤에 /tag를 적어보겠습니다.

그러면 이렇게 모든 태그들이 쭈욱 나오는데요. 이것이 바로 태그 클라우드입니다.

이전에 잠시 다뤘지만 태그 클라우드라고 부르는 이유는 검색해보면 알 수 있습니다. 태그들을 구름처럼 뭉쳐놓은 형태를 가지고 있기 때문입니다. 우리는 이 정도로 복잡하게 구현하지는 않고 북클럽 스킨처럼 만들겠습니다.

태그 클라우드 구현

콘텐츠에 있는 태그 클라우드를 클릭해보시면 값 치환자는 랜덤태그와 똑같은 이름을 가지고 있습니다.

다른 점은 <s_tag>라는 그룹치환자를 사용한다는 것과 <s_random_tags> 대신 <s_tag_rep> 라는 치환자로 여러 개의 태그를 만든다는 겁니다.

<s_tag> 치환자는 안에 있는 태그들이 /tag라는 주소에 있을 때에만 나타나도록 해줍니다.

스킨 편집페이지로 이동해서 이 치환자를 추가하고 아래에 글자를 넣어볼게요.

그 전에 코드가 꽤 많아져서 일부 코드를 접어보겠습니다. 접는 방법은 코드의 숫자들 근처에 마우스를 가져다 대시면 이렇게 아랫 방향의 화살표가 나오는데요. 이걸 클릭해주시면 됩니다.

저는 header와 aside 태그를 접어보겠습니다. 그러면 훨씬 간단하게 보이죠? 코드가 삭제된 게 아니라 잠시 가려진 것 뿐입니다.

네 이제 <main> 태그 안에 <s_tag> 치환자를 넣어보겠습니다.

      <!-- ... -->
<main>
  <s_tag>
    <h1>안녕하세요</h1>
  </s_tag>
</main>
<!-- ... -->
    

적용하고 새로고침을 하면 아무것도 나타나지 않는데요. 상단에 있는 홈을 클릭해보세요.

그러면 페이지 목록이 나타나는데 태그를 클릭합니다.

그러면 안녕하세요라는 글자가 나타나요! 즉, 태그 페이지로 이동해야만 <s_tag> 치환자 안의 태그들을 볼 수 있는거죠!

이번에는 블로그에서 한 번 개발자 도구로 같이 보겠습니다. 블로그 주소가 홈일 때에는 아무것도 나타나지 않는데요.

태그를 클릭해서 이동해보면 이렇게 <h1>안녕하세요</h1> 라는 내용이 나타나게 됩니다. 주소도 바뀌었구요!

이런 식으로 페이지마다 다른 내용을 보여준다고 보시면 됩니다. 이제 다시 스킨 가이드로 돌아가서 예시를 복사하겠습니다.

      <s_tag>
  <div class="taglog">
    <h3>태그</h3>
    <ul>
      <s_tag_rep>
        <li>
          <a href="[##_tag_link_##]" class="[##_tag_class_##]"
            >[##_tag_name_##]</a
          >
        </li>
      </s_tag_rep>
    </ul>
  </div>
</s_tag>

    

이게 어떤 식으로 변환되는지 아래에 나오는데 이미 우리는 잘 알고 있죠?

스킨 편집페이지로 돌아와서 붙여넣습니다.

적용하고 새로고침을 하면 이렇게 태그들이 나타나요.

스타일 꾸미기

이제 스타일을 꾸며보겠습니다. 스킨 가이드를 보시면 제목 글자가 현재보다 조금 더 작고 아래에 밑줄이 있는데요. 그대로 구현해보겠습니다.

      .taglog h3 {
  font-size: 16px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  color: #444;
}
    

네 그러면 이렇게 아래에 밑줄이 생겼죠?

이제 태그들도 꾸며보겠습니다. 배치를 flex로 해서 아이템들이 가로로 넘어가면 아래로 내려가게 할게요. 간격도 좀 주겠습니다.

      .taglog ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;
}
    

마지막으로 태그들도 꾸며볼게요. 글자색도 연하게해서 좀 더 작게 하고, 옅은 테두리를 넣을게요. 그리고 테두리를 둥글게 하고 글자와 테두리간에 간격이 좀 있게 하겠습니다.

      .taglog li {
  color: #666;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 4px 12px;
}
    

네 그러면 이렇게 태그 클라우드가 완성되었습니다.

감사합니다.