<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용
페이지가 로드될 때 렌더링 되지 않으며, 사용자에게 보이지 않음
나중에 자바스크립트를 통해 해당 콘텐츠를 복제한 후 렌더링함
특정 HTML요소들을 다시 사용할 수 있게 함
<template> 태그 없이 해당 작업을 하려면 브라우저가 해당 HTML 요소들을 렌더링 하지 않도록 HTML코드를 작성해야함
<!DOCTYPE html>
<html>
<head>
<script>
function testTemplate() {
var temp = document.getElementsById("t_template");
var copy = temp.content.cloneNode(true);
document.body.appendChild(copy);
}
</script>
</head>
<body>
<button onclick="testTemplate()">추가</button>
<template id="t_template">
<h2>테스트 이미지</h2>
<img src="test.png">
</template>
</body>
</html>
'HTML & CSS' 카테고리의 다른 글
| <hr> hr태그 색상 및 속성 (0) | 2024.03.18 |
|---|---|
| 절대경로 & 상대경로 (0) | 2024.03.15 |
| form 태그 속성 정리 (1) | 2024.03.14 |
| CSS 메모 (0) | 2024.03.05 |
| 웹 애니메이션 구현방법 by HTML & CSS (0) | 2024.02.28 |
