목차
- 인라인 방식
- 인라인 스타일 변형 방식 (= 스타일 JS객체 별도 생성)
- 외부스타일 방식
- CSS 모듈 이용 방식
※ CSS로 React를 스타일링하는 방법은 여러 가지 존재.
※ CSS 스타일 적용법 3가지 : (인라인/내부/외부)스타일
인라인 방식
[구문]
<element style={{property:value, property:value, ...}}
PS. {{ ... }} 처럼, 중괄호가 중첩인 이유.
1.
인라인 스타일 경우, style 속성의 속성값이 JS객체여야 함.
※ JS 객체 형태: {이름:값, 이름:값, ....}
2.
JSX에서 JS 표현식은 중괄호 { }로 감싸야 함.
<요소 style={JS객체}
3.
CSS 속성명은 JS처럼 낙타문자 형식으로 적어야 함.
(예) background-color (X), backgroundColor (O)
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return (
<div>
<h1 style={{color: "red"}}>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
PS. 낙타 문자 형태의 속성
React에서 인라인 CSS는 JS 객체 형태이므로,
background-color 처럼 - (하이픈) 갖는 속성은 낙타 문자로 작성.
(예) backgroundColor
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return (
<div>
<h1 style={{backgroundColor:"yellow"}}>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
인라인 스타일 변형 방식 (= 스타일 JS객체 별도 생성)
스타일 객체를 별도로 생성 후, style 속성의 속성값으로 사용 가능.
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
const logo = {
color: "red",
backgroundColor: "yellow",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={logo}>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
외부스타일 방식
[style.css 생성]
※ C:\User\사용자명\hz\src\style.css
body {
background-color: yellow;
color: red;
padding: 40px;
font-family: Arial;
text-align: center;
}
[index.js 생성]
※ C:\User\사용자명\hz\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
class Hz extends React.Component {
render() {
return (
<div>
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
CSS 모듈 이용 방식
1.
CSS 모듈은 컴포넌트를 별도의 파일로 분리한 경우에 편리.
2.
모듈 내부의 CSS는 가져온 컴포넌트에만 사용 가능.
따라서, 이름 충돌을 걱정할 필요 없음.
3.
CSS 모듈 확장자 : .module.css
(예제) style.module.css
[style.module.css 생성]
※ C:\User\사용자명\hz\src\style.module.css
.logo {
color: DodgerBlue;
padding: 40px;
font-family: Arial;
text-align: center;
}
.host {
text-align:center;
}
[hz.js 생성]
※ C:\User\사용자명\hz\src\hz.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './style.module.css';
class Hz extends React.Component {
render() {
return (
<div>
<h1 className={styles.logo}>홈짱닷컴</h1>
<p className={styles.host}>Homzzang.com</p>
</div>
);
}
}
export default Hz;
[index.js 생성]
※ C:\User\사용자명\hz\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Logo from './hz.js';
ReactDOM.render(<Logo />, document.getElementById('root'));
※ Logo 대신 Hz 이름 사용 가능. (보라색 부분만 일치하면 됨.)
