Template?

<template>은 HTML 문서 내에서 클라이언트 측에서만 사용할 수 있는 마크업을 정의하는 데 사용되는 HTML 요소입니다. 이 요소는 실제로 페이지에 렌더링되지 않으며, JavaScript를 통해 동적으로 HTML을 삽입하거나 복제할 때 사용됩니다.

<template> 태그는 주로 DOM을 동적으로 추가하거나 렌더링할 때 유용하게 사용됩니다.

<!-- Template 정의 -->
<template id="my-template">
    <h1>Hello, World!</h1>
    <p>This is a template example.</p>
</template>

<!-- 자바스크립트를 통해 템플릿을 사용 -->
<script>
    // 템플릿 요소 가져오기
    const template = document.getElementById('my-template');
    
    // 템플릿의 content 속성 가져오기 (복제된 노드를 가져옴)
    const clone = document.importNode(template.content, true);
    
    // 페이지에 템플릿 삽입
    document.body.appendChild(clone);
</script>