HTML Template 태그

JavaScript등을 이용하여 유동적으로 HTML 요소들을 만들어 내야 할 때가 많다.

이전에는 JavaScript 변수에 HTML 코드를 입력시켜 요소를 만들어냈는데,


// example
btn.addEventListener('click', function () {
  var template = '<div class="row"><h2 class="content"> hello world! </h2></div>';
  el.appendChild(template);
})

나중에 유지보수를 위해 HTML 내용을 수정하기 위해서 *.js 파일에 접근하는 일이 생겨버리게 되었다.

이를 고민하며 방안을 찾던 중 template이라는 태그를 발견했다.


<template id="exam-template">
  <div class="row">
    <h2 class="content">hello world!</h2>
  </div>
</template>

우선 위와 같이 HTML 상에 마크 업을 해둔 상태로


// example2
btn.addEventListener('click', function () {
  var template = document.getElementById('exam-template').html;
  el.appendChild(template);
})

위와 같이 작성하면 편하게 요소를 생성할 수 있다.

template 태그의 주요 특징으로는,

1. Its content is effectively inert until activated. Essentially, your markup is hidden DOM and does not render.

그것(template)의 내용은 활성화 될 때까지 효과적으로 비활성이다. 기본적으로 마크 업은 DOM에 숨겨져 있으며 렌더링되지 않습니다.

2. Any content within a template won't have side effects. Script doesn't run, images don't load, audio doesn't play,...until the template is used.

템플릿 내의 모든 콘텐츠에는 부작용이 없습니다. 템플릿이 사용될 때까지 스크립트가 실행되지 않고 이미지가 로드 되지 않고 오디오가 재생되지 않습니다.

3. Content is considered not to be in the document. Using document.getElementById() or querySelector() in the main page won't return child nodes of a template.

내용은 문서에없는 것으로 간주됩니다. 기본 페이지에서 document.getElementById() 또는 querySelector()를 사용하면 템플릿의 하위 노드가 반환되지 않습니다.

4. Templates can be placed anywhere inside of <head>, <body>, or <frameset>and can contain any type of content which is allowed in those elements. Note that "anywhere" means that <template> can safely be used in places that the HTML parser disallows...all but content model children. It can also be placed as a child of <table> or <select>:

템플릿은 <head>, <body> 또는 <frameset>의 어느 위치 에나 배치 할 수 있으며 해당 요소에 허용되는 모든 유형의 내용을 포함 할 수 있습니다. "어디서나"라는 말은 HTML 파서가 허용하지 않는 곳에서 <template>을 안전하게 사용할 수 있다는 것을 의미합니다. 또한 <table> 또는 <select>의 하위 항목으로 배치 될 수 있습니다.

web.dev

https://www.html5rocks.com/en/tutorials/webcomponents/template/

태그를 입력하지만 랜더링 되지 않아, 미리 코드를 작성해 놓고 js등을 이용하여 요소를 불러오거나, 새로운 엘리먼트 요소를 쉽게 만들어 낼 수 있다는 것이 template의 큰 장점인 듯 하다.

JS에 미숙한 퍼블리셔와 협업할 때에 효율적으로 응용이 가능할 것으로 보인다.

다람쥐 헌 쳇바퀴에 타고파

HTML Template 태그