React. Style

CSS class 스타일 적용

.skyblue-background {
  color: white;
  background-color: skyblue;
}

파일을 바로 Import하여 적용

• css 파일을 import한 뒤 className으로 적용

//JSX
import './My.css'
<div className={'skyblue-background'}></div>

모듈로 적용

• 장점
  • 조건부로 사용 가능
  • 여러 클래스를 조합하여 사용 가능

1. classnames

//JSX
import './My.css'
import classNames from 'classnames' 
<div className={classNames('skyblue-background')}></div>         
<div className={classNames({skyblue-background: age % 2 === 0})}></div>       

2. clsx

//JSX
import './My.css'
import clsx from 'clsx' 
<div className={clsx('skyblue-background')}></div>
<div className={clsx({skyblue-background: age % 2 === 0})}></div>

자주 사용하는 style

display : 'flex',
flex-direction : 'row', 'column'
display : 'grid',
gridTemplateColumns : '2fr 2fr' // 2:2 비율

justifyContent : 'space-between' , 'space-around'

gap : '1em' 

width : '80vw'

margin :

rem : root의 사이즈 body의 폰트 사이즈의 한글자
em : 현재 있는 곳의 한글자