728x90
데이터 속성
-
HTML 데이터 속성(data-*) 완벽 가이드 🚀 활용법부터 실전 예제까지!Developer 2025. 2. 12. 10:36
1. HTML 데이터 속성(data-*)이란?HTML5에서 도입된 데이터 속성(data-*)은 HTML 요소에 사용자 정의 데이터를 저장할 수 있도록 하는 기능입니다. 이를 통해 추가적인 정보를 HTML 내부에 담고, JavaScript에서 이를 쉽게 가져와 활용할 수 있습니다.✅ 예제: 특정 버튼에 data-id="1234" 값을 추가하면 JavaScript로 해당 값을 쉽게 읽어올 수 있음.📌 기본 문법Hello, User! 이제 JavaScript를 사용해 데이터를 가져올 수 있습니다.const div = document.querySelector("div");console.log(div.dataset.key); // "1234"console.log(div.dataset.user); // "john..