HTML에서 요소의 클래스 속성을 기반으로 스타일 규칙을 정의합니다. 해당 클래스가 있는 요소는 정의된 규칙에 따라 형식이 지정됩니다. 이것을 클래스 선택자라고 합니다. 특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자를 쓰고 그 뒤에 클래스 이름을 입력해야 합니다(예:.black
)..black {
color: #000000;
} 문서에서 class 속성이 검정색으로 설정된 모든 요소에 대해 내용을 검정색으로 렌더링합니다. 예를 들어, class 속성이 검은색으로 설정된
요소에 대해서만 콘텐츠를 검은색으로 렌더링합니다. h3.black {
color: #000000;
}
또 다른 예에는
태그의 스타일 지정이 포함될 수 있습니다. 다음을 통해 모든
요소의 스타일을 class="device"
로 지정합니다.예시
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html> 태그의 스타일은 여러 클래스, 즉 여기에서 장치 및 액세서리로 수행할 수 있습니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>