* 가장 기본적인 방법(원시적인 스타일시트 파일을 이용한 방법)
CSS - default.css
SCSS - default.scss
* 리액트에서 제공하는 스타일시트 코딩 방법(비추천)
styled-components
* 생산성 향상을 위해 외부 라이브러리를 이용한 방법(추천)
tailwindcss
기타 등등...
* 가장 추천하는 방법 = 외부 라이브러리 + CSS/SCSS를 병행 이용
* SCSS는 SASS의 버전으로 나온 언어로, SASS 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 많이 사용되고 있다.
* SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다.
* 따라서 SASS는 통상적으로 SCSS라고 부르기도 한다. 그래서 SCSS로 통일해서 사용하겠다.
1. SCSS
- 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어
- SCSS는 밑에 그림처럼 중간에 컴파일을 통해서 CSS로 변환이 된 다음에 파일에 적용하게 된다.
- SCSS에는 CSS를 보완하기 위한 다양한 특징이 있다.
- 변수(Variables) 할당
- 중첩(Nesting) 기능
- 상위 선택자 참조(Ampersand)
- 믹스인(Mixins)
- 연산자(Operators)
- SCSS를 VS code에서 사용하기 위해서는 먼저 설치가 기반되어야 한다.
2. SCSS 특징 및 사용
1. 변수(Variables) 할당
- 자주 사용하거나 필요로 하는 것을 변수로 할당을 해서 사용가능하다.
- $를 맨 앞에 붙여서 변수로 사용한다.
/* 변수를 활용하여 컬러 색성을 통일성 있게 */
$color-white: white;
$color-gray: rgb(200, 200, 200);
/* dark 테마 */
/* $bg-color: black; */
/* $bg-color-body: rgb(61, 61, 61); */
/* $bg-button: rgb(80, 80, 80); */
/* white 테마 */
$bg-color: white;
$bg-color-body: #f0f2f5;
$bg-button: #f0f2f5;
/* 메인 콘텐츠 스타일 */
body {
background-color: $bg-color-body;
color: $color-text;
}
2. 중첩(Nesting) 기능
- 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조 작성 가능
- 따라서 개발자들에게 코딩 작성과 비슷하여 보다 직관적이다.
/* CSS */
.section { width: 100%; }
.section .list { padding: 20px; }
.section .list li { float: left; }
/* SCSS */
.section {
width: 100%;
.list {
padding 20px;
li {
float: left;
}
}
}
3. 상위 선택자 참조(Ampersand)
- 중첩 기능과 달리 자기 직계자식만을 참조하는 상위 선택자 참조하는 방법도 다르다.
- & : 부모를 의미
/* CSS */
header {
height: 60px;
}
header > a {
padding: 5px 30px;
}
header > a:hover {
color: $color-hover;
}
/* SCSS */
header {
height: 60px;
& > a {
padding: 5px 30px;
}
& > a:hover {
color: $color-hover;
}
}
4. 믹스인(Mixins)
- 함수처럼 default parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다.(재사용성)
/* CSS */
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
}
/* SCSS */
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
5. 연산자(Operators)
- math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있다.
- @use를 사용하면 SCSS 스타일시트로부터 믹스인(mixin), 함수(function), 변수(variable)을 가져올 수 있다.
/* CSS */
.container {
display: flex;
}
article[role="main"] {
width: 62.5%;
}
aside[role="complementary"] {
width: 31.25%;
margin-left: auto;
}
/* SCSS */
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
3. styled-components
- Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리
- React 프레임워크를 주요 대상으로 하는 라이브러리
- Javascript 파일마다 고유한 CSS 네임스페이스를 부여해주기 때문에 각 React 컴포넌트에 완전히 격리된 스타일을 적용할 수 있게 된다.
- styled-components를 VS code에서 사용하기 위해서는 먼저 설정이 필요
4. styled-components 예시
- styled-components를 사용하기 위해서는 import styled from 'styled-components'를 해줘야 한다.
- 아까 import한 styled를 이용해 styled.태그이름`스타일 작성` 로 통해 컴포넌트를 만든다.
- 만든 컴포넌트를 이용해서 스타일을 적용한 태그를 만들 수 있다.
- 스타일은 태그이름 뒤에 백틱(``) 안에다가 작성을 해야 한다.
'FrontEnd > React.js' 카테고리의 다른 글
[React] Project 관련 내용 (0) | 2022.11.03 |
---|---|
[React] TailwindCSS (1) | 2022.11.03 |
[React] CSS, Image, className, 반복 요소 렌더링, list 복사 (0) | 2022.10.28 |
[React] 리액트 훅(React Hooks) (0) | 2022.10.27 |
[React] 클래스형 VS 함수형 컴포넌트 (0) | 2022.10.27 |