data-* : HTML5에서 도입된 사용자 정의 데이터 속성

안녕하세요. 인천고래입니다.

 

HTML 작업을 하다 보면 하나의 페이지에 수많은 화면이 표현되다 보니 자연스럽게 HTML코드 및 스타일 & 자바스크립트까지 포함되어 코드량이 자연스럽게 늘어나서 차후에 수정할 일이 생겨서 찾으려 하면 시간이 오래 걸리는 비효율적인 상황들이 발생됩니다. 이런 경우에는 외부 파일로 만들어 놓고 필요할 때에만 불러오는 형식으로 만들어두면 수정할 사항이 발생될 경우 외부 파일 내의 코드만 살펴보면 일이 쉽게 풀리기도 합니다.

 

이렇게 모듈화(Modularization) 또는 컴포넌트 기반 개발(Component-Based Development) 을 하게 되면 코드의 재사용성을 높이고, 유지 관리를 용이하게 하며, 대규모 애플리케이션의 개발 및 관리를 효과적으로 할 수 있도록 돕습니다.

 

오늘은 모듈화된 외부 파일(HTML)을 사용자 정의 데이터 속성을 부여하여 외부 파일을 간단히 로드하여 사용하는 방법에 대해 알아보도록 하겠습니다.

 

사용자 정의 데이터 속성들은 표준 HTML 속성이 아니며, 개발자가 웹 페이지에 추가 정보를 저장하기 위해 임의로 이름을 지정하고 사용할 수 있습니다. 이 데이터는 JavaScript를 통해 쉽게 접근하고 조작할 수 있어, DOM 요소와 관련된 데이터를 효과적으로 처리할 수 있게 도와줍니다.

 

그러면  사용자 정의 데이터 속성의 특징과 사용법에 대해 알아보도록 하겠습니다.

 

1. 사용자 정의 데이터 속성(data-*)의 특징

사용자가 임의대로 이름을 작성 가능하지만 기본적으로는 지켜야 하는 규칙 하나가 있습니다. 
사용자가 정의할 수 있는 속성은 "data-"로 시작을 해야 한다는 것입니다. 

data-tab이나 data-file과 같은 data-* 속성은 HTML5에서 도입된 사용자 정의 데이터 속성입니다.

그러면 어떠한 특징이 있는지 살펴보도록 하겠습니다.

• 임의의 이름 사용 가능: data-* 다음에 오는 이름은 개발자가 자유롭게 정할 수 있습니다. 예를 들어, data-index, data-user-id, data-file 등 어떤 이름도 사용할 수 있습니다.
• HTML과 JavaScript 간의 데이터 교환: 이 속성을 사용하면 HTML 마크업 내에서 데이터를 설정하고, JavaScript에서 이를 쉽게 읽어 처리할 수 있습니다.
• 웹 표준 준수: data-* 속성은 HTML5 웹 표준의 일부이므로, 모든 현대 브라우저에서 지원하고 표준적인 방법으로 사용됩니다.

 

예제: data-* 속성 사용 HTML에서 data-* 속성 설정을 하는 방법입니다.

버튼 태그의 속성으로 dat-tab과 data-file 사용자 정의 속성을 2개 만들었습니다.

<button data-tab="tab1" data-file="content1" id="tabButton1">Tab 1</button>

 

javascript로 사용자 정의 속성에 접근하는 방법은 아래와 같습니다.

버튼 클릭시나 로드 시 버튼의 속성에 접근해서 해당 속성의 값을 체크할 수가 있습니다.

var button = document.getElementById('tabButton1');
console.log(button.dataset.tab);  // "tab1"
console.log(button.dataset.file); // "content1"

 

jQuery로 접근할 수도 있는데요. 아래와 같이 사용하면 됩니다.

var $button = $('#tabButton1');
console.log($button.data('tab'));  // "tab1"
console.log($button.data('file')); // "content1"

 

data-* 속성은 개발자가 임의로 정하여 사용할 수 있으며, 웹 애플리케이션 내에서 추가적인 정보를 DOM 요소에 부여하고, 이를 스크립트에서 활용할 수 있게 해 줍니다.

이를 통해 보다 동적이고 상호작용이 풍부한 웹 페이지를 구현할 수 있게됩니다.

 

2. 사용자 정의 데이터 속성(data-*) 사용법

그러면 실 사용 예를 토대로 탭 클릭 시 HTML파일을 로드하는 형태로 사용법에 대해 알아보도록 하겠습니다.

 

이제 우리는 탭 클릭할 때 탭에 맞는 HTML을 로드하는 형태로 작업을 진행하려 합니다.

여기서 알아야 하는 부분은 어떤 탭을 클릭했느냐이며 선택된 탭에 맞는 로드될 HTML 파일을 알아야 합니다.

 

