Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 커스텀 속성(data-*) 완벽 가이드: 사용법부터 JavaScript 연동까지

HTML에서는 표준 속성 외에 개발자가 직접 정의한 커스텀(사용자 정의) 속성을 요소에 추가할 수 있습니다. 이렇게 만든 속성은 CSS로 스타일링하거나 JavaScript로 동작을 제어하는 데 매우 유용하게 활용됩니다.

data- 접두사 규칙

커스텀 속성의 이름은 자유롭게 지을 수 있지만, 반드시 data- 접두사로 시작해야 합니다. 그래야 HTML 유효성 검증을 통과하고, 브라우저가 해당 속성을 올바른 데이터 속성으로 인식합니다.

<tag data-custom-attribute-name="value">내용</tag>

예제: 클릭하면 음식 종류를 알려주는 팝업

예를 들어 화면에 "Apple"이라는 음식 요소가 있다고 가정해 보겠습니다. 사용자가 이 요소를 클릭했을 때, 해당 음식이 어떤 종류(type)인지 팝업 대화상자로 보여주고 싶은 상황입니다.

이를 위해 food-type이라는 커스텀 속성을 만들고(반드시 data- 접두사를 붙여야 합니다), "Apple" 텍스트를 담고 있는 <div> 요소에 추가합니다.

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

그리고 이 기능을 실제로 작동하게 만드는 JavaScript 코드입니다.

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

직접 클릭해 결과를 확인할 수 있는 데모도 함께 제공됩니다.

HTML 코드의 동작 원리

  • <div> 요소에 onclick 속성을 추가했습니다. 이벤트 속성으로, 이름 그대로 클릭 이벤트를 감지하는 리스너 역할을 합니다.
  • onclick 속성의 값으로 showDetailsBox(this)를 지정했습니다.
  • showDetailsBox()는 Apple 텍스트 요소를 클릭하는 순간 호출되는 JavaScript 함수의 이름입니다.
  • (this)의 this는 자신이 속한 객체, 즉 클릭된 요소 자신을 가리키는 인수입니다. 초보자에게는 다소 어려운 개념일 수 있으니, 지금 완전히 이해하지 못해도 괜찮습니다.
  • id는 HTML 요소에 고유 식별자를 부여하는 내장 속성입니다. 여기서는 apple이라는 고유 id를 지정했습니다.

JavaScript 코드의 동작 원리

JavaScript 문법에 대한 자세한 설명은 이 HTML 튜토리얼의 범위를 벗어나므로, 최대한 간단하게 요약해서 설명하겠습니다.

onclick 이벤트 속성에 의해 showDetailsBox() 함수가 호출되면, 함수 내부의 코드 블록 { ... } 안에 있는 내용이 위에서부터 차례대로 실행됩니다.

function showDetailsBox(food) {
  ...
}

첫 번째 줄에서는 getAttribute() 메서드로 클릭된 요소의 data-food-type 커스텀 속성 값을 읽어 와, foodType이라는 변수에 저장합니다.

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

두 번째 줄에서는 내장 메서드인 alert()를 실행해 팝업 대화상자를 띄우고, foodType 변수의 값(즉, fruit)을 화면에 표시합니다.

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

위 예제 코드가 처음에는 완전히 이해되지 않더라도 걱정하지 마세요. 특히 입문 단계에서는 받아들일 내용이 많습니다. 몇 번 반복해서 연습하다 보면 자연스럽게 이해될 것입니다.

HTML 속성에 대해 더 깊이 알고 싶다면, MDN 웹 문서의 HTML 속성 참고문서를 살펴보는 것을 추천합니다.

중요: 화면에 표시되어야 하거나 사용자가 접근할 수 있어야 하는 중요한 콘텐츠를 data 속성 안에 저장하지 마세요. 스크린 리더 같은 보조 기술이 data 속성에 접근하지 못하는 경우가 있고, 검색 크롤러 역시 data 속성 값을 색인하지 않을 수 있습니다. 따라서 SEO에 중요한 콘텐츠를 이곳에 두는 것은 피해야 합니다.