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

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

태그는 어디에?

태그 위치

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

접속방법

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

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

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

skin.html 태그 클라우드 페이지 코드

1

• <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 태그 클라우드 페이지 스타일 추가

style.css 태그 클라우드 페이지 스타일

1 2 3 4 5 6 7 8 9 10

.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. 태그 클라우드 페이지 결과 확인

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