여러 CSS 클래스를 가진 요소

하나의 태그에 여러 개의 CSS 클래스를 동시에 지정할 수 있습니다. class 속성에 공백으로 구분하여 클래스들을 나열하면 됩니다.

예제를 통해 살펴보겠습니다. 다음과 같은 CSS 클래스들이 있다고 가정합니다:

.error {
	color: red;
}
.large {
	font-size: 30px;
	font-family: Arial;
}

단락(paragraph)에 첫 번째 클래스와 두 번째 클래스를 모두 지정해 보겠습니다:

<p class="error large">
	lorem ipsum
</p>

다음과 같은 클래스들이 주어졌습니다:

.success {
	color: green;
}
.error {
	color: red;
}
.large {
	font-size: 30px;
}
.small {
	font-size: 20px;
}

4개의 단락이 있다고 가정합니다. 주어진 클래스를 사용하여 첫 번째 단락은 녹색에 큰 글꼴로, 두 번째 단락은 빨간색에 작은 글꼴로, 세 번째 단락은 빨간색에 큰 글꼴로, 네 번째 단락은 녹색에 작은 글꼴로 만들어 보세요.

자신만의 클래스를 3개 만들어 보세요. 그리고 어떤 태그에 만들어진 세 클래스를 모두 동시에 지정해 보세요.