[React] svg로 비율 정확한 별점 구현
오늘 실습해 볼 것은 아래와 같습니다. 주어진 데이터는 100점 만점 기준 해당 브랜드의 평균 평점입니다. 아마 93점 이렇게 나오겠죠? 별점은 정말 세세하게 퍼센트로 채워짐을 표현해야합니다. 물론! 이를 구현함에 있어 정말 많은 좋은 방법들이 있습니다. 처음 떠올렸던 방법은 별모양 다섯개를 한 묶음으로 status bar를 제작했던 원리와 비슷하게 overflow hidden으로 채워진 것 과 같은 표현을 주는 것 이었습니다. 그러나 주어진 별모양 파일은 svg였고 새로 만들고 싶지 않았습니다. 전체 웹사이트에 통일된 코드기도 했고요. 때문에 각 별 svg마다의 clip-path를 지정해서 5개로 총 길이를 나누는 방법을 사용하려고 합니다. 별 하나만 있는 샘플 코드는 아래와 같습니다. 보라색을 좋아해..
Basic_Studies/React & Next.js
2022. 7. 13. 14:06
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- dvd 효과
- css marquee
- 자바스크립트
- vscode venv
- 리액트 라우터
- 리액트 컴포넌트
- 파이썬 정렬
- 리액트
- 파이썬 flask
- 카페음료테스트
- 움직이는 글래스모피즘
- 리액트 스크롤
- 리액트 파라미터 넘기기
- 화이팅
- nuxt 공식문서 한글
- react router
- Til
- bs4 크롤링
- 백준 10989 파이썬
- 10989 파이썬
- 글래스모피즘 애니메이션 구현
- NextJS
- nextjs 스크롤
- 파이썬 크롤링
- nuxt 공식문서
- getserversideprops redirect
- css 글래스모피즘
- next.js 리다이렉트
- nextjs 파라미터 넘기기
- 글래스모피즘 구현
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함