ch01.가장 흔한 방식, 일반 CSS

• 리액트에서 컴포넌트를 스타일링할 때는 딱히 정해진 방식이 아닌 원하는 방식을 선택해서 하면 된다.
• 이 중, 자주 사용하는 1) 일반 CSS,2) Sass,3) CSS Module,4) styled-components가 있다
• 기존 프로젝트는 일반 CSS 방식으로 이루어져 있다.
• 소규모 프로젝트를 개발할 때에는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있기 때문에 이미 적용되어 있는 기본 CSS 시스템을 이용한다. App
• .css

  • .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: white;
    }
    
    .App-link {
      color: #61dafb;
    }
    
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

• 주의할 점 : CSS가 중복되면 안 된다.
  • 이름 짓는 규칙 : CSS가 중복되면 안 되기에 이름 짓는 규칙을 사용하는 CSS이름을 짓는다.
    • 컴포넌트 이름 - 클래스와 같이 명명규칙을 지어 중복되는 것을 방지한다.
  • CSS-Selector : CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다(중복 방지)

    • .App {
        text-align: center;
      }
      /** App클래스 밑에 logo클래스 적용*/
      .App .logo {
        height: 40vmin;
        pointer-events: none;
      }
      
      @media (prefers-reduced-motion: no-preference) {
        .App-logo {
          animation: App-logo-spin infinite 20s linear;
        }
      }
      /** App클래스 밑에 header 적용
      *	header클래스가 아닌 header 태그 자체에 적용된다.
      */
      .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: white;
      }
      /** App클래스 밑에 a 적용
      */
      .App a {
        color: #61dafb;
      }
      
      @keyframes App-logo-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

    • import logo from "./logo.svg";
      import "./App.css";
      
      function App() {
        return (
          <div className="App">
            <header>
              <img src={logo} className="logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;