다양한 패딩 두께를 가진 태그 구름

종종 "태그 클라우드"는 과도한 사용과 가벼운 사용 태그를 구별하기 위해 글꼴 크기와 글꼴 가중치의 변화를 사용한다. 여기 또 다른 접근법이 있다: 다양한 양의 패딩을 통해 크기가 다른 롤오버 박스를 사용한다.

다음과 같이 CSS에서 다양한 크기를 클래스로 설정할 수 있습니다.

ul {
   margin-top: 50px;
   list-style-type: none;
}

li {
   float: left;
}

ul li a {
   text-decoration: none;
   line-height: 2.3em;
}

ul li a.size1 {
   color: #666;
   padding: 2px;
}
 ul li a.size1:hover {
     background-color: #999;
     color: white;
 }

ul li a.size2 {
   color: #912600;
   padding: 12px;
}
 ul li a.size2:hover {
     background-color: #cc3500;
     color: white;
 }

ul li a.size3 {
   color: #877900;
   padding: 18px;
}
 ul li a.size3:hover {
     background-color: #d8c100;
     color: white;
 }

ul li a.size4 {
   color: #1d6c01;
   padding: 8px;
}
 ul li a.size4:hover {
     background-color: #2daf00;
     color: white;
 }
ul li a.size5 {
   color: #004e6b;
   padding: 6px;
}
 ul li a.size5:hover {
     background-color: #007ead;
     color: white;
 }

ul li a.size6 {
   color: #430069;
   padding: 24px;
}
 ul li a.size6:hover {
     background-color: #7600b9;
     color: white;
 }

그런 다음 다음과 같이 정렬되지 않은 목록의 앵커 요소에 클래스를 적용합니다.

<ul>
   <li><a class="size1" href=#">adobe</a></li>
 <li><a class="size2" href=#">animation</a></li>
 <li><a class="size3" href=#">arts</a></li>
 <li><a class="size4" href=#">bizarre</a></li>
 <li><a class="size5" href=#">blogs</a></li>
 <li><a class="size6" href=#">books</a></li>
 ...etc
</ul>

[라이브 예시]