• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
attribute HTML - charset 속성 - 문자셋 지정 (= charset속성 = 차셋속성) ※ 문자인코딩, 언어셋
attribute HTML - checked 속성 ★ - 미리 (체크박스/라디오) 체크 여부 지정 (= checked속성 = …
attribute HTML - cite 속성 - (인용출처/삭제이유/삽입이유) 주소 연결 (= cite속성 = 사이트속성)
attribute HTML - class 속성 ★★★ - 클래스명 선택자 지정 (= class속성 = 클래스속성)
attribute HTML - color 속성 - (HTML5 지원 X) 글자색 지정 (= color속성 = 컬러속성)
attribute HTML - cols 속성 - <textarea> 세로열수(=세로줄수 = 가시너비) 지정 (= cols속성 …
attribute HTML - colspan 속성 ★ - 병합할 가로셀 개수 지정 (= colspan속성 = 콜스팬속성)
attribute HTML - content 속성 ★ - 메타데이터 값 지정 (= content속성 = 콘텐트속성|컨텐트속성)
attribute HTML - contenteditable 속성 - 요소 내용 수정 가능 여부 지정 (= contentedit…
attribute HTML - controls 속성 - (오디오/비디오) 플레이어의 제어창 표시 여부 (= controls속성…
attribute HTML - coords 속성 - 이미지맵 링크영역 좌표 표시 (= coords속성 = 코즈속성/코드스속성/…
attribute HTML - data 속성 - <object> 태그의 리소스 URL 주소 지정 (= data속성 = 데이터속…
attribute HTML - data-* 속성 ★★★ - 특정 (페이지/애플리케이션)의 사용자 데이터 저장 (= data-속…
attribute HTML - datetime 속성 - 날짜시간 지정 (= datetime속성 = 데이트타임속성)
attribute HTML - default 속성 - 기본 재생 트랙 지정 (= default속성 = 디폴트속성)
attribute HTML - defer 속성 ★★★ - 페이지 파싱 완료 후 외부스크립트 실행 (= defer속성 = 디퍼속…
attribute HTML - dir 속성 - 텍스트 출력방향 지정 (= dir속성 = 디르속성|디렉션속성)
attribute HTML - dirname 속성 - input/textarea 요소의 텍스트 방향 지정 (= dirname속…
attribute HTML - disabled 속성 - 요소 비활성화 지정 (= disabled속성 = 디스에이블드속성|디세이…
attribute HTML - download 속성 - 파일 다운로드 지정 (= download속성 = 다운로드속성) ※ 다운…
9/18
목록
찾아주셔서 감사합니다. Since 2012