클릭을 부르는 메뉴의 한 끗! CSS로 'HOT' & 'NEW' 아이콘 자동 표시하기

 

CSS 가상 요소를 활용한 카테고리 배지(HOT/NEW) 자동 삽입법

방문자에게 특정 카테고리를 강조하고 싶을 때, 매번 이미지를 제작할 필요가 없습니다. CSS의 ::after 기능을 활용하면 텍스트 뒤에 세련된 아이콘을 자동으로 생성할 수 있습니다. 공간 효율은 높이고 클릭률은 극대화하는 방법을 소개합니다.

1단계: 카테고리 배지 CSS 설정

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

아래 코드를 복사해서 붙여넣으세요. 빨간색 부분은 강조하고 싶은 실제 카테고리 이름으로 수정해야 합니다.

/* 1. HOT 배지 적용 (특정 카테고리 뒤에 생성) */ .Label li a[href*="인기글"]::after { content: "HOT"; font-size: 9px; font-weight: bold; color: #fff; background-color: #ff4757; /* 배지 배경색 */ padding: 2px 5px; margin-left: 5px; border-radius: 3px; vertical-align: middle; } /* 2. NEW 배지 적용 (신규 카테고리 뒤에 생성) */ .Label li a[href*="공지사항"]::after { content: "NEW"; font-size: 9px; font-weight: bold; color: #fff; background-color: #4285f4; /* 배지 배경색 */ padding: 2px 5px; margin-left: 5px; border-radius: 3px; vertical-align: middle; }

💡 코드를 내 블로그에 맞추는 법
1. 카테고리 매칭: [href*="이름"] 부분에 실제 내 블로그 카테고리(라벨)의 한글 또는 영문 이름을 정확히 적으세요.
2. 문구 변경: content: "HOT"; 부분을 "인기", "N", "HIT" 등 원하는 문구로 바꿀 수 있습니다.
3. 둥근 효과: border-radius: 10px;로 설정하면 더 동글동글하고 귀여운 배지가 됩니다.

2단계: 주의사항 및 팁

⚠️ 꼭 확인하세요!

• 대소문자 구분: 카테고리 이름이 영문일 경우 대소문자를 정확히 일치시켜야 코드가 작동합니다.
• URL 기준 인식: 이 코드는 카테고리 링크(URL) 주소에 해당 단어가 포함되어 있는지를 찾아서 배지를 붙입니다.
• 중복 방지: 너무 많은 카테고리에 배지를 붙이면 오히려 지저분해 보일 수 있으니 1~2개 핵심 메뉴에만 사용하는 것을 권장합니다.

작은 배지 하나로 방문자의 클릭을 유도해 보세요! 궁금한 점은 댓글로 남겨주세요.