Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ko/docs/Web/HTML/Reference/Global_attributes/data-* below:

data-* - HTML: Hypertext Markup Language

data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTMLê³¼ DOM 사이에서 교환할 수 있는 방법입니다.

<h1>Secret agents</h1>

<ul>
  <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
  <li data-id="97865">
    Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in
    "Goldeneye".
  </li>
  <li data-id="45732">
    James Bond, 007: The main man; shaken but not stirred.
  </li>
</ul>

h1 {
  margin: 0;
}

ul {
  margin: 10px 0 0;
}

li {
  position: relative;
  width: 200px;
  padding-bottom: 10px;
}

li:after {
  content: "Data ID: " attr(data-id);
  position: absolute;
  top: -22px;
  left: 10px;
  background: black;
  color: white;
  padding: 2px;
  border: 1px solid #eee;
  opacity: 0;
  transition: 0.5s opacity;
}

li:hover:after {
  opacity: 1;
}

모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 HTMLElement 인터페이스, dataset 속성을 통해 사용할 수 있습니다. data-*의 *은 XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있습니다.

• 대소문자 여부에 상관없이 xml로 시작하면 안 됩니다.
• 세미콜론(U+003A)을 포함해서는 안 됩니다.
• 대문자를 포함해서는 안 됩니다.

HTMLElement.dataset은 DOMStringMap이라는 점을 참고하세요. 사용할 땐, 예를 들어 data-test-value라는 이름의 특성을 지정했다면, 모든 대시(U+002D)는 다음 문자를 대문자로 만들고 자신은 사라지므로 HTMLElement.dataset.testValue로 접근할 수 있습니다.

data-* 속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 <img> 태그와 class 특성, 그리고 여러 data-* 특성으로 나타낼 수 있습니다.

<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()" />

HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 데이터 특성 사용하기를 확인하세요.

• 모든 전역 특성.
• 데이터 특성 값에 접근하고 수정할 수 있는 HTMLElement.dataset 속성.
• 데이터 특성 사용하기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4