CSS 요소 클래스

이전 강의들에서는 태그 이름을 기준으로 페이지 요소를 선택하여, 예를 들어 모든 단락에 동시에 스타일을 적용했습니다. 그러나 페이지에는 서로 다른 스타일이 적용되어야 하는 다양한 유형의 단락이 있을 수 있습니다. 이러한 문제를 해결하기 위해 서로 다른 단락을 서로 다른 CSS 클래스로 분류할 수 있습니다.

태그를 특정 클래스에 속하게 하려면, 해당 태그에 class 속성을 작성하고, 그 안에 문자, 숫자, 밑줄 및 하이픈으로 구성된 사용자가 지은 클래스 이름을 넣어야 합니다.

예제를 통해 살펴봅시다. 두 가지 유형의 클래스 - eee와 zzz를 가진 단락들을 만들어 봅시다:

<p class="eee">
	클래스 eee를 가진 단락
</p>
<p class="eee">
	클래스 eee를 가진 단락
</p>
<p class="zzz">
	클래스 zzz를 가진 단락
</p>
<p class="zzz">
	클래스 zzz를 가진 단락
</p>

이제 CSS에서 다양한 클래스를 가진 단락들을 선택하고 몇 가지 스타일을 적용해 봅시다. 예를 들어, 클래스 zzz를 가진 단락은 빨간색으로, 클래스 eee를 가진 단락은 초록색으로 칠해 봅시다.

이를 위해 CSS 파일에서 우리의 클래스들을 선택해야 합니다. 선택은 다음과 같은 구문을 가집니다: 먼저 점(.) 기호가 오고, 그 뒤에 우리가 지은 클래스 이름이 옵니다. 즉, 클래스 eee를 선택하려면 .eee를 작성하고, 클래스 zzz를 선택하려면 .zzz를 작성해야 합니다.

자, 위에서 설명한 것을 해봅시다. 우리의 HTML에 우리가 정의한 클래스에 대한 CSS 스타일을 추가해 보겠습니다:

.eee {
	color: green;
}
.zzz {
	color: red;
}

우리의 코드를 실행하면 결과는 다음과 같습니다:

다음 코드가 주어집니다:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

클래스 odd를 가진 요소는 빨간색으로, 클래스 eve를 가진 요소는 초록색으로 칠하세요.

다음 코드가 주어집니다:

<h2 class="eee">제목</h2>
<p class="eee">
	단락
</p>
<p class="eee">
	단락
</p>
<p>
	클래스가 없는 단락
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

클래스 eee를 가진 모든 요소를 빨간색으로 칠하세요.

이전 문제에서 클래스가 ul 태그에 지정되어 있는데도 왜 li 태그들이 빨간색으로 칠해지는지 설명하세요.