[ HTML data- ] 태그에 나만의 속성을 추가하기

data- 속성은,
HTML에서 기본적으로 제공되는 속성이 아닌,
나만의 새로운 속성을 추가하고자 할 때에 사용된다.

"data-" 속성은 HTML 5 에서부터 사용되기 시작한 속성이지만, 대부분의 웹브라우저에서 사용할 수 있다.

5.5	2.0	4.0	9.6	3.1

HTML에는 모든 태그에 적용할 수 있는 기본적인 속성들이 있다.
그중에서도 가장 많이 사용되는 속성들은 "id", "class", "style", "title" 등이며,
이러한 속성들은 모든 태그에 사용할 수 있다하여
글로벌 속성(Global attributes)이라고 부른다.

지금부터 설명하려는 "data-" 속성 또한 글로벌 속성에 속한다.
즉, 모든 태그에 적용할 수 있다는 말이다.

---

<ol> 태그를 아래와 같이 작성해보자.

<ol start="0">
    <li> 네이버 </li> 
    <li> 다음 </li> 
    <li> 네이트 </li>
    <li> 줌 </li>
    <li> 드림위즈 </li> 
    <li value="0" data-value-declared> Google </li> 
    <li> Baidu </li> 
    <li> Yahoo! </li> 
    <li> Bing </li> 
    <li> Ask </li> 
    <li> DuckDuckGo </li> 
    <li> IconFinder </li> 
</ol>

HTML 문서에서 모든 <li> 태그의 "value"값은 숫자 0이다.
문서를 작성하면서, 어떤 <li> 태그의 "value"값을 위와 같이 0으로 설정한 후,
CSS에서 바로 그 <li> 태그에만 스타일을 적용시키려고 아래처럼 작성할 경우,

<style type="text/css">
    li[value="0"] {  background-color: yellow;  } 
</style>

오래된 브라우저에서는 모든 <li> 태그의 배경이 노란색으로 되버린다.

그럴 경우를 대비해서, 위의 예문에서처럼
해당 태그에만 "data-value-declared"와 같은 새로운 속성을 추가한 후,
아래처럼 작성하면 된다.

<style type="text/css">
    li[data-value-declared] {  background-color: yellow;  }
</style>

---

기본적인 사용법은 아래와 같다.

1. <p data-city> 마로니에 공원 </p>
2. <p data-city=""> 마로니에 공원 </p>
3. <p data-city="Seoul"> 마로니에 공원 </p>

참고로, HTML 문서를 읽어들이는 브라우저는, 위의 1번과 2번을 똑같은 의미로 받아들인다.
왜냐하면, "data-" 속성을 이용해서 문서 작성자가 새로 만들어낸 모든 속성은,
그 기본값이 빈 문자열( "" )이기 때문이다.

---

커스텀 데이터 속성(custom data attributes)이라고 불리우는 "data-" 속성의 역할은,
웹페이지를 작성하는 사람이, HTML에 지정되어 있지 않는
새로운 속성을 만들어서, 태그에 추가할 수 있게 해준다.

그렇다고 아무렇게나 마구잡이로 만들 수 있는 것은 아니다.

다음은 "data-" 속성을 사용할 때의 주의사항이다.

1. 속성의 이름은 "data-" 로 시작해야 하며,
   "data-" 뒤에는 적어도 하나 이상의 문자가 와야 한다.
   예) data-item, data-city, data-index-number, data-book-title 등등
    
2. 소문자를 사용한다. 대문자를 사용해봤자 아무 쓸모가 없다.
   HTML 문서 자체가 로딩될 때, 속성 이름들을 모두 소문자로 바꿔버리기 때문이다.
    
3. 속성 이름에 넣을 수 없는 문자는 아래와 같다.
   공백문자, Null(U+0000), 슬래쉬("/", U+002F), 따옴표(U+0022, U+0027), 등호("=", U+003D),
   제어 문자(control characters), ">"이라는 부등호(U+003E),
   유니코드로 표현할 수 없는 문자들.
    
4. 속성에 값을 넣을 때에는, 따옴표를 사용한다.
   큰따옴표든 작은 따옴표든 상관은 없지만,
   적으려는 속성값에 따옴표가 들어갈 때에는,
   속성값을 감싸는 따옴표와 그 안에 들어가는 따옴표의 종류를 다르게 하면 된다.
   예) data-source="Tonks' Blog" 또는 data-location='Seoul"Korea"Asia'
    
5. 속성값에 부등호 "<"는 넣을 수 없다.
   또한 부등호 ">"와 앰퍼샌드(&)도 피하는 것이 좋다.
   대신에 &lt; , &gt; , &amp; 로 바꿔서 적도록 한다.
   예) data-category="IT&lt;WEB&lt;HTML"
    
6. 사용할 용도에 알맞은 속성이 HTML에서 눈씻고 찾아봐도 없을 때,
   반드시 꼭 필요할 때에만 사용하는 것이 좋다.
   쓸데없이 남발하면 문서만 지저분해지기 때문이다.
    
7. 본인이나 다른 회원의 개인 정보는 담지 말아야 한다.
   키보드의 F12키를 누르거나, 소스 보기를 하면
   누구나 그 내용을 볼 수 있어서, 보안에 취약하기 때문이다.

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*