데이터 속성
- HTML5에서 새로 확장된 속성
- 표준 HTML 요소에 추가적인 정보를 저장할 수 있어 유용함
문법
- data-(사용자 정의)
<section
id="blog"
data-index="1"
data-title="cat"
data-date="2010-03-04">
...
</section>JavaScript에서 접근 방법
HTML요소.dataset.정의한이름정의한이름에서data-가 삭제되고 카멜표기법으로 변환된다.- data-camel-string -> dataset.CamelString
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>JavaScript-Sample</title>
<script type="text/javascript" def src="document.js"></script>
</head>
<body>
<button id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth">click</button>
</body>
</html>const el = document.querySelector("#user");
// set the data attribute
console.log(el.dataset.dateOfBirth); // undefined
el.dataset.dateOfBirth='1960-05-31';
console.log(el.dataset.dateOfBirth); // '1960-05-31'
console.log(el.dataset.id); // '1234567890'data-id의 값을 다시 설정하고 읽을 수 있다.
CSS에서 접근 방법
- 선택자[ ] {}로 접근한다.
data-id의 값에 따라서 button의 width가 변화하는 모습을 볼 수가 있다.
My Moto:: 내 스스로와 더불어 주변에게도 좋은 영향을 행사하도록 점검 & 노력..!!