HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML class 속성

globale 속성 class의 값은 공백으로 구분된 요소의 클래스 이름(classes) 목록입니다. 이는 CSS와 JavaScript가 클래스 선택자(class selectors) 또는 DOM 메서드( document.getElementsByClassName)를 통해 특정 요소를 선택하고 접근할 수 있게 합니다.

HTML 전역 속성

온라인 예제

HTML 문서에서 class 속성 사용:

예제

!DOCTYPE html
<html
<head
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>
<style
h1.intro {
　　　　color: blue;
}
p.important {
　　　　color: green;
}
</style>
</head>
<body
<h1　class="intro">헤더　1</h1>
<p>A 문단.</p>
<p class="important">이는 중요한 문단입니다. :)</p>
</body>
</html>

보여보세요 ‹/›

class의 이름에 대한 요구사항은 없지만, 웹 개발자는 요소의 표현을 설명하는 대신 요소의 의미와 목적을 표현할 수 있는 이름을 사용하는 것이 좋습니다. (예를 들어, 요소가 기울임자일 수 있지만, class의 이름은 italics가 아니어야 합니다). 의미 있는 이름은 페이지 표현이 변경되더라도 합리적으로 유지됩니다.

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저가 class 속성을 지원합니다

정의 및 사용법

class 속성은 요소의 클래스 이름을 정의합니다.

class 속성은 요소에 하나나 여러 개의 클래스 이름을 지정합니다.

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

HTML 4.01 HTML과5사이의 차이

HTML에서5 에서, class 속성은 어떤 HTML 요소에도 사용할 수 있습니다 (그것은 모든 HTML 요소를 검증합니다. 그러나 유용하지 않을 수 있습니다).

HTML에서 4.01 에서, class 속성은 다음과 같은 데 사용할 수 없습니다: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 및 <title>.

문법

　　 <element>

속성 값

값	설명
classname	요소의 클래스 이름을 정의합니다. 여러 개의 클래스를 정의하려면 클래스 이름을 공백으로 구분합니다. <span>. HTML 요소는 여러 개의 클래스를 사용할 수 있습니다. 이름 규칙: A로 시작해야 합니다-Z 또는 a-z로 시작 다음 문자가 될 수 있습니다: (A-Za-z), 숫자 (0-9), 테이크 ("--), 하이픈 ("_") HTML에서, 클래스 이름은 대소문자 구분됩니다

더 많은 예제

요소에 여러 개의 클래스 추가
HTML 요소에 여러 개의 클래스를 추가하는 방법.

HTML 전역 속성

HTML: <template> 태그