CSS 클래스 선택자 의미와 사용법 및 예제

by

CSS 클래스 선택자 의미는 HTML 태그의 클래스 속성을 선택자로 지정할 때 사용합니다. 클래스는 선택자 지정시 마침표 . 기호를 사용합니다.

CSS 클래스 선택자

클래스 선택자(Class Selector)란 HTML 태그의 클래스 속성을 선택자로 지정할 수 있는 기능입니다. 클래스는 선택자로 지정시 마침표 . 를 클래스명 앞에 붙입니다.

클래스명이 abc인 경우 .abc로 작성합니다.

.abc {
  color: red;
}

클래스명이 abc가 적힌 태그 부분만 붉은 글씨(color: red;)로 변하게 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .abc {
         color: red;
      }
    </style>
  </head>
  <body>
    <h1>클래스 선택자</h1>
      <p class="abc">클래스명이 abc인 모든 태그가 붉은 글씨로 변합니다.</p>
      <p>클래스명이 없는 태그는 선택되지 않습니다.</p>
      <p>클래스명 호출시 <strong class="abc">마침표</strong>를 사용합니다.</p>
  </body>
</html>

클래스명은 중복이 가능하므로 abc라고 적힌 모든 부분에 CSS 효과가 동시에 적용됩니다.