✏활용방법

data-데이터key="value"

✏예제-1

<body>
    <div data-index="1" data-display-name="box" id="first-box"></div>
    <div data-index="2" data-display-name="square"></div>
    <span data-index="1" data-display-name="box">abc</span>
</body>

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom: 50px;
      }
      [data-display-name="box"] {
        background-color: dodgerblue;
      }
    </style>

✏ 예제-2

<body>
    <div data-index="1" data-display-name="box" id="first-box"></div>
    <div data-index="2" data-display-name="square"></div>
    <span data-index="1" data-display-name="box">abc</span>
</body>

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom: 50px;
      }
      div[data-display-name="box"] {
        background-color: dodgerblue;
      }
    </style>

data-display-name이 box인 속성 중에 div인 태그만 style 적용

✏ 예제-3

<script>
  const box = document.querySelector("div[data-display-name='box']");
  console.log(box.dataset);
  console.log(box.dataset.displayName);
	console.log(box.dataset.index);
 </script>

→ id값은 DOMStringMap에 저장되지 않는다.

→ data값을 지정할땐, 케밥-케이스를 활용하지만, 콘솔로그에 찍힐때는 카멜케이스로 변환된다.