wiki:html:html_note:html_data-_attributes
목차
HTML data-* Attributes
- description : HTML data-* Attributes
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-08
The source of the article
Example
<body> <h1>Species</h1> <p>Click on a species to see what type it is:</p> <ul> <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li> <!-- 클릭 시 The Owl is a bird.라고 alert창에 표시 --> <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li> <!-- 클릭 시 The Salmon is a fish.라고 alert창에 표시 --> <li onclick="showDetails(this)" id="tatantula" data-animal-type="spider">Tarantula</li> <!-- 클릭 시 The Tarantula is a spider.라고 alert창에 표시 --> </ul> <script> function showDetails(animal) { var animalType = animal.getAttribute('data-animal-type'); alert('The ' + animal.innerHTML + ' is a ' + animalType + '.'); } </script> </body>
Definition and Usage
data-* 속성은 페이지 또는 애플리케이션에 개인 사용자 정의 데이터(custom data private)를 저장하는 데 사용됩니다.
data-* 속성은 모든 HTML 요소에 사용자 정의 데이터 속성을 끼워 넣을 수 있는 기능을 제공합니다.
그런 다음 저장된 (사용자 정의) 데이터를 해당 페이지의 JavaScript에서 사용하여 보다 매력적인 사용자 경험을 만들 수 있습니다
(Ajax 호출 또는 서버 측 데이터베이스 쿼리없이).
data-* 속성은 두 부분으로 구성됩니다:
1. 속성 이름은 대문자를 포함할 수 없으며 접두사 %%"data-"%% 뒤에 최소한 한 문자 이상을 표기해야 합니다. 2. 속성 값은 임의의 문자열이 될 수 있습니다.
Note: 접두사 "data-"가 붙은 사용자 정의 속성은 사용자 에이전트에게 완전히 무시됩니다.
Syntax
<element data-*-"somevalue">
Attribute Values
| Value | Description |
|---|---|
| somevalue | 속성 값을 (문자열로) 지정합니다. |
/volume1/web/dokuwiki/data/pages/wiki/html/html_note/html_data-_attributes.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
