..

Search

<template>

HTML <template> 태그


정의 및 특징

<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용합니다.

 

<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.

 

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.


예제
<template>
    <h3>모나리자</h3>
    <img src="/examples/images/img_monalisa.png" alt="모나리자">
</template>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<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;

};


연습문제