카테고리 없음

[html]dataset 객체

bornsoon 2024. 10. 24. 16:14

html의 속성에 "data-"로 시작하는 custom 속성을 추가할 수 있는데 이것은 JavaScript에서 객체에 접근할 때 매우 편하게 접근할 수 있게 한다. 

"data-" 속성을 이용해서 html요소에 추가 정보를 저장할 수 있다.

 

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

 

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

HTML은 특정 요소와 연관되어야 하지만, 정의된 의미를 갖지 않는 데이터에 대한 확장성을 고려하여 설계되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하

developer.mozilla.org

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css.html</title>
    <style>
        @import url("style.css") screen and (min-width:200px) and (max-width:400px);
                     /* 인쇄용(흑백)은 screen 대신 print */
        @media screen and (min-width:200px) and (max-width:400px) {
            #media_query { color: blue; font-weight: bold; }
        }

        /* 기본선택자 */
        .class01 { background-color: silver; }
        #fruit { background-color: transparent; border: 1px slateblue solid; }

        /* 우선 순위: 아이디 > 복합선택자 */
        
        /* 복합선택자 */
        ul li { color: blue; } /* 자손: 자식+손자 */
        ul>li { background-color: pink; } /* 자식 */
    </style>
</head>
<body>
    <h3>@규칙</h3>
    <div id="media_query">Media Query</div>
    <hr>

    <!-- ul>li*6 (Zen-code:emmet) -->
    <ul>
        <li>요소1</li>
        <li class="class01">요소2</li>
        <li class="class01" id="기준">요소3</li>
        <li>요소4</li>
        <li id="fruit">과일
            <ol>
                <li title="">사과</li>
                <li title="할인">배</li>
                <li title="할인 무료배송">바나나</li>
                <li title="무료배송 품절">수박</li>
                <li title="hot 무료배송">복숭아</li>
                <li><a href="#" data-url="">외부쇼핑</a></li> <!-- 'data-'으로 시작하면 브라우저 처리X -->

                <!-- 속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있다. -->
                <!-- JavaScript에서 접근하기
                 const article = document.querySelector("#electric-cars");
                // 아래 코드도 작동합니다.
                // const article = document.getElementById("electric-cars")


                ** dataset 객체를 통해 data 속성을 가져오기 위해선,
                   data- 뒤의 속성 이름 부분을 사용해 속성을 가져온다(대시들은 camel case로 변환되는 것에 주의).
                article.dataset.columns; // "3"
                article.dataset.indexNumber; // "12314"
                article.dataset.parent; // "cars"
                -->
            </ol>
        </li>
        <li>요소5</li>
    </ul>
</body>
</html>
728x90