리액트 기초/SCSS+styled-component

styled-components

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

SCSS

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

CSS in React

CSS React에서 컴포넌트에 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{ color: slateblue; text-align: cente..