HTML 데이터-* 속성
예시
data-* 속성을 사용하여 사용자 지정 데이터를 포함합니다.
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
정의 및 사용
data-*속성은 페이지 또는 응용 프로그램에 대한 전용 사용자 지정 데이터를 저장하는 데 사용됩니다 .
data-*속성은 모든 HTML 요소에 사용자 정의 데이터 속성을 포함할 수 있는 기능을 제공합니다 .
그런 다음 저장된(사용자 정의) 데이터를 페이지의 JavaScript에서 사용하여 Ajax 호출 또는 서버 측 데이터베이스 쿼리 없이 보다 매력적인 사용자 경험을 생성할 수 있습니다.
data-*속성은 두 부분으로 구성됩니다 .
- 속성 이름에는 대문자가 포함되어서는 안 되며 접두사 "data-" 뒤에 최소 한 문자 이상이어야 합니다.
- 속성 값은 임의의 문자열일 수 있습니다.
참고: "data-" 접두사가 붙은 사용자 정의 속성은 사용자 에이전트에서 완전히 무시됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
통사론
<element data-*="somevalue">
속성 값
| Value | Description |
|---|---|
| somevalue | Specifies the value of the attribute (as a string) |
관련 페이지
HTML 튜토리얼: HTML 속성
HTML DOM 참조: HTML DOM getAttribute() 메서드