[Portfolio 스킨] 10. 태그 클라우드 디자인 수정 방법: 테두리 변경, 호버 효과 설정, 태그 색상 지정

 

😢 못생긴 티스토리 태크 클라우드

 

포트폴리오 스킨은 레터 스킨과는 다르게 태그 클라우드의 태그가 이미 박스로 쌓여있다.

그래서 내가 안건들여도 되는 줄 알았는데 왠걸?

호버했을 때 색이 왜 뜬금없이 파란색인걸까?

핑크 테마인데...

그래서 색을 바꾸고 박스 테두리도 조금 둥글게 바꿨다.

 

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

첫번째, 태그 테두리를 둥글게 수정하기

두번째, 태그 호버 시 색상 수정하기

 

 

 

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

 

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

✔ 포트폴리오 스킨의 태그 클라우드는 css의 .tag_zone 부분이다.

 

 

 

📌 태그 테두리 & 호버 효과

📝 코드 설명

border-radius: 10px → 테두리를 둥글게 만들 수 있다. 원하는 값을 입력하면 된다.

border: solid 1px #FF90BC → 테두리 모양 지정(solid : 실선, 1px : 두께)

color: #FF90BC → 글자 색상 지정

 

 

💻 적용 코드

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

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

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

 

 

👀 적용 모습

 

 

 

📍 참고

자주 사용한 태그별로 색을 입힐 수 있다.

 

.tag_zone .cloud1 {
  color: #fff;
  background-color: #8ACDD7;
  border: 1px solid #8ACDD7;
}

.tag_zone .cloud2 {
  color: #fff;
  background-color: #db91b3;
  border: 1px solid #db91b3;
}

.tag_zone .cloud3 {
  color: #fff;
  background-color: #91b170;
  border: 1px solid #91b170;
}

.tag_zone .cloud4 {
  color: #fff;
  background-color: #ffbe7f;
  border: 1px solid #ffbe7f;
}

.tag_zone .cloud5 {
  color: #fff;
  background-color: #ddd7c6;
  border: 1px solid #ddd7c6;
}

<참고 : 누구야님>

 

 

💾 기존 코드

.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;
}