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