더북(TheBook)

5.1.4 클래스 선택자

클래스 선택자는 HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법입니다. 이때 속성값 앞에 . 기호를 붙입니다.

형식

.class속성값{/* CSS 코드 */}

클래스 선택자는 실무에서 가장 많이 사용하는 선택자 지정 방법입니다. class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있어서 하나의 클래스 스타일을 잘 정의하면 여러 곳에서 사용할 수 있습니다.

05/01/class_selector.html

<style>
  .red{
    color:red;
  }
  .blue{
    color:blue;
  }
</style>
(중략)
<h1 class="red">클래스 선택자</h1> 

<p class="blue">class 속성값으로 선택자를 지정합니다.</p> 
<p class="blue">class 속성은 id 속성과 다르게 속성값을 중복해서 사용할 수 있습니다.</p> 

class 속성값이 red인 요소에 적용

class 속성값이 blue인 요소에 적용

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.