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

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

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

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

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

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

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

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

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

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

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

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

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

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

import './styles.css';

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

<p class="class2">텍스트</p>

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

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

div를 포함하고, div 안에 두 개의 버튼이 있는 React 컴포넌트를 생성하세요. 태그에 대한 CSS 스타일이 포함된 파일 styles.css를 생성하세요. 작성한 스타일을 컴포넌트 태그에 적용하세요.