Section 24 - 티스토리 반응형 스킨 만들기 - [사이드바] 태그 클라우드

이번 시간에도 어김없이 사이드바 모듈을 만듭니다.

지난 섹션에서 태그 클라우드 페이지를 만들었는데 그 태그 클라우드를 사이드바에서 뺏다/넣었다 할 수 있게 사이드바 모듈로 만들어보겠습니다.
※ 참고 섹션 : 2017/10/31 - Section 15 - 티스토리 반응형 스킨 만들기 - 태그 클라우드

STEP 1. skin.html 사이드바 태그 클라우드 코드 추가

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

STEP 2. 사이드바에 태그 클라우드 모듈 추가

• 블로그 관리 -> 꾸미기 -> 사이드바 설정

사이드바에 태그 클라우드 모듈 추가

1. "사이드바 태그 클라우드 모듈 코드"를 추가하면 기본 모듈에 "태그 클라우드"가 표시됩니다.
   그 "태그 클라우드" 모듈을 사이드바에 추가합니다.
2. 사이드바 영역에 추가한 후 "변경사항 저장" 버튼을 클릭하여 저장합니다.

※ 위의 사이드바 설정을 완료하면 블로그 화면에서 확인이 가능합니다.

STEP 3. skin.html 사이드바 태그 클라우드 모듈 코드 구조

태그 클라우드 모듈 코드 구조

• "태그 클라우드 페이지"에서 출력 영역 태그 치환자는 <s_tag_rep>이지만 "태그 클라우드 모듈"은 <s_random_tags>에서 반복 출력합니다.
• 하나의 태그에는 링크 , 클래스 (cloud1 ~ cloud5) , 태그 이름 으로 구성되어 있습니다.

STEP 4. style.css 사이드바 태그 클라우드 모듈 스타일 추가

/* tags-box */
.tags-box {}
.tags-box h1 {}
.tags-box ul {margin-top:10px; list-style:none}
.tags-box ul:after {display:block; clear:both; content:''}
.tags-box ul li {float:left; margin:0 0 5px 5px}
.tags-box ul li .cloud1 {color:#ff8149; border:1px solid #ff8149}
.tags-box ul li .cloud2 {color:#000; border:1px solid #000}
.tags-box ul li .cloud3 {color:#333; border:1px solid #333}
.tags-box ul li .cloud4 {color:#999; border:1px solid #999}
.tags-box ul li .cloud5 {color:#bbb; border:1px solid #e5e5e5}
.tags-box ul li a {display:block; padding:2px 6px; border-radius:10px; font-size:0.75em}
.tags-box ul 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}

• "사이드바 달력 모듈"(.calendar) 스타일 아래에 태그 클라우드 스타일을 추가합니다.

STEP 5. 사이드바 태그 클라우드 모듈 중간 결과 확인

중간 결과 짜잔!!
태그가 귀엽게 10개만 노출되었네요 ㅡ/,.ㅡ;;;
쪼잔해 보이기 때문에...태그를 30개까지 노출시키겠습니다!!

STEP 6. 태그 클라우드 사이드바 설정

• 블로그 관리 -> 꾸미기 -> 사이드바 설정

태그 클라우드 사이드바 설정

1. 저는 태그 노출 갯수를 30개로 설정하였습니다. 노출을 원하시는 태그 갯수를 설정하시면 됩니다.
   
2. 태그 정렬을 "임의순 / 이름순" 두개중 하나를 선택하시면 됩니다.
   저는 임의순으로 정렬시킵니다. 그래야 페이지를 새로 로드할때마다 태그들이 섞이기 때문에 블로그가 역동적으로 보이기 때문입니다.
   혼자만의 착각인가요? ㅡ/.,ㅡ;;;
3. "변경사항 저장" 버튼을 클릭하여 "저장"하셔야지 적용됩니다.

STEP 7. 사이드바 태그 클라우드 모듈 최종 결과 확인

사이드바 태그 클라우드 최종 결과

위와 비슷하게 나오셨다면 "태그 클라우드 모듈"도 끝났습니다.
기존 "태그 클라우드 페이지"를 완료하셨다면 치환자가 똑같기 때문에 크게 어렵지 않으실겁니다.

이번 섹션도 고생많으셨습니다.

이제 얼마 안남았습니다.

다음은 "사이드바 링크 모듈"에 대해서 알아보도록 하겠습니다.