HTML class 전역 특성: 요소 클래스

HTML class 전역 특성은 요소의 “클래스”를 지정하는 공백 구분 목록입니다. 요소 클래스를 사용하면 CSS 클래스 선택자와 JavaScript의 document.getElementsByClassName() 등의 함수로 특정한 요소를 구별해 접근할 수 있습니다.

<p>나레이션: 공연을 시작합니다.</p>

<p class="note editorial">너무 당연한 소리같은데, 수정/삭제?</p>

<p>나레이션: 조심하세요. 엄청 재밌으니까요.</p>

<p class="note">[조명이 위를 비추고 바람이 분다. A가 우측에서 등장.]</p>

.note {
  font-size: 0.8em;
  font-weight: 700;
}

.editorial {
  background: rgb(255, 0, 0, 0.25);
  padding: 10px;
}

.editorial:before {
  content: '에디터: ';
}

불러오는 중...

HTML 명세는 클래스 이름에 대한 요구사항을 제시하지는 않았지만, 클래스 이름을 작성할 땐 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 이름을 사용하는 것이 좋습니다. 즉, 요소의 시각적인 모습보다는 목적을 따온 클래스 이름을 사용하세요. 그러면 나중에 모습을 수정하더라도 클래스 이름이 이상해지지 않고 수정 범위도 줄일 수 있습니다.

명세

HTML Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`class`

MDN browser-compat-data