HTML5에서는 각 Element들에 대해서 data-* 형식으로 추가 정보를 저장할 수 있다. 특정 요소와 연관되어 있지 않지만 데이터에 대한 확장 가능성을 두고 의미론적으로 HTML 요소에 추가 정보를 저장한다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 data</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
</head>
<body>
<section id="wrap">
<header></header>
<section id="container">
<section id="menu"
data-role="menu"
data-last-value="99"
data-hidden="false"
data-options='{"device":"k342323"}' class="content">
</section>
</section>
<footer></footer>
</section>
</body>
</html>
JQuery로 해당 data 속성의 값을 가져올 수 있다.
.attr : HTML5의 attrbutuer 속성으로 가져옴
.data : dom 객체 속성 (Property)로 가져옴
//attr로 가져오면 String 속성이다.
console.log($("#menu").attr("data-role")); //String "menu"
console.log($("#menu").attr("data-last-value")); //String "99"
console.log($("#menu").attr("data-hidden")); //String "false"
console.log($("#menu").attr("data-options")); //String '{"device":"k342323"}'
//data로 가져오면 실제 data 속성으로 가져온다.
console.log($("#menu").data()); //Object
console.log($("#menu").data("role")); //String "menu"
console.log($("#menu").data("last-value")); //Number 99
console.log($("#menu").data("hidden")); //Boolean false
console.log($("#menu").data("options").device); //String "K342323" (Object의 key로 값 가져옴)
'Frontend Development > HTML' 카테고리의 다른 글
| Frontend 서버 webpack, resource download (0) | 2022.10.13 |
|---|---|
| [HTML] Viewport 개념 (0) | 2022.03.18 |
