문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== HTML data-* Attributes ======
<WRAP left notice 80%>
  * description : %%HTML data-*%% Attributes
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-08
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article===== 
[[https://www.w3schools.com/tags/att_global_data.asp|HTML data-* Attributes]]\\


====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-*%%'' 속성은 두 부분으로 구성됩니다:\\

  1. 속성 이름은 대문자를 포함할 수 없으며 접두사 %%"data-"%% 뒤에 최소한 한 문자 이상을 표기해야 합니다.
  2. 속성 값은 임의의 문자열이 될 수 있습니다.

**Note:** 접두사 %%"data-"%%가 붙은 사용자 정의 속성은 사용자 에이전트에게 완전히 무시됩니다.\\

=====Syntax=====
<code html>
<element data-*-"somevalue">
</code>

=====Attribute Values=====
^ Value      ^ Description          ^
| somevalue  | 속성 값을 (문자열로) 지정합니다.  |
















































{{tag>오션 HTML data-* Attributes}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구