[React] CSS 적용하기

리액트의 파일구조와 컴포넌트를 생성하고 import하는 것을 알아봤다. 다음으로 스타일을 적용하는 것을 알아본다.

[React] CRA 파일구조, 컴포넌트 import시키기

 

내부 스타일 적용

제목 부분을 담당하는 컴포넌트인 Title로 이동한다.

Title컴포넌트의 제목을 출력하는 h1태그에 style로 내부 스타일을 준다.

제목 색이 스타일 대로 변경됬다.

내부 스타일을 따로 정의해서 적용하는 것도 가능하다.

 

외부 스타일 적용

외부 스타일 적용을 위해 header태그에 클래스를 줬다.

css파일을 생성하고 스타일을 작성한다.

생성한 css파일을 제일 상위의 index.js에 import해줬다.

Title컴포넌트에 직접 import해줘도 되고 위와같이 상위에서 import해도 적용된다.

css파일이 적용됬다.