메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

등급 구성요소

마지막 업데이트:

CSS 전용 Tailwind CSS 별표 및 심박수 구성 요소입니다. xs-xl 크기, 별표 1/2개 지원, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

등급 구성 요소를 사용하면 사용자는 제품, 서비스 또는 콘텐츠에 별표 또는 숫자 등급을 지정하여 피드백을 제공할 수 있습니다. 시맨틱 HTML 입력과 대화형 스타일로 구축된 평가는 사용자 만족도와 품질 피드백을 전달합니다. Frutjam 등급 시스템은 다양한 스타일, 색상 및 크기를 지원하므로 제품 리뷰, 사용자 피드백 양식 및 만족도 설문조사에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
rating베이스무선 기반 등급 입력 세트에 대한 컨테이너
rate수정자개별 별표/아이콘 입력 요소
rating-half수정자별표 반개 선택을 활성화합니다.
rating-xs크기매우 작음(1rem 별)
rating-sm크기작음(1.25rem 별)
rating-md크기중간(1.5rem 별, 기본값)
rating-lg크기대형(2rem 별)
rating-xl크기초대형(2.5rem 별)
rate-primary색상기본 테마 색상
rate-secondary색상보조 테마 색상
rate-accent색상악센트 테마 색상
rate-neutral색상중립 테마 색상
rate-info색상정보 의미 색상
rate-success색상성공 의미 색상
rate-warning색상경고 의미 색상
rate-error색상오류 의미 색상

기본 사용법

1
2
3
4
5
6
7
<div class="rating">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rating" class="rate mask mask-star rate-warning" value="5">
</div>

1
2
3
4
5
6
7
<div className="rating">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rating" className="rate mask mask-star rate-warning" value="5">
</div>

평가 형태

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="rating">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="shape-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="1">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="2">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="3" checked>
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="4">
  <input type="radio" name="shape-star2" class="rate mask mask-star-2 rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="3">
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="4" checked>
  <input type="radio" name="shape-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="1">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="2">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="3" checked>
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="4">
  <input type="radio" name="shape-circle" class="rate mask mask-circle rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="3" checked>
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="shape-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="1">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="2">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="3" checked>
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="4">
  <input type="radio" name="shape-squircle" class="rate mask mask-squircle rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="1">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="2">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="3" checked>
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="4">
  <input type="radio" name="shape-hexagon" class="rate mask mask-hexagon rate-success" value="5">
</div>

절반 등급

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="rating rating-half">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="0.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="1.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="2.5" checked>
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="3.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="4.5">
  <input type="radio" name="half-star" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="0.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="1.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="2.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="3.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="4.5">
  <input type="radio" name="half-heart" class="rate mask mask-heart rate-error" value="5">
</div>

<div class="rating rating-half">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="0.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="1.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="2.5" checked>
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="3.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="4.5">
  <input type="radio" name="half-diamond" class="rate mask mask-diamond rate-accent" value="5">
</div>

디스플레이 전용

마지막으로 채워진 항목에 aria-checked="true"를 사용하세요. CSS는 이전 항목을 모두 자동으로 채웁니다.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="rating" aria-label="3 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>

<div class="rating" aria-label="4 out of 5 hearts">
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-heart rate-error" role="radio" aria-checked="false"></div>
</div>

<div class="rating rating-half" aria-label="2.5 out of 5 stars">
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
  <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
</div>

등급 색상

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div class="rating">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="1">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="2">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="3">
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="4" checked>
  <input type="radio" name="rc1" class="rate mask mask-star rate-primary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="1">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="2">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="3" checked>
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="4">
  <input type="radio" name="rc2" class="rate mask mask-star rate-secondary" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="1">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="2">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="3" checked>
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="4">
  <input type="radio" name="rc3" class="rate mask mask-star rate-accent" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="1">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="2">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="3" checked>
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="4">
  <input type="radio" name="rc4" class="rate mask mask-star rate-neutral" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="1">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="2">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="3" checked>
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="4">
  <input type="radio" name="rc5" class="rate mask mask-star rate-info" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="1">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="2">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="3" checked>
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="4">
  <input type="radio" name="rc6" class="rate mask mask-star rate-success" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rc7" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="1">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="2">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="3" checked>
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="4">
  <input type="radio" name="rc8" class="rate mask mask-heart rate-error" value="5">
</div>

등급 크기

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="rating rating-xs">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs1" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-sm">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs2" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-md">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs3" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-lg">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs4" class="rate mask mask-star rate-warning" value="5">
</div>

<div class="rating rating-xl">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="1">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="2">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="3" checked>
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="4">
  <input type="radio" name="rs5" class="rate mask mask-star rate-warning" value="5">
</div>

읽기 전용 등급

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="flex gap-2 items-center">
  <div class="rating rating-sm" aria-label="5 out of 5 stars">
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="false"></div>
    <div class="rate mask mask-star rate-warning" role="radio" aria-checked="true"></div>
  </div>
  <span class="text-sm">5 out of 5</span>
</div>

라벨로 평가

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label>
  <span class="block text-sm font-medium mb-2">Rate your experience</span>
  <div class="rating">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="1">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="2">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="3">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="4">
    <input type="radio" name="experience" class="rate mask mask-star rate-warning" value="5">
  </div>
</label>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 평가 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요