가이드 라인을 참조하여 전체 사이트의 느낌과 레이아웃을 해치지 않도록 주의하여 이미지를 만들고 버튼, 텍스트, 폰트등은 정해져 있는 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"))