[Portfolio 스킨] 22. 티스토리 태그 클라우드 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정

 

😢 단조롭고 못생긴 티스토리 태그 클라우드, 어떻게 이쁘게 만들지?

 

태그가 박스에 쌓여있으니 뭔가 답답해보이고 심심하다.

기존에 수정할 땐 그래도 이뻐보였던 것 같은데 질린건가ㅠㅠ

색도 바꿔보고 크기도 바꿔보고 이것저것 시도해 봤는데 마음에 안 든다.

무엇보다 태그 목록만 왼쪽 정렬인 게 진짜 진짜 별로다!!!

 

✨ 태그 클라우드 스타일 개선하기: 해결해야 할 3가지 문제

첫 번째, 태그 사용 빈도별 크기 & 색상 지정하기

두 번째, 태그 목록 가운데 정렬하기

세 번째, 태그 랜덤 정렬하기

 

💡 추가 정보 : 테두리 모양이나 빈도별 태그 컬러를 수정하고 싶다면, 아래 링크에서 방법을 확인할 수 있다.

🔗[Info🔍/HTML&CSS] - [Portfolio 스킨] 10. 태그 클라우드 꾸미기

 

 

 

🔧 포트폴리오 스킨 수정하기

✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 또는 HTML 화면으로 들어가면 된다.

✔ 포트폴리오 스킨의 본문 태그는 css의 .area_common .tag_zone 부분이다.

기존 css를 보면 .area_common .tag_zone이 없고 .tag_zone만 나온다.

.area_common 없이 .tag_zone만 수정해도 되지만, 이 경우 검색창을 눌렀을 때 나오는 팝업창이 있는데 이 부분의 태그도 같이 수정되기 때문에 따로 지정해야 별도로 꾸밀 수 있다.

 

 

📌 태그 사용 빈도별 크기 & 색상 지정하기

📝 코드 설명

👉 CSS 코드

color: #D12626 → 폰트 컬러 지정

font-size: 2.5em → 폰트 사이즈 지정

 

단위 em은 비율을 의미, 즉 2.5배 크게 지정.

 

 

💻 적용 코드

👉 CSS의 적당한 위치에 아래 코드를 입력한다.

.area_common .tag_zone .cloud1 {
  color: #D12626;
  font-size: 2.5em;
}

.area_common .tag_zone .cloud2 {
  color: #267BD1;
  font-size: 2.0em;
}

.area_common .tag_zone .cloud3 {
  color: #62A71E;
  font-size: 1.6em;
}

.area_common .tag_zone .cloud4 {
  color: #AE8E6E;
  font-size: 1.2em;
}

.area_common .tag_zone .cloud5 {
  color: #B5B5B5;
  font-size: 0.9em;
}

 

 

👀 적용 모습

사용 빈도별로 글자색과 크기를 변경했다.

 

 

 

📌 태그 목록 가운데 정렬하기

📝 코드 설명

👉 CSS 코드

text-align: center → 태그(<a> 요소들) 가운데 정렬

 

 

💻 적용 코드

👉 CSS의 적당한 위치에 아래 코드를 입력한다.

.area_common .tag_zone {
  text-align: center;
}

 

 

👀 적용 모습

태그들이 가운데 정렬된 걸 확인할 수 있다.

 

 

📌 태그 랜덤 정렬하기

📝 코드 설명

방법 1은 본문의 태그랑 같이 묶어서 랜덤으로 출력하는 방법이다.

랜덤으로 섞는 방법이 비슷해서 하나로 묶었다.

 

👉 JavaScript

(1) 웹페이지가 로드된 후에 JavaScript 실행

document.addEventListener("DOMContentLoaded", function () {

✔ DOMContentLoaded : 이미지, CSS, iframe 같은 리소스가 아직 로드되지 않아도 HTML 문서가 로드되면 즉시 실행

✔ window.onload : HTML + CSS + 이미지 + iframe 같은 모든 리소스가 다 로드된 후 실행

 

(2) 태그 정렬을 랜덤으로 섞는 함수

function shuffleTags(selector) {

 

💡 함수 속 코드 설명은 아래 링크에서 확인할 수 있다.

[Info🔍/HTML&CSS] - [Portfolio 스킨] 19. 티스토리 본문 태그 디자인 변경 방법: 랜덤 정렬, 간격 조정, 정렬 수정

 

(3) 태그 클라우드와 본문의 태그를 랜덤 정렬

shuffleTags(".area_common .tag_zone"); // ①
shuffleTags(".area_tag .tag_content"); // ②

① 태그 클라우드의 태그 랜덤 정렬

② 본문의 태그 랜덤 정렬

 

 

728x90

💻 적용 코드

👉 HTML의 </body> 위에 아래 코드를 입력한다.

<script>
document.addEventListener("DOMContentLoaded", function () {
  function shuffleTags(selector) {
    let tagContainer = document.querySelector(selector);
    if (!tagContainer) return;

    let tags = Array.from(tagContainer.children);

    for (let i = tags.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [tags[i], tags[j]] = [tags[j], tags[i]];
    }

    tagContainer.innerHTML = "";
    tags.forEach(tag => tagContainer.appendChild(tag));
  }

  shuffleTags(".area_common .tag_zone");
  shuffleTags(".area_tag .tag_content");
});
</script>

 

 

 

👀 적용 모습

태그 클라우드와 본문 태그

태그가 새로고침마다 랜덤위치로 출력된다.

 

 

 

💾 기존 코드

.area_popup .tag_zone {
  display: inline-block;
  width: 50%;
  padding-right: 50px;
  min-height: 150px;
  box-sizing: border-box;
  vertical-align: top;
}


.tag_zone a {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: solid 1px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  color: #333;
  text-decoration: none;
}

.tag_zone a:hover {
  border: solid 1px #4167d9;
  color: #4167d9;
}