목차
- data-* 예제 - 사용자 데이터 저장
- data-* 정의
- data-* 구문
data-* 예제 - 사용자 데이터 저장
※ 언어 클릭해서 해당 언어 역할 확인 가능.
※ 아래 예제에서 각 언어의 id 속성은 필수 X.
<script>
function showRole(lang) {
var langRole = lang.getAttribute("data-lang-role");
demo.innerHTML = lang.innerHTML + " 역할: " + langRole;
}
</script>
<ul>
<li onclick="showRole(this)" id="html" data-lang-role="구조">HTML</li>
<li onclick="showRole(this)" id="css" data-lang-role="디자인">CSS</li>
<li onclick="showRole(this)" id="js" data-lang-role="기능">JS</li>
</ul>
<div id="demo"</div>
결과보기
data-* 정의
지정(페이지/프로그램) 전용의 사용자 지정 데이터 저장.
1.
- 전역속성이라 모든 요소에 사용 가능.
- data-* 속성에 저장된 데이터를 JavaScript에서 사용해 브라우저에서 바로 사용 가능. (※ Ajax 호출이나 서버측 데이터베이스 쿼리 안 해도 됨.)
- "data-" 접두사 붙은 사용자정의속성은 사용자 에이전트에서 완전히 무시됨.
2. data-* 속성은 두 부분으로 구성됨.
- * (= data- 접두사 뒤 사용자정의 속성명) 부분 ─ ① 대문자 사용 금지 ② 적어도 한 문자 이상 필요.
- 속성값 부분 ─ 모든 문자열 가능.
3.
주요 최신 브라우저 모두 지원.
data-* 구문
<element data-*="somevalue">
[속성명]
*
사용자정의 속성명
- 대문사 사용 X
- 최소 1글자 이상
- 하이픈(-) 사용해 여러 단어 사용 가능 (예) data-lang-role
[속성값]
somevalue
데이터 문자열. (※ 모든 문자열 가능)
