HTML
데이터 속성

통사론

• <element data-custom-name="somevalue">

매개 변수

데이터 속성 사용

HTML5 data-* 속성은 HTML 요소에 데이터를 저장하는 편리한 방법을 제공합니다. 저장된 데이터는 JavaScript를 사용하여 읽거나 수정할 수 있습니다.

<div data-submitted="yes" class="user_profile">
  … some content …
</div>

• 데이터 속성 구조는 data-* . 즉, 데이터 속성의 이름은 data- 부분 뒤에옵니다. 이 이름을 사용하여 속성에 액세스 할 수 있습니다.

• 문자열 형식의 데이터 ( json 포함)는 data-* 속성을 사용하여 저장할 수 있습니다.

이전 브라우저 지원

모든 최신 브라우저가 지원하는 HTML5에 데이터 속성이 도입되었지만 HTML5 이전의 구형 브라우저는 데이터 속성을 인식하지 못합니다.

그러나 HTML 사양에서 브라우저가 인식하지 못하는 속성은 그대로 두어야하며 브라우저는 페이지를 렌더링 할 때이를 무시합니다.

웹 개발자는이 사실을 이용하여 HTML 사양의 일부가 아닌 속성 인 비표준 속성을 만들었습니다. 예를 들어, <img> 태그의 스펙에 value 속성이 없으며 전역 속성이 아니기 때문에 벨로우 라인의 value 속성은 비표준 속성으로 간주됩니다.

<img src="sample.jpg" value="test" />

즉, 이전 브라우저에서는 데이터 속성이 지원되지 않지만 여전히 작동하며 동일한 일반 JavaScript setAttribute 및 getAttribute 메소드를 사용하여 dataset 속성을 설정 및 검색 할 수 있지만 최신 브라우저에서만 지원되는 새 dataset 등록 정보는 사용할 수 없습니다.