0Pricing
HTML Academy · 강의

data-* 문법 및 이름 지정 규칙

유효한 data-* 속성 이름과 그 목적 이해하기

data-* 문법 및 이름 지정 규칙은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

복습: data-* 속성

데이터 속성(data-*)은 HTML 요소에 사용자 지정 정보를 저장합니다:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

유효한 이름 지정 규칙

data-* 속성 이름 지정 요구 사항:

  • data-로 시작해야 합니다
  • 뒤에 하나 이상의 문자가 와야 합니다
  • 소문자, 숫자, 하이픈, 밑줄, 마침표, 콜론만 사용할 수 있습니다
  • 대문자를 사용할 수 없습니다(HTML 파서는 속성 이름을 소문자로 변환합니다)
  • 공백을 사용할 수 없습니다

이름 지정 규칙

커뮤니티 이름 지정 규칙:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

여러 데이터 속성

요소에는 데이터 속성을 원하는 개수만큼 지정할 수 있습니다:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

값은 항상 문자열

데이터 속성 값은 항상 문자열입니다 — JavaScript에서 parse하세요:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

data-*에 JSON 저장

복잡한 데이터는 JSON 문자열로 저장하세요:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-*와 사용자 지정 요소 비교

data-*와 사용자 지정 요소, JavaScript 객체 중 선택하는 기준:

  • data-* — 요소별 메타데이터, HTML에 표시되며 CSS에서 접근 가능
  • 사용자 지정 요소 — 동작이 캡슐화된 복잡하고 재사용 가능한 구성 요소
  • JavaScript Map/WeakMap — HTML에 필요하지 않은 데이터, 대용량 또는 복잡한 데이터

프레임워크에서의 data-* 사용

프레임워크에서 데이터 속성을 사용하는 일반적인 경우:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

접근성과 data-*

데이터 속성은 화면 낭독기가 읽어 주지 않으므로 접근성 정보를 저장하는 데 사용하지 마세요:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

성능 고려 사항

data-* 속성이 성능에 미치는 영향은 무시할 수 있는 수준입니다:

  • dataset 읽기는 빠릅니다(O(1)).
  • 수천 개 요소에 data-*를 많이 사용해도 괜찮습니다.
  • 큰 데이터 덩어리(이미지, 대용량 JSON)를 data-*에 저장하는 것은 비효율적입니다.
  • DOM 요소와 연결된 큰 JavaScript 객체를 저장하려면 WeakMap을 사용하세요.

요약: data-* 모범 사례

data-* 모범 사례:

  • 소문자와 하이픈으로 이름을 지정하세요.
  • 값은 항상 문자열이므로 필요에 따라 parse하세요.
  • JSON에는 JSON.stringify / JSON.parse를 사용하세요.
  • CSS 또는 JavaScript에 필요한 메타데이터에 사용하세요.
  • ARIA 속성을 대신할 수 없습니다.
  • 비밀 정보를 저장하지 마세요(DevTools에서 볼 수 있습니다).

빠른 확인

dataset은 속성 값을 항상 어떤 형식으로 반환하나요?

복습: data-* 구문

data-* 이름 지정 핵심 사항:

  • 형식: data-[lowercase-name]="value"
  • 접근 방법: element.dataset.camelCaseName
  • 모든 값은 문자열이므로 명시적으로 parse하세요.
  • 복잡한 데이터는 JSON으로 저장하세요.
  • 속성 이름에는 소문자만 사용하고, 대문자와 공백은 사용하지 마세요.

자주 묻는 질문

“data-* 문법 및 이름 지정 규칙” 강의는 무료인가요?

네 — “data-* 문법 및 이름 지정 규칙” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“data-* 문법 및 이름 지정 규칙”에서 뭘 배우나요?

유효한 data-* 속성 이름과 그 목적 이해하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“data-* 문법 및 이름 지정 규칙” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. data-* 문법 및 이름 지정 규칙
  2. JavaScript에서 dataset으로 data-*에 접근하기
  3. CSS 속성 선택자로 data-* 사용하기
  4. 실전 패턴 툴팁 및 상태 추적
← HTML Academy(으)로 돌아가기