본문 바로가기 메뉴 바로가기

주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

검색하기 폼
  • 분류 전체보기 (304)
    • React (40)
    • Vue (22)
    • Javascript (55)
    • Typescript (11)
    • 개념 (84)
      • 2025 학습 (21)
    • HTML (24)
    • Wordpress (10)
    • 아티클 (45)
    • ---------------------------.. (6)
      • 삶, 리뷰 (6)
  • 방명록

star rating (1)
별점 컴포넌트를 만들어보자

react(nextjs), tailwind를 통해 별점 컴포넌트를 만들어보자.  준비물로는 5점짜리 별 5개가 이어진 이미지 2장이 필요한데, 별이 채워진 이미지와 별이 채워지지않은 이미지가 필요하다. (하나의 별만 있다면 크기를 지정하고 반복해서 배경이미지를 repeat 시키면 될 듯하다.) 그 이유는 마우스가 호버될때, 아래 영상과 같이 마우스 커서에 따라 채워진 이미지를 보여주기 위함이다. 컴포넌트 코드'use client';import clsx from 'clsx';import React, { useState } from 'react';interface Props { value?: number; onChange?: (radio: number) => void; width?: num..

React 2024. 12. 23. 07:49
이전 1 다음
이전 다음
최근에 올라온 글
최근에 달린 댓글
«   2025/05   »
일 월 화 수 목 금 토
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
Total
Today
Yesterday

Blog is powered by Tistory / Designed by Tistory

티스토리툴바