[attribute] HTML - data-* 속성 ★★★ - 특정 (페이지/애플리케이션)의 사용자 데이터 저장 (= data-속성 = 데이터하이픈속성/데이터속성)

1. data-* 예제 - 사용자 데이터 저장
2. data-* 정의
3. 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

데이터 문자열. (※ 모든 문자열 가능)