Skip to main content

스타일 적용

CSS 적용방법​

CSS파일을 import​

  • 디자인을 표현하고자 하는 js, jsx파일에 import를 통해 CSS파일을 표현
  • 부모와 자식 관계로 구성된 Component가 존재할 경우, 자식의 Component CSS 스타일이 부모 Component에게 영향을 준다
p.css
.wrapper {
  width: 200px;
  height: 200px;
  background-color: slategray;
}
pc.css
.wrapper {
  background-color: pink;
}
Practice.js
import React from "react";
import PracticeComponent from "./PracticeComponent";
import "./p.css";

function Practice() {
  return (
    <div className="wrapper">
      <h1>Front End TIL 블로그입니다.</h1>
      <PracticeComponent />
    </div>
  );
}

export default Practice;
PracticeComponent.js
import React from "react";
import "./pc.css";

function PracticeComponent() {
  return (
    <div className="wrapper">
      <h1>Hello</h1>
      <p>만나서 반갑습니다.</p>
    </div>
  );
}

export default PracticeComponent;

image

note

위와 같이 개별적으로 CSS파일을 적용했음에도 자식 Component에 적용된 CSS의 background-color로 적용되었다.
이를 해결하기 위해서는 2가지 방법이 존재한다.

  1. CSS에 class, id를 이용하여 적용
  2. module.css 방법을 이용하여 적용

module.css​

  • 파일 확장명 .module.css
  • React에서 CSS스타일 충돌을 방지하기 위해 사용하는 스타일 관리 기법
p.module.css
.wrapper {
  width: 200px;
  height: 200px;
  background-color: slategray;
}
pc.module.css
.wrapper {
  background-color: pink;
}
Practice.js
import React from "react";
import PracticeComponent from "./PracticeComponent";
import p from "./p.module.css";

function Practice() {
  return (
    <div className={p.wrapper}>
      <h1>Front End TIL 블로그입니다.</h1>
      <PracticeComponent />
    </div>
  );
}

export default Practice;
PracticeComponent.js
import React from "react";
import pc from "./pc.module.css";

function PracticeComponent() {
  return (
    <div className={pc.wrapper}>
      <h1>Hello</h1>
      <p>만나서 반갑습니다.</p>
    </div>
  );
}

export default PracticeComponent;

image

info

CSS파일과 module.css의 차이점​

  1. CSS파일 확장명이 module.css이다.
  2. import '모듈명' from '파일명.module.css'으로 모듈을 호출
  3. CSS모듈을 이용시 {모듈명.선택자}로 이용

module.css를 이용하여 자식 Component에 정상적으로 스타일이 적용하였다.

styled-components​

  • 해당 React 폴더 경로에서 npm install styled-components 설치
  • JavaScript를 사용하여 스타일을 정의하고 Component와 함께 사용하는 CSS-in-JS 라이브러리 중 하나

Global style​

  • createGlobalStyle()함수를 사용
  • 모든 Component에서 공통으로 적용되는 스타일
  • 배경색 및 글꼴 등에 사용
import React from "react";
import { createGlobalStyle } from "styled-components";
import PracticeComponent from "./PracticeComponent";

const Global = createGlobalStyle`
h1{color: red;}
h2{color: skyblue;}
h3{color: gray;}
h4{color:salmon;}
`;

function Practice() {
  return (
    <>
      <Global />
      <h1>Hello</h1>
      <h2>World</h2>
      <PracticeComponent />
    </>
  );
}

export default Practice;
import React from "react";

function PracticeComponent() {
  return (
    <>
      <h3>JJamVa</h3>
      <h4>TIL Blog</h4>
    </>
  );
}

export default PracticeComponent;

image

caution

Global style은 다른 style보다 나중에 로딩이 되어 같은 가중치라면 기본적으로 우선순위가 높다.

tip

tagged tamplate literal​

const color_red = "red";
const color_arr = ["skyblue", "gray", "salmon"];
const Global = createGlobalStyle`
h1{color: ${color_red};}
h2{color: ${color_arr[0]};}
h3{color: ${color_arr[1]};}
h4{color: ${color_arr[color_arr.length - 1]};}
`;

위 코드에서 ``을 이용하여 CSS style을 표현하였다.
${표현식}을 이용하여 요소에 전달도 가능하다.

Reset CSS​

  • 해당 React 폴더 경로에서 npm install styled-reset 설치
  • CSS 초기화 작업을 해주는 모듈
Practice.js
import React from "react";
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
import PracticeComponent from "./PracticeComponent";

const Global = createGlobalStyle`
${reset}
h1{color: red;}
h2{color: skyblue;}
h3{color: gray;}
h4{color:salmon;}
`;

function Practice() {
  return (
    <>
      <Global />
      <h1>Hello</h1>
      <h2>World</h2>
      <PracticeComponent />
    </>
  );
}

export default Practice;
PracticeComponent.js
import React from "react";

