データムデータ属性(date-*)

HTMLのデフォルトで使用される属性ではなく、開発者が任意の属性を追加したい場合に使用します.

特長

Customデータ属性はhtml tagでは機能しません.

属性の先頭はdata-で始まる必要があります

JavaScriptとCSSは、データムデータ属性の情報も使用できます.

カーブデータアトリビュートに遭遇した場合、ブラウザは分析せずにスキップします.これは画面表示に影響しません.

HTMLの使用

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>

data-이름.

data-で始まるプロパティはすべて使用できます.画面に表示されないように、文章やその他の情報をイラストに載せることができます.

CSSの使用

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

CSSのプロパティセレクタは、データに基づいてスタイルを変更するためにも使用できます.

JavaScriptの使用

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>

<script>

var article = document.getElementById("electriccars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

</script>

JavaScriptのデータセットオブジェクトからデータ属性をインポートできます.

data-の後部を使用します.

엘리먼트.setAttribute("속성명", "속성값");を使用して追加できます.

このプロパティは、読み取りまたは書き込み可能な文字列です.

article.dataset.columns = 5

また、このプロパティの値

を変更することもできます.

注意点

機密データを挿入しないほうがいいです.
->HTMLにデータを入れてJavaScriptでアクセスできるのは誰でもわかりますので、誰でも変更できます.

観察が必要なアクセス可能な重要なコンテンツをデータ・プロパティに格納しないことをお勧めします.
->セカンダリ・アクセス・テクノロジーはアクセスできません.また、検索ロールバックプログラムではデータ属性の値が見つかりません.

ブラウザ固有の互換性の問題

リファレンス

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

https://velog.io/@yunsungyang-omc/