React - React에 CSS 적용

React에 CSS 적용하는 방법

1. 태그에 직접 지정하기
2. 일반 css파일로 적용하기
3. css모듈로 적용하기
4.public폴더에 css디자인

 

css파일 이름 규칙

• 컴포넌트의 이름을 반드시 포함해서 만들어야 한다.

EX) App.js - App.css

 

 

1. 태그에 직접 디자인을 적용 할 때는 {}로 묶어준다.

• css속성 중 - 은 카멜표기법으로 대체된다.

style={{css속성: 값, css속성: 값}}

 

 

2. 일반CSS문법으로 디자인을 하고, import로 가져오는 방법

 

- App1.css 파일

.myApp {
    background-color: antiquewhite;
    border: 1px solid #777;
    color: red;
}

 

 

- App1.js파일

import './css/App1.css'

function App() {

  return(
    <>
      <h3 className="myApp">css파일로 디자인하기</h3>
    </>
  )
}

export default App;

 

 

3. CSS모듈 사용하기

• 파일명:  컴포넌트명.module.css 형식
• css파일은 import구문으로 가져온다.
• 이 방식은 선택자에 고유한 해시값을 부여함으로 다른파일과 디자인의 중복을 막아준다.
• :global 키워드를 이용해서 전역 선택자(이름) 선언이 가능하다.

- App.module.css 파일

.app_wrap {
    color: red;
    border: 1px solid #777;
    background-color: aquamarine;
}

.app_wrap > .app_item {
    color: blueviolet;
}

/* global키워드를 붙이면, 그냥 사용하면 됨 */
:global .title {
    color: blue;
}

 

- App1.js 파일

import myStyle from './css/App.module.css'

function App() {
  return(
    <>
      <h3 className={myStyle.app_wrap}>
        module.css파일로 디자인하기
        <span className={myStyle.app_item}>홍길동</span>
      </h3>
      <h3 className="title">module.css파일로 디자인하기</h3>
    </>
  )
}

export default App;

 

 

4. public 폴더에 css디자인

 

- index.html 파일

// 위, 아래 코드 생략
<link rel="stylesheet" href="css/common.css">

 

- common.css 파일

.public_style {
    border: 1px solid #777;
    border-radius: 5px;
    color: brown;
    background-color: chartreuse;
}

 

- App1.js 파일

// import 필요 x, index.html에서 링크를 걸었기 때문
<h3 className="public_style">public폴더에 css만들고 기본디자인</h3>

 

 

1, 2, 3, 4번 방식 총 결과

 

끝!!