HTML5 데이터 속성 사용하기 (data-value)

퍼블리싱/html

xhakxh135 2024. 3. 7. 17:24

SMALL

Html에 스타일이나 자바스크립트에서 속성을 지정할 때 클래스로만

주지 않고 html에 있는 data를 이용해서도 적용 할 수 있다.

data- 속성은 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도,

의미론적으로 표준 html에 요소 추가 정보를 저장할 수 있다.

속성의 이름이 data-로 시작하는 모든 속성을 사용할 수 있다.

이렇게 함으로서 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다.

class는 주로 CSS 스타일링이나 JavaScript에서 특정 요소를 선택하기 위한 용도로 사용된다.

같은 클래스명을 가진 요소들은 특정 스타일이나 동작을 공유할 수 있다.

반면에 data- 속성은 요소에 관련된 추가 정보를 저장할 때 사용된다.

이 정보는 보통 JavaScript에서 사용되며,

HTML 요소가 가지는 특정한 상태나 속성을 나타내기 위해 사용된다.

예를 들어, 특정 요소가 활성화 상태인지 아닌지를 나타내기 위해

data-active="true"와 같은 형태로 data- 속성을 사용할 수 있다.

이런 정보는 CSS 스타일링이나 javascript의 동작에 영향을 줄 수 있으며,

class로 표현하기 어려운 상세한 상태 정보를 표현할 때 유용하게 쓰인다.

따라서, class와 data- 속성은 각각의 용도에 맞게 선택하여 사용하는 것이 좋다!!!

예전처럼 hidden을 사용해서 따로 숨김처리를 하지 않아도 된다.

따라서 html이 더 간결해진다.

중요한 내용은 데이터 속성에 지정하지 않는 것이 좋다.

검색 크롤러나 스크린리더가 값을 찾지 못하기 때문이다.

<article 
id="electriccars"
data-columns="3"
data-index-number="12341234"
data-parent="cars"
...
>

css 접근

//부모데이터를 article에 보여주려면 attr() 작성
article::before{
  content: attr(data-parent);
}

//속성 선택자
article[data-columns="3"]{
 width:400px;
}

javascript 접근 방법

article.dataset.columns;
article.dataset.indexNumber;

article.dataset.columns = 5;
//라고 하면 5로 변경가능

LIST