7-2 HTML5 dataset

HTML5 dataset#

dataset 으로도 semantic 을 부여할 수 있다.

일본에 납품을 하려면 커스텀 속성을 쓸 수 없다.

  • W3C validate 를 통과해야 된다고 한다.
  • vue, react, angular 같은 프레임워크는 납품할 수 없다.
  • 이런 경우에 data-* 스펙이 있다.
element.dataset

https://www.w3.org/TR/html5/dom.html#dom-dataset

  • Returns a DOMStringMap object for the element's data-* attributes.
  • 하이픈으로 연결된 이름 -> camel case
    • attribute 에서 사용 - data-foo-bar=""
    • javascript 에서 사용 - element.dataset.fooBar.
    • 모든 element 가 가지고 있다고 한다.
micro data 보다 간결하다.
<body data-type="http://schema.org/WebPage">
<h1 data-name="name">CodeSpitz76 - 5</h1>
<nav data-breadcrumb>Home</nav>
<p data-description>
코드스피츠76 5회차 수업은 CSS 를 쿼리화하여 사용하는 방법을 다룹니다.
</p>
<ul>
<li data--mainEntity data-type="http://schema.org/CollegeOrUniversity">
<h2 data-name>HTML5 MicroData</h2>
<p data-description>마이크로데이터에 대한 개념과 예제</p>
</li>
<li data-mainEntity data-type="http://schema.org/CollegeOrUniversity">
<h2 data-name>HTML5 DataSet</h2>
<p data-description>데이터셋에 대한 개념과 예제</p>
</li>
</ul>
<footer>
<div data-license>MIT</div>
<div data-publisher>Bsidesoft co.</div>
</footer>
</body>

id 와 class 는 디자인을 위해 비어두자

  • class="black theme"
[data-type$=WebPage"] {
color: #900
[data-name"] { font-size: 20px; padding: 0; margin: 10px 0 }
[data-breadcrumb] { font-size: 11px; margin: 0 10px; color: #234A7F }
[data-description] { font-size: 14px; line=height: 20px; color: #444 }
ul { list-style: none; padding: 0 }
[data-mainEntity] { padding: 0 20px; margin: 10px; border: 1px solid #999; border-radius: 20px }
[data-license] { font-size: 11px; color: #999 }
[data-publisher] { font-size: 12px; font-weight: bold; font-family: sans-serif }
}
[data-type$="CollegeOrUniversity"] {
[data-name] { font-size: 15px }
[data-description] { font-size: 12px; line-height: 15px }
}

정적인 사이트를 포매팅 하는 다차원 쿼리#

<body>
<h1 data-name>CodeSpitz76</h1>
<table>
<thead>
<th>번호</th>
<th>이름</th>
<th>1강</th>
<th>2강</th>
<th>3강</th>
<th>개근</th>
</thead>
<tr data-id="1">
<td>1</td>
<td data-name="이도형">이도형</td>
<td data-1="on">출석</td>
<td data-2="on">출석</td>
<td data-3="on">출석</td>
</tr>
<tr data-id="2">
<td>1</td>
<td data-name="박은영">박은영</td>
<td data-1="on">출석</td>
<td data-2="on">출석</td>
<td data-3="off">결석</td>
</tr>
</tr>
<tr data-id="3">
<td>1</td>
<td data-name="황준일">황준일</td>
<td data-1="on">출석</td>
<td data-2="off">결석</td>
<td data-3="off">결석</td>
</tr>
</tr>
<tr data-id="4">
<td>1</td>
<td data-name="반포동">반포동</td>
<td data-1="off">결석</td>
<td data-2="off">결석</td>
<td data-3="off">결석</td>
</tr>
</table>
</body>

Reference#

Last updated on