HTML 커스텀 속성

data-* 으로 커스텀 속성 설정가능 

하나의 태그에 커스텀 속성의 갯수 제한 X
무조건 소문자로 인식 (대문자도 소문자로 인식)

=(이퀄) 다음부터 모두 문자로 인식
ex) data-id="1" : “1”로 인식 / data-id=1 : 1로 인식

<button type=”button” class=”btn btn-primary” data-name="update" data-id=1>수정하기</button>

CSS 에서 사용

 - 속성 Selector의 경우

button[data-id=1] {
  width: 400px;
}

JavaScript 에서 사용

 - getAttribute() 사용

 let id = document.querySelector('button').getAttribute('data-id'); 	// 1

 - dataset 객체로 커스텀속성 네이밍부분으로 접근하여 사용

 let button = document.querySelector('button'); 
 button.dataset.id // 1
 button.dataset.name // "update" 

JQuery 에서 사용

 - data() 사용: 커스텀속성 네이밍부분으로 접근하여 사용

let button = $('button').data('id'); 	// 1

 - attr() 사용

let button = $('button').attr('data-id'); 	// 1

Thymeleaf 에서 사용

• th:attr를 사용

<tr th:attr="data-id=${data.id}, data-name=${data.name}"></tr>