프론트엔드

4.React CSS

네스이 2022. 9. 7. 15:53

2022.09.07.수


1.React CSS

 -App.js

import logo from './logo.svg';

//1.Pure css 적용방식
import './App.css';
import Button from './components/Button';

//2.SCSS 방식
//import './App.scss';

//3.Module.css 방식
import styles from './App.module.css';
//각 style identifier(식별자)들이 고유한 hash값으로 지정되어 있음

const App = () => {
  return (
    //1.Pure css 적용방식
    // <div className="App">
    //   <header className="App-header">
    //     <img src={logo} className="App-logo" alt="logo" />
    //     <p>
    //       Edit <code>src/App.js</code> and save to reload.
    //     </p>
    //     <a
    //       className="App-link"
    //       href="https://reactjs.org"
    //       target="_blank"
    //       rel="noopener noreferrer"
    //     >
    //       Learn React
    //     </a>
    //   </header>
    // </div>

    //2.SCSS 방식
    // <div className="App">
    //   <header className="header">
    //     <img src={logo} className="logo" alt="logo" />
    //     <p>
    //       Edit <code>src/App.js</code> and save to reload.
    //     </p>
    //     <a
    //       className="link"
    //       href="https://reactjs.org"
    //       target="_blank"
    //       rel="noopener noreferrer"
    //     >
    //       Learn React
    //     </a>
    //   </header>
    // </div>

    //3.CSS or SCSS module 방식
    <div className={styles.App}>
      <header className={styles.header}>
        <img src={logo} className={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className={styles.link}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button />
      </header>
    </div>


  );
}

export default App;

 -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);
  }
}

.erorr{
  color: red;
}

 -App.module.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);
    }
  }

 -App.scss

.App {
    text-align: center;
  
    .logo {
      height: 40vmin;
      pointer-events: none;
    }
  
    @media (prefers-reduced-motion: no-preference) {
      .logo {
        animation: App-logo-spin infinite 20s linear;
      }
    }
  
    .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;
    }
  
    .link {
      color: #61dafb;
    }
  
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }

 -Component(Button)

import styles from './Button.module.css'

const Button = props => <button className={styles.error}>Check button</button>

export default Button;

 -Button.module.css

.error {
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
  
    background-color: transparent;
    border: 2px dashed skyblue;
    color: skyblue;
  
    letter-spacing: 0.1rem;
    padding: 0.75rem;
    margin-top: 1rem;
    font-size: 1rem;
  }