jQuery Academy · 강의

HTML5 데이터 속성 활용

데이터 속성을 사용해 HTML 요소 안에 애플리케이션별 데이터를 직접 저장하고 가져오며, 매우 동적이고 데이터 중심적인 UI를 구현합니다.

HTML5 데이터 속성 활용은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

HTML5 데이터 속성 알아보기

HTML5에는 표준 HTML 요소 안에 사용자 지정 데이터를 직접 저장할 수 있도록 데이터 속성이 도입되었습니다.

이를 HTML 태그 안의 비밀 공간이라고 생각해 보세요. 화면에 표시할 필요가 없는 추가 정보를 담아 둡니다. 덕분에 HTML은 더욱 의미론적으로 작성되고 JavaScript는 더욱 강력해지며, 데이터를 요소에 직접 연결할 수 있습니다.

데이터 속성이 유용한 이유

데이터 속성이 없던 시절에는 개발자가 요소별 데이터를 저장하기 위해 클래스, ID 또는 숨겨진 입력 필드를 자주 사용했습니다. 하지만 이러한 방법에는 단점이 있습니다.

클래스/ID: 데이터를 저장하기보다는 스타일 지정이나 선택에 잘못 사용되는 경우가 많습니다.
숨겨진 입력: DOM을 복잡하게 만들며 양식 제출을 위한 용도로 사용됩니다.

데이터 속성은 사용자 지정 데이터를 데이터가 속한 위치에 직접 삽입할 수 있는 깔끔하고 표준적인 방법을 제공합니다.

`data-` 이름 지정 규칙

모든 데이터 속성은 접두사 data-로 시작해야 합니다. 접두사 뒤의 속성 이름은 소문자, 숫자, 하이픈 및 밑줄을 사용하여 자유롭게 지정할 수 있습니다.

data-id="123"
data-status="active"
data-item-price="9.99"

이 표준 접두사를 사용하면 사용자 지정 속성이 기존 또는 향후 HTML 속성과 충돌하지 않습니다.

HTML에 데이터 삽입하기

HTML 마크업에 데이터 속성을 직접 쉽게 추가할 수 있습니다. 다른 속성과 마찬가지로 이름과 값이 있습니다.

예를 들어 버튼에 data-product-id와 data-category를 추가해 보겠습니다.

<button id="buyButton" data-product-id="456" data-category="electronics">
  Buy Now
</button>

<script>
  // JavaScript goes here later
</script>

jQuery로 데이터 가져오기

jQuery는 데이터 속성의 값을 가져오는 매우 편리한 메서드 .data()를 제공합니다. data- 접두사도 자동으로 처리합니다.

특정 속성을 가져오려면 data-를 제외한 이름을 .data()에 전달하세요.

<button id="myButton" data-user-id="101" data-role="admin">
  User Profile
</button>

<script>
  $(document).ready(function() {
    const userId = $('#myButton').data('user-id');
    const userRole = $('#myButton').data('role');
    
    console.log("User ID:", userId);
    console.log("User Role:", userRole);
  });
</script>

데이터를 즉시 변경하기

.data() 메서드는 값을 읽기만 하는 데 사용되지 않습니다. 동적으로 새 데이터 속성을 추가하거나 기존 데이터를 업데이트할 수도 있습니다.

두 개의 인수를 전달하세요. data-를 제외한 속성 이름과 새 값입니다. 이렇게 하면 jQuery 내부 데이터 캐시가 업데이트되며, HTML5 데이터 속성의 경우 DOM 속성 자체도 업데이트됩니다.

<div id="statusBox" data-status="pending">
  Current Status
</div>

<script>
  $(document).ready(function() {
    console.log("Initial status:", $('#statusBox').data('status'));
    
    // Update the status
    $('#statusBox').data('status', 'complete');
    
    console.log("Updated status:", $('#statusBox').data('status'));
  });
</script>

스마트한 데이터 형식 처리

jQuery의 .data()가 제공하는 유용한 기능 중 하나는 자동 형식 변환입니다. 데이터 속성을 가져올 때 jQuery는 문자열 값을 더 적절한 JavaScript 형식으로 변환하려고 시도합니다.

"true"와 "false"는 불리언 값이 됩니다.
"123"은 숫자가 됩니다.
"[1,2]"와 "{name:'X'}"은 유효한 JSON인 경우 배열 또는 객체가 됩니다.

따라서 직접 구문 분석할 필요가 없습니다!

실전 활용: 상태 전환하기

데이터 속성은 사용자 인터페이스 요소의 상태를 관리하는 데 매우 적합합니다. data-active 속성에 따라 텍스트와 상태를 변경하는 간단한 토글 버튼을 만들어 보겠습니다.

버튼을 클릭하여 상태가 변경되는 것을 확인해 보세요!

<button id="toggleBtn" data-active="false">
  Activate Feature
</button>

<script>
  $(document).ready(function() {
    $('#toggleBtn').on('click', function() {
      let isActive = $(this).data('active');
      
      if (isActive) {
        $(this).data('active', false);
        $(this).text('Activate Feature');
        $(this).css('background-color', '#f0f0f0');
      } else {
        $(this).data('active', true);
        $(this).text('Deactivate Feature');
        $(this).css('background-color', '#d4edda');
      }
      console.log("Active state:", $(this).data('active'));
    });
  });
</script>

데이터 속성 사용 팁

데이터 속성을 깔끔하고 효과적으로 사용하려면 다음 모범 사례를 기억해 두세요.

사용자 인터페이스 상태에 사용: 임시 사용자 인터페이스 상태, 설정 또는 참조를 저장하는 데 적합합니다.
큰 데이터는 피하기: 방대한 데이터 집합을 저장하는 용도가 아니므로 값을 간결하게 유지하세요.
의미 있는 이름 사용: 명확하고 설명적인 이름을 선택하세요(예: data-user-id, data-u는 사용하지 않음).
백엔드 데이터를 대체하지 않기: 복잡한 데이터는 여전히 서버에서 가져오고, 모든 데이터를 삽입하지 마세요.

데이터 속성 퀴즈

다음 HTML과 JavaScript를 살펴보세요.

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

콘솔에는 무엇이 기록될까요?

복습: 데이터 속성 활용하기

축하합니다! jQuery로 HTML5 데이터 속성을 활용하는 방법을 배우셨습니다.

데이터 속성을 사용하면 사용자 지정 데이터를 HTML에 직접 깔끔하게 삽입할 수 있습니다.
jQuery의 .data() 메서드를 사용하면 이 데이터를 쉽게 가져오고 업데이트할 수 있습니다.
자동 형 변환으로 데이터를 간편하게 처리할 수 있습니다.
UI 상태를 관리하고 동적인 인터페이스를 만드는 데 매우 유용합니다.

계속 연습하다 보면 웹 애플리케이션을 더욱 지능적이고 상호작용적으로 만들 수 있는 무수히 많은 방법을 발견하게 될 것입니다!

자주 묻는 질문

“HTML5 데이터 속성 활용” 강의는 무료인가요?

네 — “HTML5 데이터 속성 활용” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“HTML5 데이터 속성 활용”에서 뭘 배우나요?

데이터 속성을 사용해 HTML 요소 안에 애플리케이션별 데이터를 직접 저장하고 가져오며, 매우 동적이고 데이터 중심적인 UI를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“HTML5 데이터 속성 활용” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기