[새싹(SeSAC) 프론트엔드] day34 221201

 

📍 Post CSS

- CSS module 기법 중 하나
: CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술

파일이름_클래스이름_해시값

사용방법
- 버전 2이상부터는 별도의 설정이 필요없고, 다음과 같은 확장자로 파일을 저장하기만 하면 적용

파일이름.module.css

CSS Module.jsx

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

const CSSModule = () => {
  console.log(styles);
  console.log(styles.container);
  return (
    <div className={styles.container}>
      <span className="span">CSS Module</span>실습
    </div>
  );

CSSModule_container_Tyg1E
뒤에 "Tyg1E"이 붙기 때문에 중복될 수 없음



class 이름이 2개 이상인 경우
GlobalModule.module.css

.container {
  background: black;
  padding: 1rem;
  font-size: 2rem;
  color: #fff;
}

:global .globalBtn {
  background-color: yellow;
}

.title {
  border: 10px solid aqua;
}

 

const 스타일_저장_변수이름 = styled.태그이름`
property : value
`;


const Container = styled.div`
background : black;
padding : 1rem;
`;

 

import styled from "styled-components";

function App() {
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: ${(props) => (props.primary ? "red" : "palevioletred")};
  `;

  const Wrapper = styled.div`
    padding: 4em;
    background: papayawhip;
  `;

  const Button = styled.button`
    background: ${(props) => (props.primary ? "palevioletred" : "white")};
    color: ${(props) => (props.primary ? "white" : "palevioletred")};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
  `;


  return (
    <Wrapper>
      <Title primary> 안녕하세요</Title>
      <Title> 안녕하세요</Title>

      <Button>Normal</Button>
      <Button primary>Normal</Button>
    </Wrapper>
  );
}

 

css Module	Styled Componets
큰 규모의 프로젝트에 적합 - class명의 중복을 방지할 수 있으므로	큰 프로젝트에서는 코드가 너무 길어질 수 있으므로 적합하지 않음
purecss이므로 별도의 공부가 크게 필요하지 않음	JS파일에서 작성된다는 것이 장점이자 단점!

➡️ 일반적으로 많이 쓰는 것이 CSS Moudule + SASS




-react icon
https://react-icons.github.io/react-icons/

React Icons

: react에서 사용하는 font-awesome 같은 친구




새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅(목)