React에서 스타일링 시 전역 CSS 사용

React 컴포넌트 App가 있다고 가정해 봅시다. 그 안에는 div가 있고, div 안에는 세 개의 단락이 있습니다:

App.jsfunction App() {
  return (
    <div>
      <p>텍스트</p>
      <p>텍스트</p>
      <p>텍스트</p>
    </div>
  );
}

이 컴포넌트에 스타일을 적용해 보겠습니다. 이를 위해, 컴포넌트가 있는 동일한 src 폴더에 일반 CSS 파일 styles.css를 생성하여 태그에 대한 스타일을 작성하겠습니다.

이 파일에서 div에 대한 클래스 class1와 스타일을 생성합니다:

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

이제 첫 번째 단락에 대한 스타일을 가진 클래스 class2를 추가합니다:

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

두 번째 단락에 대한 스타일을 가진 클래스 class3:

styles.css.class3 {
  font-style: italic;
  color: brown;
}

마지막으로, 마지막 단락에 대한 클래스 class4를 생성합니다:

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

CSS 파일 작업은 끝났습니다. 남은 것은 작성한 CSS 스타일을 태그에 적용하는 것입니다. 컴포넌트 파일 App.js로 돌아가겠습니다.

반드시 해야 할 첫 번째 작업은 파일 상단에 스타일 파일 styles.css의 import 문을 추가하는 것입니다:

App.jsimport './styles.css';

이제 컴포넌트에서 파일의 CSS 클래스를 적용하려면 class 속성을 사용합니다. 첫 번째 단락에는 클래스 class2가 있었습니다. 적용해 보겠습니다:

App.js<p class="class2">텍스트</p>

나머지 태그에도 비슷하게 클래스를 추가합니다. 결과적으로 다음 코드를 얻습니다:

App.js<div class="class1">
  <p class="class2">텍스트</p>
  <p class="class3">텍스트</p>
  <p class="class4">텍스트</p>
</div>