구티

Sass와 SCSS Sass - Syntatically Awesome Stylesheet SCSS - Sassy CSS CSS, Sass, SCSS 를 설명하기 전에, 먼저 각각의 코드를 보겠습니다. /* CSS */ div { color: red; } div p { background-color: green; } /* Sass */ div color: red p background-color: green /* SCSS */ div { color: red; p { background-color: green; } } Sass, SCSS 모두 CSS를 위한 확장 언어이며, CSS에 지원하지 않는 여러 기능들을 제공하여, 더 간략하고 효과적으로 CSS를 작성하게 해줍니다. Sass 같은 경우 중괄호 대신에 들..

웹 개발을 하게 되면서, 로직을 구현하는 것도 어렵지만 이전에 웹 개발을 많이 해보지 않았다면 갑자기 bootstrap, material-ui 를 쓰다보면 그냥 거기서 제공해주는 기본 디자인으로 개발을 한다면야 크게 어렵지 않지만 실상은 항상 디자인을 변경해줘야 합니다. 그러다보니 CSS에 대한 기본 개념이 충실하게 잡혀있지 않으면 스타일을 override 하는 가이드라인이 잘 되어 있다한들 이해하는데 어려움을 많이 겪게 됩니다. 그래서 기본적인 CSS 문법과 선택자, 그리고 Specificity 를 다뤄보고자 합니다. ( 가이드에 따라 스타일을 override 했지만, material-ui의 CSS에 override 되어버리거나 하는 경우가 있어 알아보다 보니 Specificity를 알아야 하네요. )..

dark theme 적용하기 theme와 palette를 이용하기 위해서는 아래와 같이 styles을 설치해 줍니다. // with npm npm install @material-ui/styles // with yarn yarn add @material-ui/styles​ 그리고, 아래와 같이 테마를 생성하고, 이를 적용해주면 됩니다. import React from 'react'; import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; const darkThe..