data 속성에 대해서 설명해주세요.

HTML의 data 속성은 사용자 정의 데이터를 HTML 요소에 추가하는 데 사용되는 속성입니다. 이 속성을 사용하여 웹 개발자는 요소에 추가 정보를 제공하고 JavaScript 및 CSS에서 해당 정보를 활용할 수 있습니다.

data 속성 사용 방법

data 속성은 data- 접두사를 가진 속성 이름을 사용하여 정의됩니다. 일반적으로 다음과 같은 형식을 가집니다:

<div data-key="value"></div>

여기서 data-key는 속성의 이름이며, value는 사용자 정의 데이터의 값입니다. data-key의 이름은 원하는 대로 지정할 수 있으며, 여러 요소에 동일한 이름을 사용할 수도 있습니다.

JS에서 사용하는 법

JavaScript에서는 dataset 객체를 사용하여 data 속성의 값을 가져올 수 있습니다. 예를 들어, 위의 예제에서 data-key 속성 값을 JavaScript에서 가져오려면 다음과 같이 할 수 있습니다:

const element = document.querySelector('div');
const value = element.dataset.key;
console.log(value); // "value"

CSS에서 사용하는 법

CSS에서도 data 속성을 활용할 수 있습니다. CSS에서 data 속성의 값을 사용하려면 attr()(attribute의 약자) 함수를 사용해야 합니다. 예를 들어, data-key 속성 값을 CSS의 content 속성에 사용하려면 다음과 같이 할 수 있습니다:

div::before {
  content: attr(data-key);
}

위의 CSS 코드는 해당 요소의 data-key 속성 값으로 ::before 가상 요소의 content 속성을 설정합니다.