HOT·NEW·SALE·BEST 같은 라벨을 카드·상품·메뉴에 붙이는 CSS 리본 배지를 생성합니다.
🎀 미리보기
상품 카드 예시
리본 배지가 카드에 어떻게 보이는지 미리보기
₩ 29,000

리본 배지 사용법

  1. 스타일(코너·상단·깃발·둥근)을 선택합니다.
  2. 텍스트(HOT·NEW·SALE·BEST 등)를 입력합니다.
  3. 색상·크기·그림자 옵션을 조정합니다.
  4. CSS·HTML 코드를 복사해 본인 사이트에 적용합니다.
  5. 상품 카드·메뉴 항목·블로그 포스트에 강조 효과를 줍니다.

주요 기능

  • 5가지 스타일 (좌상단·우상단·상단 띠·깃발·둥근)
  • 텍스트·색상·크기·굵기·그림자 모두 커스터마이징
  • 대소문자 자동 변환
  • 순수 CSS로 동작 (이미지·JavaScript 불필요)
  • relative position의 부모 요소에 즉시 적용 가능

활용 예시

  • 이커머스 상품 카드 — "할인", "신상품", "베스트셀러" 강조
  • 메뉴 항목 — "추천", "한정 메뉴" 표시
  • 블로그 카테고리 — "인기 글", "신규 포스트"
  • SaaS 가격표 — "추천 플랜", "가장 인기"
  • 이벤트 페이지 - "마감 임박", "오늘만"

리본 배지의 CSS 원리

코너 리본은 부모 요소에 overflow: hidden을 주고 자식 요소를 position: absolute로 모서리 밖에 배치한 뒤 transform: rotate(-45deg)로 회전시켜 만듭니다. 상단 띠는 단순 absolute 배치, 깃발형은 clip-path로 오른쪽 끝을 V자로 자릅니다. 본 도구는 가장 호환성 좋은 방식으로 코드를 생성하므로 모든 모던 브라우저에서 작동합니다.

자주 묻는 질문

리본이 카드 밖으로 잘려요.

부모 요소(카드)에 position: relative; overflow: hidden이 적용되어야 합니다. 본 도구의 HTML 예시에 포함되어 있습니다.

모바일에서도 잘 보이나요?

네. 순수 CSS 기반이라 모든 반응형 환경에서 동작합니다. 다만 카드 크기가 매우 작으면 리본 텍스트가 가려질 수 있어 짧은 단어 사용을 권장합니다.

React·Vue 컴포넌트에서 사용하려면?

CSS를 styled-components나 CSS Module로 옮기고 className을 적용하면 됩니다. HTML 구조는 그대로 JSX에 사용 가능합니다.

IE에서도 동작하나요?

코너·상단·둥근 배지는 IE9+ 지원. clip-path를 쓰는 깃발형은 IE에서 지원되지 않습니다.