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