[26.02.02] React 재직자 교육 6 - CSS

리액트에서는 <div Class=""/>대신 ClassName을 사용한다.

 

외부 CSS를 적용 하고 싶다

 

외부 css파일을 임포트 한다.

 

import style from "./style.module.css";

 

경로를 꼭 잘 맞춰줘야된다.

폴더 컴포넌트 안에 있는 css는 그 안에서만 쓰는것이다.

 

실제 적용되는 클래스 이름은 "파일이름_클래스이름_해시값" 이렇게 쓰임

똑같은 이름의 css를 사용하더라도 다른 이름으로 사용이 되어짐

 

백틱 ``기호 안에서 값을 바인딩 할 수 있다.

백틱으로 데이터 바인딩이 일어난다.

 

        <div className={`mt-3 ${style.wrapper} ${isInverted?style.inverted:""}`}>

스타일 적용도 조건에 따라서 css를 적용하고 안하고 할 수 있음

어떤 변수의 값이 true flase 조건을 줘서 적용을 한다

조건에 따라 css바꿔서 사용한다.

백틱을 써서 하나의 값으로 만들어서 
표현식{ }안에서 삼항연산자로 사용이 가능하다.