가이드 라인을 참조하여 전체 사이트의 느낌과 레이아웃을 해치지 않도록 주의하여 이미지를 만들고 버튼, 텍스트, 폰트등은 정해져 있는 CSS가이드를 따라 작성을 한다.
css 파일의 생성
- css 파일의 수는 최소한으로 유지한다.
- 전역에 쓰이는 css는 각 페이지에 makeStyles로 작성한다.
- class 명은 단어와 단어를 '-' 로 연결한다. ex) list-dot
[Style Files]
- globals.js : MUI Override, 공통사항, 전체 레이아웃 구조
- contents.js : 자주 사용되는 컨텐츠 구조
- theme.js : 공통 color, spacing, breakpoints 등 theme 셋팅
css 속성선언
쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여 레이아웃과 무관한 것 순으로 아래와 같이 선언한다. 각 속성들과 짝을 이루는 관련 속성들은 etc로 분류하여 따로 기술하지 않고 되도록 함께 기술한다. 예로 position 속성과 left, right , top, bottom 속성은 서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술한다.
- display : 표시
- overflow : 넘침
- float : 흐름
- position : 위치
- z-index : 정렬
- width & height : 크기
- margin & padding : 간격
- border : 라인
- font : 폰트
- background : 배경
- etc : 기타
Spacing
- MUI spacing = 5
ex) mt={1} === margin-top:5px
MediaQuery
- Mobile breakpoint = 750 / sm
- 사용방법
- useMediaQuery(theme.breakpoints.up("sm"))
- useMediaQuery(theme.breakpoints.down("sm"))