html5의 data- 속성 톺아보기

 

Data 속성은 HTML5 속성에서 제공하고 있으며 조금만 이해하고 실제 코드에 적용하여 사용하기 시작하면

굉장히 편리한 기능을 제공합니다. 

지금부터 알아두면 쓸모 있는 신비한 "Data-" 대해서 살펴봅시다.

1) data 속성. 그는 누구인가?

HTML5에서 새롭게 소개된 HTML5 data Attributes는 사용자 데이터 속성으로 태그 내에 'data- 로 시작하는 속성은 개인 데이터로 규정한다.'는 내용입니다. 

여기서 핵심은 "사용자 데이터 속성" 이란 말인데요. 쉽게 설명하자면 data와 하이픈(-)이 조합된 형태로 data- 뒤에 개발자가 정의하고 싶은 마음대로 정의하면 된다는 이야기입니다. 

 

그래도 이해가 잘 안 되시면 아래 예시 코드를 한번 살펴볼게요.

 

A) data- 속성 적용 예시

// html 
<span class="food" data-price="60000">Data Attributes Test</span>

 

B) data- 속성은 복수로도 지정 가능합니다. 

// html 
<span class="food" data-name="coffee" data-city="jamaica" data-type="americano">Data Attributes Test</span>

2) data  속성의 사용

간단히 data 속성에 대해서 살펴보았습니다. 그런데.. 그럼 왜?? data- 코드를 사용해야 하는가? 하는 의문이 드실거예요.

data 속성을 사용하면 장점은 스크립트를 핸들링하기 위해서 의미 없는 클래스나 ID 사용을 하지 않아도 되고 클래스가 이미 멀티클래스로 많이 사용된 경우 data 속성을 준 요소만 별로도 스타일 요소를 적용할 수 있습니다. 더욱이 data- 속성은 HTML 태그 내에서 별다른 역할을 하지 않는 단순한 데이터이기 때문에 화면의 레이아웃에도 전혀 영향을 주지 않아요.

 

이해가 안돼도 조금씩 따라 하시면 어느 순간 이해가 될 거예요.

천천히 한번 살펴볼게요.

 

2-1) data 선언 및 호출

data-*로 속성을 저장한 만들어서 Js에서 해당 속성을 읽어올 경우”data-”를 생략하고 배열처럼 Key : Velue처럼 key를 이용하여 data를 읽어올 수 있습니다. 

처음 위에서 선언한 data 속성 예시를 참고하여 자세히 알아볼게요.

 

- HTML내에 Data 속성 선언

 

<span class="food" data-name="coffee" data-city="jamaica" data-type="americano">Data Attributes Test</span>

 

- Js에서 해당 속성을 Key를 이용하여 데이터 추출

let dataName = $("span").data("name");
console.log(dataName)  //Result : coffee

위에선 html에서 선언 되어진 name이라는 속성을 Key로 활용하여 coffee라는 Velue를 얻었습니다. 도시정보나 음료 타입 정보도 동일한 방법으로 모두 가능해요. 벌써 data 속성이 사랑스럽게 느껴지지 않나요?

 

2-2) data 속성을 활용한 조건문 활용

data 속성을 이용해서 조건문을 만들어 데이터를 유동적으로 변경도 가능합니다. 

// html 
<div data-content="tab">Tab data</div>

 

// js
// data-content 속성이 tab 일때만 실행한다.
if ( $('div').data('content') !== 'tab' ){
    $('div').removeClass('is-active');
}
else {
    $('div').addClass('is-active');
}

2-3) data 속성 삭제

HTML에 data-*로 저장된 data들은 removeData()를 이용하여도 지워지지 않는 문제가 있는데 이런 경우는. data(“name”, null)로 저장되어있는 값을 null로 바꿔주는 것으로 해결이 가능합니다.

$('selector').removeData(key);

2-4) data 속성으로 CSS 스타일 적용하기

data 속성을 활용하면 별도의 Class나 ID를 사용하지 않아도 CSS 스타일 선언이 가능합니다. 정말 멋지지 않나요?

// html
<div data-name="test">Test</div>

 

[data-name="test"] {color:#731aed; color:#731aed; font-size:20px;}

 

지금까지 HTML5에서 제공하는 data 속성에 대해 알아봤는데 조금씩 연습하셔서 실제 프로젝트에서 조금이나마

도움이 되었으면 좋겠습니다.  감사합니다.