Rating — Hyomin Design System

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/rating.css" />

Live — Interactive

별을 클릭하거나 Tab·방향키로 선택합니다. 별의 왼쪽 절반 클릭 시 0.5점, 오른쪽 절반 클릭 시 1점 단위로 선택됩니다. Space / Enter 키로도 확정할 수 있습니다.

Medium — 클릭하여 평가

0 / 5

Large — 0.5점 단위 반별 지원

0 / 5

States — Readonly

5점 (5/5) — 모두 채움

5.0 (2,048)

3.5점 (3.5/5) — 반별 포함

3.5 (1,284)

1점 (1/5)

1.0 (312)

0점 — 평가 없음

0 (0)

Sizes

Small — 별 16px

4.0 (892)

Medium — 별 20px (default)

4.0 (892)

Large — 별 24px

4.0 (892)

Specs

속성	Small	Medium	Large
Star size	16px	20px	24px
Star gap	spacing-1 (4px)
Gap (stars → text)	spacing-2 (8px)
Star color — filled	yellow-300 (#ffb114)
Star color — empty	gray-200 (#e5e7eb)
Score font	Pretendard Medium 16px / gray-900
Count font	Pretendard Regular 14px / gray-400
Half star	왼쪽 50% yellow-300, 오른쪽 50% gray-200 (linear-gradient)

Code

HTML — Readonly

<!-- 3.5 / 5 (반별 포함) -->
<div class="rating">
	<div class="rating__stars" role="img" aria-label="5점 만점에 3.5점">
		<span class="rating__star rating__star--filled"></span>
		<span class="rating__star rating__star--filled"></span>
		<span class="rating__star rating__star--filled"></span>
		<span class="rating__star rating__star--half"></span>
		<span class="rating__star rating__star--empty"></span>
	</div>
	<span class="rating__score">3.5</span>
	<span class="rating__count">(1,284)</span>
</div>

<!-- Small -->
<div class="rating rating--sm">...</div>

<!-- Large -->
<div class="rating rating--lg">...</div>

HTML — Interactive

<div class="rating rating--interactive" id="my-rating" data-value="0">
	<div class="rating__stars" role="group" aria-label="별점 선택 (최대 5점)">
		<span class="rating__star-wrap" data-index="1" tabindex="0" role="radio" aria-label="1점" aria-checked="false">
			<span class="rating__star rating__star--empty" aria-hidden="true"></span>
		</span>
		<span class="rating__star-wrap" data-index="2" tabindex="-1" role="radio" aria-label="2점" aria-checked="false">
			<span class="rating__star rating__star--empty" aria-hidden="true"></span>
		</span>
		<span class="rating__star-wrap" data-index="3" tabindex="-1" role="radio" aria-label="3점" aria-checked="false">
			<span class="rating__star rating__star--empty" aria-hidden="true"></span>
		</span>
		<span class="rating__star-wrap" data-index="4" tabindex="-1" role="radio" aria-label="4점" aria-checked="false">
			<span class="rating__star rating__star--empty" aria-hidden="true"></span>
		</span>
		<span class="rating__star-wrap" data-index="5" tabindex="-1" role="radio" aria-label="5점" aria-checked="false">
			<span class="rating__star rating__star--empty" aria-hidden="true"></span>
		</span>
	</div>
	<span class="rating__score">0</span>
</div>

JavaScript

/* Rating.init() — interactive 초기화 */
Rating.init('#my-rating', {
	half: true,       // 반별 허용 (기본값 true)
	onChange: function (value) {
		console.log('선택된 점수:', value);
	}
});

Classes

클래스	태그	설명
`.rating`	루트	래퍼 — flex row, align-center, gap 8px
`.rating--sm`	수정자	별 16px
`.rating--lg`	수정자	별 24px
`.rating--interactive`	수정자	클릭·호버 인터랙션 활성화
`.rating__stars`	요소	별 묶음 컨테이너 (flex row, gap 4px)
`.rating__star-wrap`	요소	포커스 래퍼 — interactive 전용. tabindex·role·aria 속성 보유, :focus-visible 빨간 테두리
`.rating__star`	요소	개별 별 시각 요소 — clip-path 5각 별 모양 (aria-hidden)
`.rating__star--filled`	수정자	채워진 별 (yellow-300)
`.rating__star--half`	수정자	반별 (왼쪽 yellow, 오른쪽 gray)
`.rating__star--empty`	수정자	빈 별 (gray-200)
`.rating__score`	요소	점수 텍스트 (Pretendard Medium 16px)
`.rating__count`	요소	리뷰 수 텍스트 (Pretendard Regular 14px, gray-400)