data-* 속성에 화면 요소와 관련된 사용자 정의 정보를 저장합니다.
data-course-id처럼 data- 뒤에 이름을 붙이면 JavaScript의 element.dataset.courseId로 문자열 값을 읽을 수 있습니다. 스타일 상태에는 class나 표준 상태 속성을 우선하고, 민감한 값이나 큰 데이터는 HTML 속성에 넣지 않습니다.
예제에서는 data-course-id="html-01" 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
사용자 동작에 따라 상태가 바뀌는 화면에서 사용합니다. 보이는 모양뿐 아니라 키보드 조작, 현재 상태를 알리는 문구와 포커스 이동까지 한 흐름으로 확인하세요.
먼저 현재 결과를 확인한 뒤 JavaScript 버튼을 추가하고 data-level 값을 출력하도록 수정하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
dataset의 값은 항상 문자열입니다. 숫자와 boolean이 필요하면 Number 변환이나 명시적인 비교를 사용하세요.
직접 바꿔보세요JavaScript 버튼을 추가하고 data-level 값을 출력하도록 수정하세요.