[React.js] JSX에서 스타일 주기

 

 1. 태그에 직접 주기

 

<태그명 style={{}}>

 

style ={{}} → 중괄호 2개 써야가능

그리고 html 내부에서 css 속성 주는 것 처럼 쓰면 주는데 이 때 주의사항

 

*카멜표기법으로 써야함*

 

이어지는 다음 단어의 첫글자를 대문자로 표기하는 방법

 

background-color (X)

 

backgroundColor (O)

 

 

→ 이방법은 꾸미는 요소가 많아질 때 코드가 너무 길어짐(html에서도 잘 사용하지 않는 방법)

 

 

 

 2. 별도의 CSS 파일 생성

 

css 작성 규칙대로 만들면 되는데

 

본인의 jsx 파일에

import "css파일이 있는 주소";

넣어주기

 

그리고  style 줄 태그에 className="클래스이름"

 

왜 className을 사용??

 

→ jsx는 html과 JavaScript 를 같이 사용하는데 자바스크립트에 class라는 예약어가 존재