반응형
✅ flex
display: flex;
// 세로로 정렬
flex-direction: column;
// 가로로 정렬
flex-direction: row;
// 진행방향 기준 정렬
justify-content: flex-start // default
justify-content: flex-end
justify-content: center;
// 아이템 사이 공간 제어
justify-content: space-between;
justify-content: space-around;https://naradesign.github.io/flex-justify-align.html
CSS flexible 레이아웃: flex item의 정렬과 간격.
HTML, CSS(flex/grid), UI/UX, Accessibility
naradesign.github.io
✅ Material UI
Table
https://material-ui.com/components/tables/
Checkbox
https://mui.com/components/checkboxes/
✅ Spinners (로딩 애니메이션 효과)
react-spinners
https://www.davidhu.io/react-spinners/
react-spinners-css
https://www.npmjs.com/package/react-spinners-css
반응형
'Devlog > Web' 카테고리의 다른 글
| [Express+MySQL] DB 연결 시 발생하는 access error 해결방법 (0) | 2021.11.23 |
|---|---|
| [React] hover effect 이벤트함수가 child element에 제대로 적용이 안 될 때 해결방법 (2) | 2021.10.11 |
| [React] useAsync 조건문 사용하기 (if문 ❌) (0) | 2021.08.27 |
| [React] MacOS onKeyDown 이벤트 시 한글 깨짐 문제 해결방법 (0) | 2021.08.04 |
| [React] 이미지파일 import 실패 에러 해결방법 (0) | 2021.08.04 |