티스토리 스킨 만들기 #9 태그 클라우드

태그 클라우드

티스토리 포스팅 할때 태그를 사용하는 경우가 있을 것이다. 태그 클라우드란, 내 블로그에서 사용된 모든 태그를 모아서 보여주는 것으로 태그 클릭의 빈번(?)함을 5등급화 하여 인기있는 태그가 무었인지도 확인 가능하게 해준다.

 

치환자

태그 영역 치환자 목록이다.

<s_tag> 태그 클라우드 그룹치환자

<s_tag_rep> 개별 태그 그룹치환자

태그 URL 값치환자

태그 등급 값치환자

태그 이름 값치환자

 

html 작성

<s_tag>
	<div id='taglog'>
    	<h1 class='tags-title'>Tags</h1>
    	<ul class='tags-list'>
        	<s_tag_rep>
            	<li>
                	<a href='' class=''>
                    
                    </a>
                </li>
            </s_tag_rep>
    	</ul
	</div>
</s_tag>

어려운 부분은 없다

 

css 작성

#taglog .tags-title {
	padding: 10px 20px;
	font-size: 1.875rem;
	background: #aaa;
	color: #fff;
	margin-bottom: 5px;
}

#taglog .tags-list {
	overflow: hidden;
	list-style: none;
	background: #fff;
	padding: 10px;
}

#taglog .tags-list li {
	float: left;
	margin: 5px;
}

#taglog .tags-list li .cloud1 {
	color: #000;
	border: 1px solid #000;
}

#taglog .tags-list li .cloud2 {
	color: #000;
	border: 1px solid #333;
}

#taglog .tags-list li .cloud3 {
	color: #333;
	border: 1px solid #666;
}

#taglog .tags-list li .cloud4 {
	color: #666;
	border: 1px solid #999;
}

#taglog .tags-list li .cloud5 {
	color: #999;
	border: 1px solid #bbb;
}

#taglog .tags-list li a {
	display: block;
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 1.25rem;
	text-decoration: none;
}

#taglog .tags-list li a:hover {
	text-decoration: underline;
	color: #ffa0a0;
	background: #fff0f0;
	border: 1px solid #ffa0a0;
}

추가적으로 생각해 봐야하는 부분은 치환자 중에 가 치환되어 cloud1~cloud5 로 바뀐다는 것인데, 이를 이용하여 비중있는 태그의 색을 달리하여 줄수있다는 점이다.

 

확인

내 블로그는 태그를 자세히 사용하는 편이아니라 몇가지 없지만 ,태그마다 색도 조금 다르게 나오는것 정도는 확인이 가능했다.