리액트 | React에 CSS적용하기

리액트 스타일링

1. 태그에 직접 지정하기

2. 일반 css파일로 적용하기

3. css모듈로 적용하기

 

css파일 이름 규칙

컴포넌트의 이름을반드시 포함해서 만들거나 똑같이 만듭니다.

EX) App.js - App.css

 

---

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

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

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

<p style={{color: 'white', textAlign: 'center'}}>안녕하세요!!</p>

 

2. 일반CSS문법으로 디자인을 해주면 되고 import로 가져오면 됩니다.

 

 

3. CSS모듈사용하기

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