[React] React 에서 css 사용하기

| css 파일

css 폴더의 mystyle.css 을 살펴보니 클래스 . 가 있다.

그렇다면 이렇게 사용할 수 있지 않을까?

 

import React from 'react'
import logo from './logo.svg';
import './App.css';
import './css/mystyle.css'
import my from './images/torikelly.png'

export default class App extends React.Component{
  handleDelete = () => {
    alert('삭제 하시겠어요?');
  }

  handleCreate(){
    console.log('handleCreate 함수');
    alert('신규등록을 하시겠어요?');
  }

  render(){
    //javascript 기술하는 영역
    //상수,함수,전역변수
    
    return(
      <div>
        <h1>my first React</h1>
        <img src={my} alt='토리켈리' width='200'/><br></br>
        <button onClick={this.handleCreate}>create</button>
        <button onClick={this.handleDelete}>delete</button>
        <button className='button'>숫자증가</button>
        <button className='button'>숫자감소</button>
      </div>
    )//return end
  }//render end
}//class end

| 출력결과

button 에 대한 css가 잘 반영이 되었다.

 

 

| 띄어쓰기로 두가지 속성 적용하기

import React from 'react'
import logo from './logo.svg';
import './App.css';
import './css/mystyle.css'
import my from './images/torikelly.png'

export default class App extends React.Component{
  handleDelete = () => {
    alert('삭제 하시겠어요?');
  }

  handleCreate(){
    console.log('handleCreate 함수');
    alert('신규등록을 하시겠어요?');
  }

  render(){
    //javascript 기술하는 영역
    //상수,함수,전역변수
    
    return(
      <div>
        <h1>my first React</h1>
        <img src={my} alt='토리켈리' width='200'/><br></br>
        <button onClick={this.handleCreate}>create</button>
        <button onClick={this.handleDelete}>delete</button>
        <button class='button big'>숫자증가</button>
        <button class='button small'>숫자감소</button>
      </div>
    )//return end
  }//render end
}//class end

 

| React의 태그 속성명은 대소문자를 구분한다

<button class='button big'>숫자증가</button>	출력됌
<button className='button big'>숫자증가</button>	출력됌
<button classname='button big'>숫자증가</button>	출력안됌