블로그 포스트 카테고리 태그 모음집 생성기
카테고리 태그/배지(Badge) UI를 마우스 호버 효과와 함께 시각적으로 디자인하고 HTML/CSS 코드 추출
티스토리, 워드프레스 등 블로그 스킨을 꾸밀 때 게시글에 달라붙는 카테고리 태그(Tag)나 배지(Badge)의 디자인을 눈으로 확인하며 커스텀하고, 마우스 호버 효과(크기 확대, 색상 반전 등)가 포함된 CSS 코드를 손쉽게 얻을 수 있는 빌더입니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 태그에 표시할 기본 텍스트와 원하는 클래스 이름을 지정합니다.
- 태그의 배경색, 글자색, 테두리, 모서리 둥글기 및 여백(Padding)을 섬세하게 조절합니다.
- 마우스가 올라갔을 때 작동할 호버 효과를 설정한 후, 완성된 실시간 배지 작동 테스트를 해보고 HTML/CSS 코드를 복사합니다.
자주 묻는 질문
- 추출된 CSS 코드는 어디에 넣나요?
- 블로그 스킨 설정 메뉴나 스타일시트 파일(`style.css`)의 맨 밑에 생성된 CSS 코드를 붙여넣으신 다음, 스킨 편집기 HTML 영역의 원하는 곳에 해당 클래스명을 갖는 HTML 코드를 추가해 주시면 디자인이 바로 적용됩니다.
- 여러 개의 태그를 서로 다른 색상으로 한 번에 만들 수 있나요?
- 한 번에 만드는 것은 기본 스타일 1개이지만, 색상만 다르게 여러 번 생성해 클래스 이름을 각각 다르게 지정하면 카테고리별로 색이 다른 태그 여러 종을 손쉽게 모아 쓸 수 있습니다.
- 여러 개의 태그를 서로 다른 색상으로 한 번에 만들 수 있나요?
- 한 번에 만드는 것은 기본 스타일 1개이지만, 색상만 다르게 여러 번 생성해 클래스 이름을 각각 다르게 지정하면 카테고리별로 색이 다른 태그 여러 종을 손쉽게 모아 쓸 수 있습니다.