React9일차-Css,SCSS

오늘은 제가 개인적으로 좋아하는 css,scss적용하는 거에 대해서 알아보겟습니다.

우선 바탕화면에서 vscode키고 새터미널 켜주세요

npx create-react-app 폴더명  하고 엔터 눌러주세요

전

후

그다음 cd 폴더명 입력 엔터

code . -r 치고 엔터하면 새로창이 열리면 새터미널 열어주세요

그다음 터미널에 npm i styled-components 이거 쳐서 설치해주겠습니다.

그러고npm start해주세요 그리고 옆에 창을 뛰워주고 확인 해줍시다.

src/App.js 보면 위쪽에import './App.css'; 이게 보일겁니다. 이게 App.css 파일을 적용해주고 있다는 의미입니다. 

이제 적용이 되있는지 확인해보겠습니다.

src/App.css 가서 .App-header 부분에서 color를 white에서 red로 바꺼주겠습니다.

전

후

이제 npm start로 열었던 창을보면 하얀 글씨가 빨간색으로 변해 있을겁니다.

전

후

이제 적용이 잘되는것을 알수 있습니다. 

이제 scss를 적용해보겟습니다. src/App.scss 만들어 주고 

.App {

  text-align: center;

  .App-logo {

    height: 40vmin;

    pointer-events: none;

  }

  @media (prefers-reduced-motion: no-preference) {

    .App-logo {

      animation: App-logo-spin infinite 20s linear;

    }

  }

  .App-header {

    background-color: #282c34;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: calc(10px + 2vmin);

    color: red;

  }

  .App-link {

    color: #61dafb;

  }

  @keyframes App-logo-spin {

    from {

      transform: rotate(0deg);

    }

    to {

      transform: rotate(360deg);

    }

  }

}

작성 scss문법에 맞게 고친것입니다.

App.js가서

import './App.css';

를

import './App.scss';

로 변경

그리고 터미널에서 ctrl+c 누르고 y 엔터해서 나온다음에 npm i sass 쳐서 sass를 설치

그리고다시 npm start 하면

이렇게 scss가 적용된거 볼수 있다.

이번 게시물은 이까지 ㅎㅎ