HTML 데이터-* 속성
정의 및 사용
이
data-*
속성은 페이지 또는 애플리케이션에 대한 전용 사용자 정의 데이터를 저장하는 데 사용됩니다.
data-*
속성은 모든 HTML 요소에 사용자 정의 데이터 속성을 포함할 수 있는 기능을 제공합니다 .
그런 다음 저장된(사용자 정의) 데이터를 페이지의 JavaScript에서 사용하여 Ajax 호출 또는 서버 측 데이터베이스 쿼리 없이 보다 매력적인 사용자 경험을 생성할 수 있습니다.
data-*
속성은 두 부분으로 구성됩니다 .
- 속성 이름에는 대문자가 포함되어서는 안 되며 접두사 "data-" 뒤에 최소 한 문자 이상이어야 합니다.
- 속성 값은 임의의 문자열일 수 있습니다.
참고: "data-" 접두사가 붙은 사용자 정의 속성은 사용자 에이전트에서 완전히 무시됩니다.
에 적용
data-*
속성은 전역 속성 이며 모든 HTML 요소에서 사용할 수 있습니다.
요소 | 기인하다 |
---|---|
모든 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>
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Attribute | |||||
---|---|---|---|---|---|
data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |