HTML class 속성

정의 및 사용법

class 요소의 클래스 이름(classname)을 정의합니다.

class 속성은 주로 스타일 시트에서 클래스(class)를 지정하는 데 사용됩니다. 그러나, JavaScript(HTML DOM)를 통해 지정된 클래스를 가진 HTML 요소를 변경할 수도 있습니다.

또한 참조하십시오：

HTML 강의:HTML 속성

CSS 강의:CSS 문법

CSS 참조서:CSS .class 선택자

HTML DOM 참조서:HTML DOM getElementsByClassName() 메서드

HTML DOM 참조서:HTML DOM className 속성

HTML DOM 참조서:HTML DOM classList 속성

HTML DOM 참조서:HTML DOM Style 객체

예제

예제 1

HTML 문서에서 class 속성을 사용하다：

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">이는 중요한 단락입니다.:)</p>
</body>
</html>

직접 시험해 보세요

페이지 하단에 더 많은 예제가 제공됩니다.

문법

<element class="classname">

속성 값

값 설명
classname

요소에 하나 이상의 클래스 이름을 지정합니다.

여러 클래스를 지정하려면 공백으로 구분할 수 있습니다.

이는 하나의 HTML 요소에 여러 CSS 클래스를 조합할 수 있게 합니다.

예를 들어：<span class="left important">

이름 규칙：

  • A-Z 또는 a-z로 시작해야 합니다.
  • 영어 대문자(A-Za-z)、영어 소문자(0-9)、하이픈("-")와 언더스코어("_")를 사용할 수 있습니다.

더 많은 예제

예제 2

HTML 요소에 여러 클래스를 추가합니다：

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">제목 1</h1>
<p>한 단락입니다.</p>
</body>
</html>

직접 시험해 보세요

예제 3

JavaScript를 사용하여 첫 번째 class="example" 요소(인덱스 0)에 노란 배경색을 추가합니다.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

직접 시험해 보세요

예제 4

JavaScript를 사용하여 "mystyle" 클래스를 id가 "myDIV"인 요소에 추가하세요:

document.getElementById("myDIV").classList.add("mystyle");

직접 시험해 보세요

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원