[React 리액트] CSS 적용

* 이미지 불러오기

이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용

import tistoryImg from './assets/tistory.png';

function Tistory() {
  return <img src={tistoryImg} alt="티스토리 이미지" />;
}

export default App;

 

1) 인라인 스타일

: 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용

- 프로퍼티 이름: CSS 속성 이름

- 프로퍼티 값: CSS 속성 값

⚠️ border-radius 또는 font-size와 같이 가운데 대시가 들어가는 것 그대로 쓰면 에러 발생 ➡️ 대시기호 없이 카멜 케이스로 작성해야함

eg/ borderRadius, fontSize

const style = {
  borderRadius: '50%',
  width: '120px',
  height: '120px',
};

 

2) CSS 파일 불러오기

: import 구문으로 파일 불러오기(from 키워드 없이 사용)

import './Tistory.css';

- CSS 파일에 정의된 클래스명을 className prop에 문자열 넣음

import tistoryImg from './assets/tistory.png';
import '.Tistory.css';

function Tistory({ className = '' }) {
	const className = `Tistory ${className}`;
    return <img className={classNames} src{tistoryImg} />;
    
 }
 
 export default App;