[ React ] React에 CSS 적용하기

📌 React 스타일링

⓵ 태그에 직접 디자인 적용하기

스타일 속성 중에 -로 연결된 속성은 카멜표기법으로 대체하여 적어줍니다.

<div style={{color: 'blue', textAlign: 'center', border: '1px solid #777'}}>안녕하세요?</div>

 

⓶ 일반 css파일에 디자인 후 import 기능을 통해 연결하기

📍--- App.css 

.app-title {
  border: 1px solid #777;
  color: red;
}
-------------------------------------------------------
📍--- App.js
import './App.css'; //--- css파일 import

function App() {
   < >
      <div className="app-title">
        css파일로 디자인하기
      </div>
   </>
}
export default App;

 

⓷ css 모듈 사용하기

파일은 '컴포넌트명.module.css' 형식으로 만들고 css파일은 import구문으로 가져옵니다. 이 방식은 선택자에 고유한 해시값을 명시함으로써 다른 파일과 디자인의 중복을 방지해줍니다. ' :global ' 키워드를 이용해서 전역 선택자 선언이 가능합니다.

📍--- App.module.css
.app_wrap {
  border: 1px solid #777;
}

.app_wrap > .title {
  background-color: yellow;
}

:global .content { //--- ★ 추가설명
  color: green;
  font-size: 15px;
}
----------------------------------------------------------------------------------
📍--- App.js
import styled from './App.module.css'; //--- App.module.css파일 import

function App() {
  return (
    <>
      <div className={styled.app_wrap}>
        <p className={styled.title}>모듈로 디자인하기</p>
        <p className="content">global속성</p>
      </div>
    </>
  )
}
export default App;

 

★ 추가설명 부분에 대해서 설명드리겠습니다. 태그에 className을 지정할 때에는 2가지 방법이 있습니다.

1) import한 모듈명.클래스명 , 2)클래스명 이렇게 두가지로 나뉘는데

1)과 같이 작성하게 되면 module.css파일은 태그명으로 바로 진입하여 css를 넣어줄 수 있습니다.

2)와 같이 작성하게 되면 module.css파일의 태그명 앞에 :global을 넣어주어야합니다. :global 키워드는 이름으로 바로 사용할 수 있게 해주는 키워드입니다.