HTML data 속성 사용법

data-는 HTML 요소에 추가적인 정보를 저장할 때 사용하는 HTML 속성입니다.

data 속성 사용법

먼저, HTML에서 data-속성을 설정합니다.

그리고 CSS에서 data-속성을 선택하여 다양한 스타일을 줄 수 있습니다.

또한 Javascript에서 data-속성을 선택하여 내용을 추가하거나 변경할 수 있습니다.

참고자료

1-1. 기본 사용법은 class나 id 같은 다른 HTML 속성들과 동일합니다. body, div, p, button 등 원하는 태그에 data-속성을 사용할 수 있습니다.

<tag data-name="속성값">  </tag>

1-2. data-다음에 영어로 내가 원하는 이름을 부여합니다.

예를 들어, 다음과 같이 p태그에 abcd라는 이름의 data 속성을 만들 수 있습니다.

<p data-abcd="속성값"> ... </p>

또는 하이픈 -을 이용해 여러 단어를 길게 연결한 data 속성 이름을 만들 수 있습니다.

<div data-mytext-is-highlight="속성값"> </div>

그리고 하나의 태그 안에 여러 개의 data 속성을 만들 수도 있습니다.

<button data-tooltip="속성값" data-btn-size="속성값"> </button>

3. 속성값에는 숫자 또는 한글 텍스트, 영어 텍스트 같은 문자열을 입력합니다.

예를 들어, 다음과 같은 한글 텍스트를 넣을 수 있습니다.

<button data-tooltip="내용이 복사되었습니다!"> </button>

2-1. CSS에서 다음과 같이 data-속성을 선택할 수 있습니다.

[data-name] {  }

예를 들어, tooltip라는 이름의 data 속성을 선택하여 다음과 같이 color 값을 설정합니다.

[data-tooltip] {
	color: white;
}

2-2. CSS의 ::before 또는 ::after 선택자의 content에 attr( )함수를 이용할 수 있습니다.

[data-name]::before {
  content: attr(data-name);
}

[data-name]::after {
  content: attr(data-name);
}

3-1. 자바스크립트dataset property를 이용해 data 속성에 접근할 수 있습니다.

참고자료

3-2. 자바스크립트getAttribute() 메서드를 이용해 data 속성을 가져 올 수 있습니다.

참고자료