styled-components?CSS-in-JS 라이브러리 중 하나.컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각하자. 혹은 컴포넌트를 직접 만든다고 볼 수도 있겠다.클래스 이름 짓기에서 자유로운 장점과 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적이다.CRA를 설치한 폴더를 VS Code에서 열고 아래 명령어를 입력해서 styled-components 패키지를 설치하자.yarn add styled-components설치가 다 되었으면, 컴포넌트에 적용시키기 위해 아래 코드를 입력해서 임포트해야한다.import styled from 'styled-components';styled-components는 아래와 같이 변수로 만들어서 사용할 수 있다. "\"는 작은 따옴표가 아닌 빽틱이다!con..

SASS, SCSSSASS와 SCSS는 둘다 CSS를 편하게 쓰도록 도와주는 도구이다.SCCS는 SASS의 3번째 버전에서 추가된 것인데, SASS의 모든 기능을 사용할 수 있고 CSS와 호환도 잘 된다!SCSSSCSS를 사용하기 위해서 node-sass 패키지와 다른 필요 패키치를 설치해야 한다.VSCode를 열고 리액트 프로젝트를 만들 폴더에서 bash로 터미널을 열어 아래 명령어로 설치하자.yarn add node-sass@4.14.1 open-color sass-loader classnamesSCSS 문법기본 문법은 CSS와 동일하지만 몇가지 편리한 문법들이 존재한다!https://sass-lang.com/documentation[Sass: Documentation위 링크는 SCSS 공식문서이다...

CSSReact에서 컴포넌트에 CSS 스타일을 적용하기 위해서 src 폴더에 아래와 같은 style.css 파일로 스타일을 정의하고 컴포넌트에서 불러와보자!style.css.App{ width: 100vw; min-height: 100vh; background-color: #eee; padding: 32px; box-sizing: border-box;}.container{ max-width: 350px; min-height: 80vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd;}.title{ col..