🙋🏻‍♀️ 목표: 추가적으로 필요한 내용들을 확인해서 정리해보자.🚀

1. HTML 데이터 속성들

🙌 HTML5에 추가된 data attributes는 MDN 웹 문서에 자세히 안내되어 있다. 이것은 HTML에서 기본적으로 제공하는 속성은 아니지만 JS와 연결하기 위한 수단으로 만들어졌다. 어떻게 보면 생겨날 수 밖에 없었던 아주 획기적인 기술이며 필요할 때 우리가 원하는 정보를 추가할 수 있고, 추가된 속성과 속성값들을 이용해서 다양한 수준의 웹 페이지를 구현해 낼 수 있다.

2. HTML 데이터 속성 작성 방법

🙌 작성 방법은 매우 쉽다. data-* 이다. camelCase 형태로 작성하지 않고 - 기호를 사용하여 보기 좋게 작성한다.

🚨한 가지 주의해야 할 점은 data 속성은 단순히 JS 로직을 처리하기 위한 도구이다.

웹 브라우저 개발 툴에서 우리가 적었던 데이터 속성이 다 나오기 때문에 민감한 정보가 담겨져 있다면 보안상의 문제가 있을 수 밖에 없다. 따라서 중요한 정보들은 따로 보관하도록 한다.

<div data-index="1" data-display-name="team"></div>
<div data-index="2" data-display-name="team1"><div>