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인 요소에 적용

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