[React 따라하기 #13] React 에서 css 적용하기

React CSS

 

크게는 inline styling 과 .css 파일을 이용하는 방법이 있습니다.

- inline styling 이용

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      </div>
    );
  }
}

html 에서 tag 안에 직접 style= 로 입력하는 것처럼 합니다만 {} 로 감싸고 안에는 json 형식입니다.

camelCased property names 를 사용합니다. ( 단어단위이고 시작은 소문자, 그 후 단어의 첫 알파벳은 대문자 )

Html 에서 background-color 였다면 react 는 backgroundColor
font-family 는 fontFamily

 

- javascript object 이용

class MyJob extends React.Component {
  render() {
    const hstyle = {
      color: "black",
      backgroundColor: "blue",
      fontFamily: "Arial"
    }
    return (
      <div>
      <h1 style={hstyle}>Hello Style!</h1>
      </div>
    );
  }
}

style={object명} 으로 사용합니다.

 

- CSS Stylesheet 이용

.css 파일을 만들어서 import 합니다.

App.css 라는 파일을 만들고 import './App.css'; 를 합니다.

// App.css 내용.  ※ 여기는 carmelCased 아님.
body {
  background-color: white;
  color: blue;
  margin: 10px;
  font-family: Arial;
  text-align: center;
}

-

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

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      </div>
    );
  }
}

body 에 적용했기때문에 됩니다.

 

- className 에 직접 적용

App.css 에 아래 내용 추가.

.mainBody {
  background-color: white;
  color: blue;
  margin: 10px;
  font-family: Arial;
  text-align: center;
}

-

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

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1 className={styles.mainBody}>Hello Style!</h1>
      </div>
    );
  }
}

 

<h1 class="something"..  이 아니라 <h1 className="something"... 입니다.

페이지는 index.html이지만 css 가 import 되는것은 .js 에서 합니다.

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #8] React Props

2019/12/31 - [HTML,Javascript] - [React 따라하기 #9] React State

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)

2020/01/02 - [HTML,Javascript] - [React 따라하기 #11] React Event 리액트 이벤트

2020/01/02 - [HTML,Javascript] - [React 따라하기 #12] React Form