[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
- 파이썬 flask
- 리액트 컴포넌트
- 화이팅
- nextjs 파라미터 넘기기
- 움직이는 글래스모피즘
- 백준 10989 파이썬
- bs4 크롤링
- 리액트 라우터
- next.js 리다이렉트
- Til
- 자바스크립트
- getserversideprops redirect
- 리액트 스크롤
- 글래스모피즘 애니메이션 구현
- css marquee
- NextJS
- vscode venv
- 카페음료테스트
- dvd 효과
- 파이썬 정렬
- css 글래스모피즘
- 리액트 파라미터 넘기기
- react router
- 파이썬 크롤링
- nuxt 공식문서 한글
- 10989 파이썬
- 리액트
- nuxt 공식문서
- 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 |
글 보관함