.jsx에 html, css 적용하기

🏹 react에서 html 코드 적용

jsx 소스에서 return( ) 안에 html 코드를 입력한다.
🌼 jsx (JavaScript XML) : 자바스크립트에 XML을 추가한 확장 문법

🚩 소스코드 ( App.js )

import React from 'react';
import './App.css'; // css 파일 import

function App() {
  return (
    {/* HTML 코드 입력 */}
    <div>
      <h1>Start React 200!</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

🏹 react에서 css 파일로 html 코드에 스타일 적용

css 파일을 별도로 만든 후 jsx 파일에서 import해 사용

• css를 적용하는 방법
  1) css 코드를 html 코드 내부에 삽입
  2) html 코드가 있는 파일에 함께 정리
  3) css 코드만 따로 파일로 작성

🚩 소스코드 ( App.css )

div {
  background-color: rgb(162, 127, 243);
  color: rgb(255, 255, 255);
  padding: 40px;
  font-family: 고딕;
  text-align: center;
}

h1 {
  color: white;
  background-color: #2EFE2E;
  padding: 10px;
  font-family: 궁서;
}

🔍 실행 결과