function PracticeComponent() {
  return (
    <>
      <h3>JJamVa</h3>
      <h4>TIL Blog</h4>
    </>
  );
}

export default PracticeComponent;

image

styled-components 스타일​

  • CSS의 작성법과 조금 다르게 -(케밥 표기법)을 사용
const 변수명 = styled.태그명`
    CSS Code
`;
tip

- 케밥 표기법 이란?​

스타일 속성 이름이나 클래스 이름을 작성할 때 사용되는 네이밍 컨벤션
단어 사이를 하이픈(-)으로 구분하는 방식으로 작성된 스타일 이름

import React from "react";
import styled from "styled-components";

const Title1 = styled.h1`
  color: black;
  background-color: pink;
`;
const Title2 = styled.h2`
  color: pink;
  background-color: black;
`;

function Practice() {
  return (
    <>
      <Title1>Hello</Title1>
      <Title2>World</Title2>
    </>
  );
}

export default Practice;

image

note

import styled from "styled-components"를 통해 styled 모듈을 호출한다.
이후 Title1과 Title2를 styled를 이용하여 Component를 생성하여 사용하였다.

props로 styled-components를 조건부 스타일​

  • tagged template literal 표현이 가능하기 때문에 props값에 따라 조건부 스타일링이 가능
import React from "react";
import styled from "styled-components";

const Title1 = styled.h1`
  color: ${(props) => (props.data.split("")[0] === "b" ? "black" : "pink")};
  background-color: ${(props) =>
    props.data.split("")[1] === "b" ? "black" : "pink"};
`;
const Title2 = styled.h2`
  color: ${(props) => (props.data.split("")[0] === "b" ? "black" : "pink")};
  background-color: ${(props) =>
    props.data.split("")[1] === "b" ? "black" : "pink"};
`;

function Practice() {
  return (
    <>
      <Title1 data={"pb"}>Hello</Title1>
      <Title2 data={"bp"}>World</Title2>
    </>
  );
}

export default Practice;

image

tip

props를 통해 Title1, Title2에 데이터를 전달하였다.
하지만 Title1, Title2의 CSS 모듈에서는 props를 받을 인자가 없다.
이로 인해 tagged template literal를 이용하여 콜백 함수에 props를 받아 실행을 시킨다.
tagged template literal 내부에 콜백 함수를 이용 시, (Parameter) => 코드 혹은 (Parameter) => (코드)로 작성해야한다.

상속을 이용한 styled-components 스타일​

  • styled-components에서 CSS 모듈 상속을 이용하여 스타일 작성이 가능
  • 상속을 이용하여 Component 간에 스타일을 재사용하고 스타일 코드의 중복을 줄일 수 있다
import React from "react";
import styled from "styled-components";

const Title1 = styled.h1`
  color: black;
  background-color: pink;
`;
const Title2 = styled.h2`
  color: pink;
  background-color: black;
`;

const Title3 = styled(Title1)`
  font-size: 100px;
`;

function Practice() {
  return (
    <>
      <Title1>Hello</Title1>
      <Title2>World</Title2>
      <Title3>반가워요!</Title3>
    </>
  );
}

export default Practice;

image

danger

styled를 이용하여 상속을 받을 수 있지만 여러가지의 CSS모듈 상속을 받을 순 없다.

css모듈을 이용한 styled-components 스타일​

  • css모듈을 이용하여 개별적으로 속성만 지정 가능
  • styled내에 사용시 tagged template literal 표현식으로 호출
import React from "react";
import styled, { css } from "styled-components";

const t1 = css`
  color: black;
  background-color: pink;
`;
const t2 = css`
  color: pink;
  background-color: black;
`;

const Title1 = styled.h1`
  ${t1}
`;
const Title2 = styled.h2`
  ${t2}
`;

function Practice() {
  return (
    <>
      <Title1>Hello</Title1>
      <Title2>World</Title2>
    </>
  );
}

export default Practice;

image

styled-components를 이용한 버튼
import React from "react";
import styled, { css } from "styled-components";

const box = css`
  border: none;
  border-radius: 30px;
  box-shadow: 0 0 20px black;
`;

const Button = styled.button`
  width: 200px;
  height: 100px;
  font-size: 20px;
  background-color: ${(props) => props.bgc};
  color: ${(props) => props.textcolor};
`;

const Btn1 = styled(Button)`
  border: 5px solid gray;
`;

const Btn2 = styled(Button)`
  ${box}
`;

const Btn3 = styled(Button)`
  ${box}
`;

function Practice() {
  return (
    <>
      <Btn1 bgc="slateblue" textcolor="white">
        버튼1
      </Btn1>
      <Btn2 bgc="blue" textcolor="black">
        버튼2
      </Btn2>
      <Btn3 bgc="green" textcolor="white">
        버튼3
      </Btn3>
    </>
  );
}

export default Practice;

image