![]()
버튼 형태Material UI에는 text, contained, outlined 총 3가지 형태의 버튼을 제공한다.text : 배경색 X, 테두리 X (텍스트에만 스타일 적용)contained : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { Button } from "@material-ui/core";export default () => ( Text Contained Outlined );색상은 'color' prop을 이용해서 조절할 수 있다.import { Button } from "@material-ui/core";export default () => ( Default Primary Secondar..
패키지 설치1,000 여종의 SVG 아이콘을 제공하는 @material-ui/icons$ npm i @material-ui/icons 사용 방법Material Icons 페이지에서 원하는 아이콘을 검색한다.해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용한다.import EcoIcon from "@material-ui/icons/Eco";export default () => ;아이콘의 색상은 'color' prop으로 바꿀 수 있다.아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다. 커스텀 아이콘 사용하기 컴포넌트를 사용해 커스텀 아이콘을 사용할 수 있다.import { SvgIcon } from "@material-ui/core";export default () => ..
Material UI(MUI)는 Google의 Material Design을 구현하는 오픈소스 React UI 구성 라이브러리이다.현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나이다. 패키지 설치Material UI는 core, system, utils, icons 등 여러 개의 패키지로 구성되어 있다.핵심적인 기능을 담고있는 @material-ui/core$ npm i @material-ui/core - React 18과 Material-UI v4 호환 문제 : Material-UI v4는 React 18과 호환되지 않아, v5로 업그레이드$ npm install @mui/material @emotion/react @emotion/styled 폰트 불러오기Material U..
![]()
사용방법1. html 파일에 로 선언2. css로 너비(width), 높이(height) 설정3. 나머지는 Javascript에서 처리 - context(ctx)은 canvas에서 붓 역할(2d, webGL) - canvas의 사이즈를 설정(css와 동일하게)기본적인 함수// 사각형(fill 또는 stroke를 하기 전에는 보이지 않음)rect(x좌표, y좌표, 너비, 높이);// 색이 채워진 사각형fillRect(x좌표, y좌표, 너비, 높이);// 색을 채움fill();// 선을 그림stroke();// 새로운 경로 시작(이전 경로와 별개의 경로로 나뉨 / 스타일 등이 다르게 각각 적용)beginPath();// 채우기, 선 색상 변경fillStyle = "색상";strokeStyle = ..
