Css - in - JS

• 자바스크립트 코드로 css를 작성해서 컴포넌트를 꾸미는 방식

Styled Components

• Css-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 해주는 패키지

설치

• 플러그인 설치필요 - VScode 확장 탭에서 vscode-styled-components 설치
• 터미널에 yarn add styled-components

원리

꾸미고자 하는 컴포넌트를 styled-components의 방식대로 먼저 만들고

그 안에 스타일 코드를 작성하는 방식

• 사용 예시)

import "./App.css";
import styled from "styled-components";
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;
function App() {
  return <StBox>박스</StBox>;
}

export default App;

• 응용하면 조건부 스타일링도 가능하다.

import "./App.css";
import styled from "styled-components";
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.bordercolor};
  margin: 20px;
`;
function App() {
  return (
    <>
      <StBox bordercolor="red">빨간 박스</StBox>;
      <StBox bordercolor="blue">파란 박스</StBox>;
      <StBox bordercolor="green">초록 박스</StBox>;
    </>
  );
}

export default App;

• switch와 map 이용해서 조건부 스타일링

import "./App.css";
import styled from "styled-components";

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.bordercolor};
  margin: 20px;
`;

// 박스의 색

const boxList = ["red", "blue", "green"];

//색을 넣으면,이름을 반환

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
  }
};

function App() {
  return (
    <StContainer>
      {/* <StBox bordercolor="red">빨간박스</StBox> */}
      {boxList.map((box) => {
        return <StBox bordercolor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>
  );
}

export default App;

---

GlobalStyles, Sass, css reset

GlobalStyles

전역 스타일링 : 프로젝트 전체를 아우르는 스타일

styled-components → 해당 컴포넌트에서만!

Sass (Syntactically Awesome Style Sheets)

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어.

코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법

css reset

default style : 값을 지정해주지 않았어도 기본적으로 가지고 있는 값이 있다.

하지만 브라우저마다 다르고 값이 보장되지 않기 때문에

대부분의 경우에 default style을 제거한다.

제거하는 방식 → css reset