소개
HTML 의 <data> 태그는 웹 페이지에 표시하려는 데이터에 사용자 정의 정보를 할당하는 데 사용됩니다. 예를 들어, 다양한 제품을 나열하는 웹사이트가 있는 경우, <data> 태그를 사용하여 제품 코드를 이 태그에 추가할 수 있습니다. 이 코드는 최종 사용자에게는 보이지 않습니다. 이 랩에서는 HTML 코드에서 <data> 태그를 사용하는 방법을 안내합니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 문서 설정
코드 편집기에서 index.html 파일을 열고 기본 HTML 문서 구조를 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Data Tag Lab</title>
</head>
<body></body>
</html>
data 태그 추가
body 태그 내에 <data> 태그를 추가하여 표시하려는 데이터에 할당하려는 사용자 정의 정보를 할당합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Data Tag Lab</title>
</head>
<body>
<h1>Product List</h1>
<ul>
<li><data value="12345">Product 1</data></li>
<li><data value="67890">Product 2</data></li>
</ul>
</body>
</html>
JavaScript 를 사용하여 사용자 정의 정보에 접근
JavaScript 를 사용하여 data 태그에 할당된 사용자 정의 정보에 접근할 수 있습니다. HTML 코드 아래에 JavaScript 코드 블록을 추가하여 ID 를 사용하여 data 태그에 접근하고, 할당된 사용자 정의 값을 검색합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Data Tag Lab</title>
</head>
<body>
<h1>Product List</h1>
<ul>
<li><data id="prod1" value="12345">Product 1</data></li>
<li><data id="prod2" value="67890">Product 2</data></li>
</ul>
<script>
// Retrieving custom value of data tag with ID prod1
var prod1Value = document.getElementById("prod1").getAttribute("value");
console.log(prod1Value); // Output: 12345
</script>
</body>
</html>
JavaScript 를 사용하여 data 태그 값 수정
JavaScript 를 사용하여 data 태그의 값을 수정할 수도 있습니다. 첫 번째 JavaScript 코드 블록 아래에 다른 JavaScript 코드 블록을 추가하여 prod2 data 태그의 값을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Data Tag Lab</title>
</head>
<body>
<h1>Product List</h1>
<ul>
<li><data id="prod1" value="12345">Product 1</data></li>
<li><data id="prod2" value="67890">Product 2</data></li>
</ul>
<script>
// Retrieving custom value of data tag with ID prod1
var prod1Value = document.getElementById("prod1").getAttribute("value");
console.log(prod1Value); // Output: 12345
// Modifying the value of data tag with ID prod2
document.getElementById("prod2").setAttribute("value", "24680");
console.log(document.getElementById("prod2").getAttribute("value")); // Output: 24680
</script>
</body>
</html>
요약
이 Lab 에서는 웹 페이지에 표시하려는 데이터에 사용자 정의 정보를 할당하기 위해 HTML 에서 <data> 태그를 사용하는 방법을 배웠습니다. 또한 JavaScript 를 사용하여 data 태그의 값에 접근하고 수정하는 방법도 배웠습니다. <data> 태그는 전자 상거래 웹사이트 및 고유한 코드 또는 값을 사용해야 하는 다른 프로젝트에 유용한 도구입니다.
