HTML <template> 태그
정의 및 특징
<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용합니다.
<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.
<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.
예제
<template>
<h3>모나리자</h3>
<img src="/examples/images/img_monalisa.png" alt="모나리자">
</template>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 지원하지 않음 | 22.0 | 8.0 | 15.0 |
HTML5에서 변경된 사항
<template> 태그는 HTML5에서 새롭게 추가된 요소입니다.
DOM 인터페이스
|
[Exposed=Window, HTMLConstructor] interface HTMLTemplateElement : HTMLElement { readonly attribute DocumentFragment content; }; |
