[React] CSS

1. 일반 CSS

import './App.css';

✔️ CSS Selector : CSS 클래스가 특정 클래스 내부에 있는 경우에만 사용

.App .logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

2. CSS Module

src 폴더에 [파일 이름].module.css 파일 생성

.wrapper {
    background: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}

.inverted {
    color: black;
    background: white;
    border: 1px solid black;
}

/* 전역으로 선언한 클래스 */
:global .something {
    font-weight: 800;
    color: aqua;
}

✔️ 두 단위 모두 기준에 따라 값이 유동적으로 바뀐다.
em : 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준
rem : r은 root, 즉 최상위 요소의 font-size 속성 값이 기준

• 클래스 두 개 이상 넣고싶을 때 : 백틱 + $ 사용

import React from 'react';
import styles from './CSSModule.module.css';

const CSSModule = () => {
    return (
        <div className={`${styles.wrapper} ${styles.inverted}`}>
            안녕하세요, 저는 <span className='something'>CSS MODULE!</span>
        </div>
    );
};

export default CSSModule;

3. styled-components

자바스크립트 파일 안에 스타일을 선언한다.
yarn add styled-components

import React from "react";
import styled, {css} from 'styled-components';

const Box = styled.div`
// props로 넣어준 값을 직접 전달하는 부분
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
`;

const Button = styled.button`
background: white;
color: black;
border-radius: 4px;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 1rem;
font-weight: 600;

&:hover {
    background: rgba(255,255,255,0.9);
}

${ props =>
    props.inverted &&
    css`
    background: none;
    border: 2px solid white;
    color: white;
    &:hover {
        background: white;
        color: black;
    }
    `};
    & + button {
        margin-left: 1rem;
    }
`;

const StyledComponent = () => (
    // props 전달
    <Box color="black"> 
        <Button>안녕하세요</Button>
        <Button inverted={true}>테두리만</Button>
    </Box>
);

export default StyledComponent;

• css 단순 변수의 형태가 아니라 여러 줄의 스타일 구문을 조건부로 설정해야 하는 경우에는 css를 불러와야 한다.

• tagged 템플릿 리터럴 : 백틱을 사용하고, 템플릿 안에 자바스크립트 객체나 함수를 전달할 때 온전히 추출할 수 있다는 장점이 있음.

• styled.(태그명): 스타일링된 엘리먼트 만들때 사용

  태그명이 유동적이거나 특정 컴포넌트 자체에 스타일링 해주고 싶다면
  태그 타입을 함수 인자로 전달 하거나
  const MyInput = styled('input')` background: gray;`
  컴포넌트 형식 값을 넣어줌
  const StyledLink = styled(Link)` color: 'blue';`

• &를 사용해 자기 자신 선택

media 쿼리를 사용하여 반응형 구현하기

const Box = styled.div`
background: ${props => props.color || 'blue'};
padding: 1rem;
display: flex;
width: 1024px;
margin: 0 auto;
@media (max-width: 1024px){
    width: 768px;
}
@media (max-width: 768px){
    width: 100%;
}
`;

기본적으로 가로 길이 1024px에 가운데 정렬을 하고, 가로 크기가 작아짐에 따라 크기를 줄이고 768미만이 되면 꽉채운다.

요약

일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식
Sass: CSS 전처리기 중 하나. 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줌
CSS Module: 파일마다 고유한 이름을 자동으로 생성해주는 옵션. 스타일 작성시 클래스 이름의 충돌을 방지함
styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 작성. 해당 스타일이 적용된 컴포넌트를 만들 수 있게 함