react 에서 css 파일을 추가하는 것은 아래의 글에서 다룬 적이 있다.
2021.01.15 - [React] - [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부
[React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부
2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React..
ddeck.tistory.com
이번 글에서는 index.html 파일에서 css 를 적용하도록 하겠다.
간단하게 html 에서 css 를 연결해준 방식과 동일하다.
public/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0 />
<!-- CSS 연결 -->
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />
<title>Typescript_App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app">
</div>
</body>
</html>
위와 같이 css 연결만 해주면 된다. 연결 시 href 부분에 %PUBLIC_URL% 이라고 적었다.
이 디렉토리는 프로젝트의 public 디렉토리를 설정한 것인데 React에서 제공하는 접두어이다.
이제 style.css 파일을 작성해준다.
public/style.css
#app {
background-color: blueviolet;
color: white;
}
간단하게 css 파일이 연결 되었다.
'React' 카테고리의 다른 글
| [React] react-router-dom, loadable, history 를 이용한 페이지 이동 - 떽떽대는 개발공부 (0) | 2021.04.02 |
|---|---|
| [React] react 에서 다국어 처리 적용하기(4) - 떽떽대는 개발공부 (0) | 2021.03.31 |
| [React / typescript] typescript 예제 - 떽떽대는 개발공부 (0) | 2021.03.17 |
| [React] typescript 시작하기 - 떽떽대는 개발공부 (0) | 2021.03.15 |
| [React] redux-saga 이용하기 - 떽떽대는 개발공부 (0) | 2021.03.12 |
댓글