Web_React #4

210819
Web_React #4

---

• React CSS 코딩

index.js에서 import 부분에 index.css가 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

-index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

이 코드를 모두 지우고

body {
  background-color: aquamarine;
}

수정을 하고 페이지를 보면

그대로 업데이트가 된 것을 확인할 수 있다.
일반적으로 html과 css 적용과 크게 다른점이 없는 듯 하다.

우선은 App.css와 index.css의 내용을 모두 지워서 작업을 할 것이다.