HTML5 사용자 정의 데이터 속성을 사용하면 개발자가 HTML 요소에 사용자 정의 데이터를 저장할 수 있습니다. JavaScript 또는 CSS에서 사용할 수있는 HTML 요소에 추가 정보를 추가하여 웹 페이지 기능을 향상시키는 방법을 제공합니다. 이 기사에서는 데이터 속성이 무엇인지, 무엇이 무엇인지 설명합니다.
키 포인트
HTML5 사용자 정의 데이터 속성을 통해 개발자는 JavaScript 또는 CSS에서 액세스하고 사용할 수있는 HTML 요소에 대한 추가 정보를 저장하여 웹 페이지 기능을 향상시킬 수 있습니다.
데이터 속성은 항상 "data-"로 시작하며 속성 선택기를 통해 CSS의 요소를 스타일링하는 데 사용할 수 있으며 함수를 통해 사용자에게 정보를 표시 할 수 있습니다.
JavaScript에서 는 및 메소드, 속성 또는 jQuery의 메소드를 사용하여 데이터 속성에 액세스 할 수 있습니다.
사용자 정의 데이터 속성은 강력하지만 다른 적절한 HTML 요소 또는 속성이없고 많은 양의 데이터를 저장하는 데 사용해서는 안되는 경우에만 사용해야합니다. -
- 사용자 정의 데이터 속성을 사용하는 이유는 무엇입니까?
attr()
우리는 종종 다른 DOM 요소와 관련된 정보를 저장해야합니다. 이 정보는 독자에게는 중요하지 않을 수 있지만, 쉽게 액세스 할 수있게되면 개발 노력이 훨씬 쉬워집니다. 예를 들어, 웹 페이지에 다른 레스토랑을 나열한다고 가정 해 봅시다. HTML5 이전에 식당에서 제공하는 음식 유형 또는 방문자가 얼마나 멀리 있는지와 같은 정보를 저장하려면
속성을 HTML의 속성을 사용하게됩니다. 사용자가 방문하고자하는 특정 식당을보기 위해 식당 ID를 저장 해야하는 경우 어떻게해야합니까? 다음은 html - 속성을 기반으로하는 방법에 대한 몇 가지 질문입니다.
getAttribute()
html setAttribute() 속성은 그러한 데이터를 저장하는 데 사용되지 않습니다. 주요 목적은 개발자가 스타일 정보를 일련의 요소에 할당 할 수 있도록하는 것입니다. dataset
메시지를 추가 할 때마다 새로운 클래스가 요소에 추가해야합니다. 이로 인해 JavaScript의 구문 분석 데이터가 필요한 정보를 더욱 어렵게 만듭니다. data()
주어진 클래스 이름이 숫자로 시작한다고 가정합니다. 클래스 이름의 데이터를 기반으로 나중에 요소를 스타일링하기로 결정한 경우 숫자를 피하거나 스타일 시트에서 속성 선택기를 사용해야합니다.
-
이러한 문제를 해결하기 위해 HTML5는 사용자 정의 데이터 속성을 소개합니다. 이름이
로 시작하는 모든 요소 속성은 데이터 속성입니다. 이러한 데이터 속성을 스타일 요소에 사용할 수도 있습니다. 다음으로 데이터 속성의 기본 사항을 파고 CSS 및 JavaScript에서 값에 액세스하는 방법을 배우겠습니다.
html 구문
앞에서 언급했듯이, 데이터 속성의 이름은 항상 로 시작됩니다. 예는 다음과 같습니다. <li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>
로그인 후 복사
로그인 후 복사
HTML5 사용자 정의 데이터 속성을 사용하면 개발자가 HTML 요소에 사용자 정의 데이터를 저장할 수 있습니다. JavaScript 또는 CSS에서 사용할 수있는 HTML 요소에 추가 정보를 추가하여 웹 페이지 기능을 향상시키는 방법을 제공합니다. 이 기사에서는 데이터 속성이 무엇인지, 무엇이 무엇인지 설명합니다. 
