material ui ( abbre. mui)
먼저 임뽈탄떼 임폴뜨
import { GridList, GridListTile} from '@material-ui/core';
Grid의 시작은 container로 시작하는게 심신안정에 이롭다.
maxWidth속성으로 깔아줄 Grid들의 운동장크기를 잡아줘야함
mui에서 breakpoints (xl, ls, md, sm, xs) 요것들로 웹에서 보여질 크기와 함께 어썸한 반응형웹이 가능하다. (추후작성예정)
<Container maxWidth="lg">
return 위에 설정해준 값들
아래와 같이 cellHeight, cols, spacing, component 속성으로
한 칸을 잡아준다.
(화장실 타일 한칸느낌, 그 타일의 겉 테두리를 잡아준다는 느낌)
위와같이 반응형을 고려하여 크기를 잡아준다. ( 정수로 작성 )
<GridList cellHeight={imgHeight} cols={colCount} spacing={4} component="div">
다음으로, 자식으로 GridListTile을 작성. 타일 한칸의 속성을 잡아준다.
(타일의 알맹이?의 속성을 잡는느낌)
<GridListTile cols={1} rows={1} >
cols와 rows는 문자처럼 행과 열을 의미
하지만, 크기의 속성(width, heigh)이 아니다.
mui width의 최대값 12, 중 몇을 차지하는가? 이런느낌