CSS . 클래스 선택기
예시
class="intro"로 모든 요소를 선택하고 스타일을 지정합니다.
.intro {
background-color: yellow;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
선택기 는 .class특정 클래스 속성을 가진 요소를 선택합니다.
특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자를 입력한 다음 클래스 이름을 입력합니다.
특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있습니다. 이렇게 하려면 요소 이름으로 시작한 다음 마침표(.) 문자를 쓰고 그 뒤에 클래스 이름을 씁니다(아래 예제 1 참조).
HTML 요소는 둘 이상의 클래스를 참조할 수도 있습니다(아래 예제 2 참조).
| 버전: | CSS1 |
|---|
브라우저 지원
| Selector | |||||
|---|---|---|---|---|---|
| .class | Yes | Yes | Yes | Yes | Yes |
CSS 구문
.class {
css declarations;
}
더 많은 예
실시예 1
class="hometown"으로 모든 <p> 요소의 스타일 지정:
p.hometown {
background-color: yellow;
}
실시예 2
이 <p> 요소는 class="center" 및 class="large"에 따라 스타일이 지정됩니다.
<p class="center large">This paragraph refers to two classes.</p>