Recent posts

Recent comments

Archive

Calender

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

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


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


Internet Explorer Firefox Chrome Opera Safari
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키를 누르거나, 소스 보기를 하면
    누구나 그 내용을 볼 수 있어서, 보안에 취약하기 때문이다.


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

'HTML' 카테고리의 다른 글

[ HTML ] th의 "scope" 속성에 대한 사이트 목록  (0) 2016.06.29
[ HTML ] map 태그 & area 태그  (6) 2015.02.07
[ HTML ] 태그 목록  (0) 2015.01.31
웹 개발 관련 사이트  (0) 2014.12.17