Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Hook
- HTML
- 클론코딩
- 느낀 점
- javascript
- Nomad
- Nomad coder
- Nicolas
- 프로젝트
- 계획
- CSS
- TiMER
- react-native
- Firebase
- Project
- 바닐라 자바스크립트
- coding
- react-hook
- Clone
- Vanilla
- 자바스크립트
- expo
- github
- vanilla js
- Netflix
- react
- scflix
- 마무리
- 오류
- 코코아톡
Archives
- Today
- Total
꾸매코딩
[React] 동적인 타이머 만들기 React에서 FontAwesome 아이콘 사용/ 기본 배치 CSS 본문
Project/Timer Project
[React] 동적인 타이머 만들기 React에서 FontAwesome 아이콘 사용/ 기본 배치 CSS
꾸매코더 2021. 7. 11. 13:41반응형
최종 결과
기존 타이머에 약간의 CSS를 적용시켰다. 아이콘은 FontAwesome에서 가져와 사용하였다.
React에서 Font Awesome 사용 - 오류
JSX상에서 기존 HTML처럼 Font Awesome의 CDN키를 적용하니 아래와 같은 오류가 발생하였다.
Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`?
→ JSX는 CamelCase를 사용하기 때문에 위와 같은 오류가 나온다고 생각한다.
관련 패키지 설치
Font Awesome의 SVG 기반 아이콘 활성화시키기 위한 패키지
npm i @fortawesome/fontawesome-svg-core
Font Awesome에서 제공되는 Solid, Regular, Light, Brands 카테고리에 대한 패키지중 선택하여 설치
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-brands-svg-icons
...
Font Awesome을 React 컴포넌트 형태로 사용할 수 있도록 해주는 패키지
npm i @fortawesome/react-fontawesome
Font Awesome 아이콘 임포트
@fortawesome/react-fontawesome 패키지를 사용하기 때문에
import { faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import 한 아이콘을 icon props 형식으로 전달
<FontAwesomeIcon icon={faPlay} />
<FontAwesomeIcon icon={faPause} />
<FontAwesomeIcon icon={faStop} />
결과
Font Awesome을 이용하여 시작, 정지, 리셋 버튼에 아이콘을 추가해주었다.
CSS로 타이머를 배치와 약간의 애니메이션 효과를 주었다.
body {
padding: 0;
margin: 0;
}
.timer-box {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
width: 100%;
}
.timer {
font-size: 60px;
margin-bottom: 30px;
}
.timer-form__Btn {
display: flex;
justify-content: center;
text-align: center;
padding-bottom: 25px;
}
.timerBtn {
height: 30px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.timerBtn i {
font-size: 22px;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.timerBtn i:active,
.timerBtn i:hover {
font-size: 30px;
}
반응형