HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML data-*속성

data-* 전역 속성은 사용자 정의 데이터 속성으로 불리며, 모든 HTML 요소에 사용자 정의 데이터 속성을 삽입할 수 있는 능력을 제공하며, 스크립트(일반적으로 JavaScript)를 통해 HTML 간의 독특한 데이터 교환을 할 수 있습니다.

HTML 전역 속성

온라인 예제

data-* 속성을 사용하여 사용자 정의 데이터를 삽입할 수 있습니다：

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<script>
function showDetails(animal)
{
　　　　var animalType = animal.getAttribute("data-animal-type");
　　　　alert("The "　+　animal.innerHTML　+　"은(는)"　+　animalType　+　".");
}
</script>
</head>
<body>
<h1>물종</h1>
<p>클릭하면 원하는 종류를 확인할 수 있습니다：</p>
<ul>
　　<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
　　<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>　　
　　<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>　　
</ul>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저가 data를 지원합니다-* 속성.

정의와 사용법

data-* 속성은 페이지의 후속 애플리케이션에서 사용할 사적인 데이터를 저장하는 데 사용됩니다.

data-* 속성은 모든 HTML 요소에 데이터를 삽입할 수 있습니다.

사용자 정의 데이터는 페이지가 더 나은 상호작용 경험을 제공할 수 있도록 합니다(ajax를 사용하지 않고 서버 측에서 데이터를 쿼리하지 않아도 됩니다).

data-* 속성은 다음 두 부분으로 구성됩니다:

속성 이름에는 대문자가 포함되지 않도록 해야 합니다. data- 뒤에는 최소한 한 문자가 있어야 합니다.
이 속성은 어떤 문자열이든 될 수 있습니다

주의: 사용자 정의 속성 접두사 "data-"은 클라이언트에서 무시됩니다.

HTML 4.01 와 HTML5간의 차이

data-* 속성은 HTML5 추가된.

문법

<element data-*="somevalue">

속성 값

값	설명
somevalue	지정된 속성 값 (문자열 하나)

HTML 전역 속성

HTML: <template> 태그