HTML data-* 속성

정의와 사용법

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

data-* 속성은 모든 HTML 요소에 사용자 정의 data 속성을 삽입할 수 있는 능력을 부여합니다.

저장된 (사용자 정의) 데이터는 페이지의 JavaScript에서 활용되어 더 나은 사용자 경험을 만들 수 있습니다 (Ajax 호출이나 서버 측 데이터베이스 쿼리 없이).

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

  • 속성 이름은 대문자를 포함하지 않아야 하며, "data-" 접두사 이후에는 최소한 한 문자가 있어야 합니다
  • 속성 값은 어떤 문자열이든 될 수 있습니다

참고事项: 사용자代理는 "data-" 접두사로 시작하는 사용자 정의 속성을 완전히 무시합니다.

추가로 참조:

HTML 강의:HTML 속성

HTML DOM 참조 가이드:HTML DOM getAttribute() 메서드

예제

사용자 정의 데이터를 내장하기 위해 data-* 속성을 사용하세요：

<ul>
  <li data-animal-type="鸟类">오리</li>
  <li data-animal-type="鱼类">황금고기</li>
  <li data-animal-type="蜘蛛">창이</li>
</ul>

직접 시험해보세요

문법

<element data-*="somevalue">

속성 값

값 설명
somevalue 속성 값을 정의합니다 (문자열로).

브라우저 지원

표의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 5.5 2.0 3.1 9.6