2-1. HTML 작업

우선 HTML 파일로 사용자 정의 데이터 속성을 지정해 보도록 하겠습니다.

      <!-- 탭 -->
      <div class="tabs-container">
        <button class="tab active" data-html="setting_list" data-tab="tab1">보유종목 정보</button>
        <button class="tab" data-html="setting_theme" data-tab="tab2">테마 필터링</button>
        <button class="tab" data-html="setting_buy" data-tab="tab3">매수 설정</button>
        <button class="tab" data-html="setting_sell" data-tab="tab4">매도 설정</button>
        <button class="tab" data-html="setting_stock_index" data-tab="tab5">지수 연동</button>
      </div>
      
      ...
      
      <div id="tab2" class="tab-content">

      </div>

 

탭 클릭 시 위에서 언급한 2개(속성, 또는 값)를 찾아야 하므로

위의 HTML 태그와 같이 탭(버튼) 요소에 각각의 속성으로 data-html과 data-tab이라는 속성을 부여했습니다.

data-html은 탭 클릭 시 로드될 html 파일의 이름을 의미하고, data-tab은 탭 클릭 시 로드된 html이 보이는 공간을 의미합니다.

 

예를 들어 테마 필터링이라는 탭을 클릭한 경우를 생각해 보면

data-tab의 값이 "tab2"이므로 <div id="tab2" ...>의 공간에 data-html의 속성값이 "setting_theme"이므로 "setting_theme.html"파일이 로드가 됩니다. 즉, 버튼(탭) 클릭 시 data-tab의 값을 가지는 HTML 요소를 찾아서 해당 공간에 data-html의 값과 동일한 HTML을 로드가 되는 형식입니다.

 

2-2. jQuery 작업

이제 위와 같이 사용자 정의 속성을 가진 탭을 클릭 시 jQuery를 사용해서 지정한 HTML이 로드되도록 해 보겠습니다.

jQuery는 자바스크립트 라이브러리 중 하나로, DOM 요소를 더 쉽게 조작하고 이벤트를 처리하며 AJAX 호출을 수행하는 등의 기능을 간편하게 사용할 수 있게 해 줍니다.

<script>
    $(document).ready(function() {
      $(".tab").click(function() {
        $(".tab-content").hide(); // 모든 탭의 콘텐츠를 숨김

        var tabName = $(this).attr("data-tab"); // data-tab 속성에 저장된 탭 이름을 사용
        var htmlName = $(this).data("html");    // attr()로 할 경우에는 data-html과 같이 사용하면 된다.
        console.log(tabName, htmlName)

        // 해당 탭 콘텐츠만 표시하고, 해당 HTML 파일 내용을 로드
        $("#" + tabName).show().load(htmlName + ".html");

        // 활성 탭 스타일 설정
        $(".tab").removeClass("active");
        $(this).addClass("active");
      });
    });
</script>

 

jQuery 코드 분석

1. $(document).ready(...): 이는 jQuery의 문서 준비 완료 이벤트 핸들러로, 문서의 DOM이 완전히 로드되고 준비되었을 때 실행되는 코드 블록을 정의합니다. 자바스크립트의 DOMContentLoaded 이벤트와 유사합니다.
2. $(".tab").click(...): jQuery를 사용해 .tab 클래스를 가진 모든 요소에 클릭 이벤트 핸들러를 등록합니다. 클릭 이벤트가 발생하면 정의된 함수가 실행됩니다.
   
   
3. $(".tab-content").hide();: .tab-content 클래스를 가진 모든 요소를 숨깁니다. 이는 CSS의 display: none; 속성을 적용하는 것과 같습니다.
4. var tabName = $(this).attr("data-tab");: 클릭된 요소에서 data-tab 속성의 값을 읽어옵니다.
   $(this).data("html")를 사용하여 data-html 속성의 값을 가져올 수도 있습니다.
   jQuery의 .data() 메서드는 HTML5 data-* 속성을 처리할 때 사용됩니다.
5. $("#" + tabName).show().load(htmlName + ".html");: 선택된 탭의 ID에 해당하는 요소를 표시(show())하고, jQuery의 .load() 메서드를 사용하여 서버에서 HTML 파일을 불러와 해당 요소 내에 삽입합니다.
6. $(".tab").removeClass("active"); $(this).addClass("active");: 모든 탭에서 active 클래스를 제거하고, 현재 클릭된 탭에 active 클래스를 추가하여 스타일을 변경합니다.

 

이것으로 사용자 정의 데이터 속성을 이용하여 HTML을 로드하는 방법에 대해 알아보았습니다.

하나씩 차근차근 따라 해 보시면 이해가 되실 것으로 생각됩니다.

 

오늘도 제 글을 읽어주신 모든 분들께 감사의 말씀을 드립니다.

감사합니다.