wiki:html:html_note:html_data-_attributes

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:html:html_note:html_data-_attributes [2021/06/08 08:02]
emblim98 만듦
+++ wiki:html:html_note:html_data-_attributes [2023/01/13 18:44] (현재)
@@ 줄 13: / 줄 13: @@
 ====Example====
+<code html>
+  <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>
+</code>
+=====Definition and Usage=====
+''%%data-*%%'' 속성은 페이지 또는 애플리케이션에 개인 사용자 정의 데이터(custom data private)를 저장하는 데 사용됩니다.\\
+\\
+''%%data-*%%'' 속성은 모든 %%HTML%% 요소에 사용자 정의 데이터 속성을 끼워 넣을 수 있는 기능을 제공합니다.\\
+\\
+그런 다음 저장된 (사용자 정의) 데이터를 해당 페이지의 %%JavaScript%%에서 사용하여 보다 매력적인 사용자 경험을 만들 수 있습니다\\
+(%%Ajax%% 호출 또는 서버 측 데이터베이스 쿼리없이).\\
+''%%data-*%%'' 속성은 두 부분으로 구성됩니다:\\
+. 속성 이름은 대문자를 포함할 수 없으며 접두사 %%"data-"%% 뒤에 최소한 한 문자 이상을 표기해야 합니다.
+. 속성 값은 임의의 문자열이 될 수 있습니다.
+**Note:** 접두사 %%"data-"%%가 붙은 사용자 정의 속성은 사용자 에이전트에게 완전히 무시됩니다.\\
+=====Syntax=====
+<code html>
+<element data-*-"somevalue">
+</code>
+=====Attribute Values=====
+^ Value      ^ Description          ^
+| somevalue  | 속성 값을 (문자열로) 지정합니다.  |

/volume1/web/dokuwiki/data/attic/wiki/html/html_note/html_data-_attributes.1623106920.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)