HTML 클래스 속성 정의와 선택자 호출 및 예제


HTML 클래스 어떤 기능일까요? 태그를 그룹화하여, 특정 CSS 효과를 부여하는 기능을 합니다.

HTML 클래스

HTML 클래스 속성은 태그 뒤에 class와 클래스명을 입력하면 됩니다. <p> 태그에 클래스명을 apple로 지정하면 아래 처럼 작성하면 됩니다.

<p class = "apple">
<h1>HTML Class 속성</h1>
<p class="apple">class 속성은 태그 뒤에 한 칸 띄고 입력후, class 이름을 지정해줍니다.</p>

클래스 선택자 지정

클래스 이름이 지정된 태그에 개별 효과를 지정하기 위해서는 CSS 기술이 필요합니다.

class 이름에 선택자를 적용합니다. 클래스를 선택자로 호출시 클래스명 앞에 마침표(.)를 사용합니다.

클래스명이 apple인 클래스를 선택하려면 .apple{ } 명령어를 사용합니다.


.apple {
  background-color: greenyellow;
  padding: 20px;
  border: 4px dotted blue;
  font-size: 17px;
}

클래스 중복

클래스명을 여러 태그에 동시에 적용시킬 수 있습니다.  .banana{ } 에서 지정된 CSS 효과는 클래스명이 banana인 모든 태그에 동시에 적용됩니다.

반면 id 속성은 선택자로 지정시 중복이 불가능합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .banana{
        border:1px solid gray;
        margin:2px;
        padding:10px;
        color:white;
        font-size:20px;
        background-color:indigo;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="banana">코끼리</li>
      <li class="banana">오랑우탄</li>
      <li class="banana">캥거루</li>
    </ul>
  lt;/body>
</html>