블로그스팟 나만의 컬러 코딩! 카테고리별로 각기 다른 색상 배지(Label) 지정하는 법

 

카테고리별 맞춤 컬러! 개별 배지(Label) 정밀 설정 가이드

모든 카테고리에 똑같은 색상의 배지를 다는 대신, 주제별로 상징적인 컬러를 지정해 보세요. 독자는 시각적 정보만으로도 어떤 카테고리인지 즉시 인지할 수 있게 됩니다. CSS의 특성 선택자(Attribute Selector)를 활용한 정밀 세팅법입니다.

1단계: 카테고리별 맞춤 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 빨간색은 라벨 이름, 파란색은 각 카테고리의 고유 색상입니다.

/* 공통 배지 스타일 (기본 틀) */ .Label li a::after { font-size: 9px; font-weight: bold; color: #fff; padding: 2px 6px; margin-left: 6px; border-radius: 4px; vertical-align: middle; } /* [카테고리 1] - 구글 정보 (파란색) */ .Label li a[href*="Google"]::after { content: "INFO"; background-color: #4285f4; } /* [카테고리 2] - 맛집 리뷰 (주황색) */ .Label li a[href*="맛집"]::after { content: "HOT"; background-color: #ff9f43; } /* [카테고리 3] - 일상 기록 (초록색) */ .Label li a[href*="일상"]::after { content: "LIFE"; background-color: #2ecc71; }

💡 정밀 설정 꿀팁!
1. 라벨 이름 확인: [href*="..."] 안에 들어갈 글자는 내 블로그 주소창에 나타나는 라벨 경로(영문 또는 한글)와 일치해야 합니다.
2. 무지개 효과: 각 카테고리마다 코드를 한 줄씩 추가하여 무지개색 배지 군단을 만들 수 있습니다.
3. 문구 차별화: 모든 배지에 "NEW"를 넣지 말고, 카테고리 성격에 맞춰 "TIP", "NEW", "MUST" 등으로 나눠보세요.

2단계: 깔끔한 출력을 위한 주의사항

⚠️ 이런 점을 주의하세요!

• 띄어쓰기 주의: 카테고리 이름에 공백이 있다면 %20으로 자동 변환되는 경우가 많습니다. 가급적 한 단어(예: 맛집리뷰)로 설정하는 것이 코딩 시 편리합니다.
• 색상 대비: 배지 배경색이 너무 연하면 흰색 글자가 안 보일 수 있습니다. 그럴 땐 color: #333;으로 글자색을 어둡게 바꿔주세요.
• 모바일 레이아웃: 배지가 너무 길어지면 모바일 사이드바에서 카테고리 이름이 두 줄로 꺾일 수 있으니 문구 길이를 조절하세요.

카테고리마다 개성 넘치는 색을 입혀보셨나요? 블로그가 훨씬 생기 있어졌을 거예요!