커스텀 데이터 속성(Custom Data Attribute)

장돌뱅이 ·2022년 2월 27일

HTML

목록 보기

25/25

커스텀 데이터 속성은 이전 html과는 달리
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 만들어졌다.
현재 태그에 대한 추가적인 정보를 제공한다고 볼 수 있다.

속성의 시작은 반드시 data- 로 시작
-뒤에 이름을 붙여서 원하는대로 데이터를 정의할 수 있으며 붙인 이름으로 js에서 접근가능하다.
하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 사용 제한은 없다. 즉 원하는 만큼 커스텀 데이터 속성 추가 가능.
어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다.
브라우저들은 커스텀 데이터 속성을 만나면 해석하지 않고 건너뛴다. 따라서 화면에 보이는데 아무런 영향을 주지 않음.
자바스크립트와 CSS에서는 기존과 마찬가지로 커스텀 데이터 속성의 정보를 사용할 수 있다.
자바스크립트: dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용