[HTML5] HTML 데이터 속성

1. HTML 데이터 속성

 

 HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다. 한마디로 자바스크립트에서 변수를 사용하듯이, 일종의 html의 변수 역할이라고 말할 수 있다.

 

 

 

2. 일반 속성과 데이터셋 속성

 

 데이터셋도 일종의 속성(attribute)이다. 보통 html에서 속성이라 하는 것은 여러분도 잘 알듯이 id, class, src, title 등의 태그에 붙이는 어트리뷰트를 말한다. 이들 속성은 특정 태그의 소스 경로나 이름, 너비, 아이디를 기재하는데 정해져 있다.

그런데 html 태그에 그 엘리먼트만이 지니고 있는 고유한 커스텀 값을 지정해 사용하고 싶을 때가 있다. 마치 아래 코드처럼 input 태그의 value 속성으로 값을 기재해 주면, 자바스크립트로 별도로 변수를 만들어 이 변수는 어느 엘리먼트의 값을 표현한다는 매칭시키는 작업을 줄일 수 있어 직관성과 생산성이 향상되기 때문이다.

<input type="hidden" name="Country" value="Norway">

 

 실제로 데이터 속성이 나오기 이전에는, 만일 html상에 어떠한 고유한 값을 저장할 필요가 있다면 다음과 같이 hidden으로 태그를 문서로부터 감추고 value 속성으로 값을 저장하는 용도로써 쓰이기도 하였다.

 

하지만 value 속성은 아무 엘리먼트에서 사용할 수 있는 속성이 아니다. (사용은 가능하지만 HTML 표준에 위배된다)

그래서 만일 input 태그 외에 시맨틱 태그나 div 태그에도 별도의 태그의 고유 값을 저장하고 싶을 때는 자바스크립트로 복잡하게 우회하여야 했다.

 

그러나 데이터셋은 태그 내에 data- 로 시작하는 키워드를 기재하고 그 뒤에 하이픈(-)이 조합된 형태로 개발자가 정의하고 싶은 속성명을 기재해 주고 속성값을 써주면 사용자 변수가 완성된다.

<input type="text" data-country="Norway" data-code="c03" name="Country">

 

 데이터 속성을 쓰면 훨씬 스크립트가 간결해지며 또한 하나의 요소에는 여러 데이터 속성을 동시에 사용할 수도 있어 확장성이 높다.

 

 

 

3. 데이터셋 사용 사례

<button data-id="341">좋아요♡</button>

 앞서 말했듯 데이터셋을 이용해도 되고 안 해도 된다. 다만 아래와 같이 '좋아요 개수 버튼'을 표시하는 요소를 만들 경우, 이 좋아요 개수를 자바스크립트로 가지고 있는 것보다 이렇게 직접 버튼 요소에 개수값을 인라인으로 직접 표현함으로써 보다 직관적이게 된다.

 

 

 

4. 데이터셋에 배열, 객체 데이터 저장

 좀 더 기능을 응용하여, 데이터 속성에는 단순 문자열을 넘어 객체와 배열도 저장이 가능하다. 정확히 말하자면 원래는 문자열만 저장이 가능하지만, 객체 형태로 된 문자열과 배열 형태로 된 문자열을 노드에 지정하고 이를 자바스크립트로 별도의 파싱 작업을 통해 사용함으로써, 마치 html 엘리먼트에 인라인으로 객체 데이터를 기재할 수 있다는 응용 방법이 있다고 보면 된다. (자바스크립트로 파싱하는 방법은 바로 뒤에서 다룬다)

 

<!-- 객체 형태로 된 문자열 데이터셋 -->
<div data-person='{"name": "Chris Coyier", "job": "Web Person"}'></div>

<!-- 배열 형태로 된 문자열 데이터셋 -->
<div data-fruit='["apple", "banana", "melon"]'></div>

 

 

 

 

※ 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%85%8Bdata-%EC%86%8D%EC%84%B1