data-* 속성에 화면 요소와 관련된 사용자 정의 정보를 저장합니다.
data-course-id처럼 data- 뒤에 이름을 붙이면 JavaScript의 element.dataset.courseId로 문자열 값을 읽을 수 있습니다. 스타일 상태에는 class나 표준 상태 속성을 우선하고, 민감한 값이나 큰 데이터는 HTML 속성에 넣지 않습니다.
클릭 리스너는 버튼마다가 아니라 바깥 .course-list에 하나만 달려 있고, e.target.closest로 눌린 지점에서 가장 가까운 data-course-id 버튼을 찾습니다. gap: 8px로 생긴 버튼 사이 빈 곳을 누르면 찾을 버튼이 없어 바로 return하고, HTML 버튼을 누르면 두 data 값을 가운데 점으로 이어 html · 입문을 출력합니다.
dataset은 쓰기도 됩니다. button.dataset.level에 새 문자열을 넣으면 data-level 속성이 그 값으로 바뀌고, delete 연산자로 dataset의 항목을 지우면 속성도 함께 사라집니다. CSS에서는 [data-level=입문] 같은 속성 선택자로 값에 따라 모양을 다르게 줄 수 있습니다.
dataset의 값은 항상 문자열입니다. 숫자와 boolean이 필요하면 Number 변환이나 명시적인 비교를 사용하세요.
직접 바꿔보세요JavaScript 버튼을 추가하고 data-level 값을 출력하도록 수정하세요.