1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: '<template>: 콘텐츠 템플릿 요소'
slug: Web/HTML/Element/template
tags:
- Element
- HTML
- HTML Web Components
- 'HTML:Flow content'
- 'HTML:Metadata content'
- 'HTML:Phrasing content'
- 'HTML:Script-supporting element'
- Reference
- Web
- Web Components
- 웹 컴포넌트
translation_of: Web/HTML/Element/template
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><template></code> 요소</strong>는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 {{glossary("HTML")}} 코드를 담을 방법을 제공합니다.</p>
<p>템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 <code><template></code> 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#스크립트_지원_요소">스크립트 지원 요소</a>.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>제한 없음.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든 요소. 또한, {{htmlattrxref("span", "colgroup")}} 특성이 없는 {{htmlelement("colgroup")}} 요소도 가능.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLTemplateElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
<p>다만, {{domxref("HTMLTemplateElement")}}는 읽기 전용 {{domxref("HTMLTemplateElement.content", "content")}} 속성을 가집니다. <code>content</code>는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 {{domxref("DocumentFragment")}}입니다.</p>
<h2 id="예제">예제</h2>
<p>우선 예제의 HTML부터 보겠습니다.</p>
<pre class="brush: html"><table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
</pre>
<p>먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.</p>
<p>이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.</p>
<pre class="brush: js">// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
if ('content' in document.createElement('template')) {
// 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
var t = document.querySelector('#productrow');
// 새로운 열을 복제하고 테이블에 삽입합니다
var tb = document.querySelector("tbody");
var clone = document.importNode(t.content, true);
td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tb.appendChild(clone);
// 새로운 열을 복제하고 테이블에 삽입합니다
var clone2 = document.importNode(t.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tb.appendChild(clone2);
} else {
// HTML 템플릿 엘리먼트를 지원하지 않으므로
// 테이블에 열을 추가하는 다른 방법을 찾습니다.
}</pre>
<p>결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.</p>
<div class="hidden">
<pre class="brush: css">table {
background: #000;
}
table td {
background: #fff;
}</pre>
</div>
<p>{{EmbedLiveSample("예제", 500, 120)}}</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("html.elements.template")}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">같이 보기</h2>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a></li>
</ul>
|
