Section 15 - 티스토리 반응형 스킨 만들기 - 태그 클라우드

이번 섹션은 태그 클라우드 페이지를 작업합니다.
태그는 글 작성시에 글에 관련된 태그를 넣는데 이 태그들을 한번에 모아서 볼 수 있는 페이지를 태그 클라우드 페이지라고 합니다.
태그 페이지, 태그 클라우드 페이지, 태그 모음 등등 편하신대로 쓰면 됩니다.
블로그의 성격이나 관심사를 쉽게 알려면 방문한 블로그의 태그 클라우드를 보면 한눈에 파악할 수 있습니다.

태그는 어디에?

태그 위치

태그는 위와 같이 블로그 포스트 하단부에 표시됩니다. 저 태그들이 모두 모인 페이지가 "태그 클라우드 페이지" 입니다.

접속방법

※ 태그 페이지로 접속하는 방법은 http://자신의블로그주소/tag 라고 입력하면 접속이 가능합니다.
※ tistory-one 스킨은 우측 상단에 태그 링크를 누르면 이동이 가능합니다.

이번 섹션부터는 소스가 길지 않으니 바로 태그 클라우드 페이지 작업 시작!!

STEP 1. skin.html 태그 클라우드 페이지 코드 추가

• <s_tag></s_tag> : 태그 클라우드 페이지 출력 영역 지정
• <s_tag_rep></s_tag_rep> : 태그가 반복해서 출력되는 영역 지정
• : 개별 Tag 들에 관련된 글을 출력하기 위한 URL 
• : Tag Cloud 의 크기나 색깔을 설정할 수 있도록 해줍니다. 총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다.
  1. cloud1 : 많이 사용한 태그의 클래스
  2. cloud2
  3. cloud3
  4. cloud4
  5. cloud5 : 적게 사용한 태그의 클래스
• : 태그의 이름

태그 클라우드 코드 구조

• 지낙 섹션에서 작업했던 방명록 소스 아래에 태그 클라우드 페이지 코드를 추가합니다.
• <s_tag>는 태그 페이지가 출력될 영역지만 <s_tag_rep>은 태그들이 반복되어 출력되어 지는 영역입니다.
• 하나의 태그에는 링크 , 클래스 (cloud1 ~ cloud5) , 태그 이름 으로 구성되어 있습니다.

STEP 2. style.css 태그 클라우드 페이지 스타일 추가

.tags-title {padding:10px 20px; font-weight:normal; font-size:1.5em; background:#2d2d2d; color:#fff}
.tags-list {overflow:hidden; margin-top:30px; list-style:none}
.tags-list li {float:left; margin:0 0 10px 10px}
.tags-list li .cloud1 {color:#ff8149; border:1px solid #ff8149}
.tags-list li .cloud2 {color:#000; border:1px solid #000}
.tags-list li .cloud3 {color:#333; border:1px solid #333}
.tags-list li .cloud4 {color:#999; border:1px solid #999}
.tags-list li .cloud5 {color:#bbb; border:1px solid #e5e5e5}
.tags-list li a {display:block; padding:7px 14px; border-radius:15px; font-size:0.875em}
.tags-list li a:hover, .tags-list li a:focus, .tags-list li a:active {color:#fff; background-color:#ff8149; border:1px solid #ff8149; text-decoration:none}

• 태그 사용빈도에 따른 색상 구분을 언제든지 할 수 있게 cloud1 ~ cloud5로 클래스를 미리 지정해놨습니다.

STEP 3. 태그 클라우드 페이지 결과 확인

태그 클라우드 페이지 결과 확인