이안의 평일코딩

설치하기 // with npm npm install @material-ui/styles // with yarn yarn add @material-ui/styles styles styles를 생성하여 적용하기 위해서는 3가지 API를 사용할 수 있다. Hook API import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, border..

Material-UI에서 제공하는 컴포넌트의 종류는 도큐먼트들을 다 읽어보기 힘들 정도로 많다. 크게 Layout, Inputs, Navigation, Surfaces, Feedback, Data Display, Utils, Lab로 나눌 수 있고, 세부적으로 다 다루기보다 활용해서 적응할 수 있게끔 대표적인 예시를 들어가며 배우면 좋다. Layout 먼저, 레이아웃에는 Box, Container, Grid, Hidden, Image List가 있다. Box는 div를 대체하는 강력하고 편리한 컴포넌트로 tailwind CSS 방식이고 Container는 레이아웃을 잡을 때 좌우 간격, 중앙 위치시킬 때 사용하며 최대 너비 제한 fluid모드와 동일 너비 강제 fixed 모드가 있다. Grid는 Cont..

Material-UI란? 부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크이다. 설치하기 Material-UI는 npm패키지로 제공된다. 터미널에 아래와 같이 입력하고 설치해준다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core 아래와 같이 간단하게 import해와서 Material-UI에서 이미 지정해 둔 스타일로 버튼을 만들 수 있다. import React from 'react'; import { Button } from '@material-ui/core'; function App() { return Hello World; } 아이콘을 사용하고 싶다면 @m..