HTML5의 data-* 속성

HTML5에서 도입된 data-* 속성은 웹 개발자들에게 웹 페이지의 HTML 요소에 추가 정보를 저장할 수 있는 유연한 방법을 제공합니다. 이러한 사용자 정의 데이터 속성은 JavaScript를 통해 쉽게 접근하고 조작할 수 있으며, CSS에서도 일부 사용 사례에 활용될 수 있습니다.

 

data-* 속성이란?

data-* 속성은 HTML 요소에 고유한 정보를 저장하기 위해 설계되었습니다. 이 속성의 이름은 data- 뒤에 사용자가 정의하는 이름으로 구성됩니다. 예를 들어, data-id, data-role 등과 같이 사용할 수 있습니다.

 

속성 읽기

// HTML 요소에서 data-* 속성에 접근하기
const element = document.querySelector('#myElement');
const dataValue = element.dataset.myAttributeName; // 'myAttributeName'은 실제 속성 이름
console.log(dataValue);

이 예제에서는 id가 myElement인 HTML 요소에서 data-myAttributeName 속성의 값을 읽습니다. JavaScript에서는 dataset 속성을 통해 data-* 속성에 접근합니다. data- 뒤의 이름은 camelCase로 변환되어 접근해야 합니다.

 

속성 설정하기

id가 myElement인 요소의 data-myAttributeName 속성에 새로운 값을 설정합니다.

// HTML 요소에 data-* 속성 설정하기
const element = document.querySelector('#myElement');
element.dataset.myAttributeName = 'newValue';

 

CSS에서 data-* 속성 사용하기

data-* 속성은 CSS에서도 특정 요소를 선택하는 데 사용될 수 있습니다. 이는 스타일링에 있어서 추가적인 유연성을 제공합니다.

/* data-role 속성이 'admin'인 요소에 스타일 적용하기 */
[data-role='admin'] {
    background-color: #f0f0f0;
}

 

 

출처 : chatGpt