소개
HTML 의 <template> 태그는 페이지가 로드될 때 렌더링되지 않는 재사용 가능한 콘텐츠를 생성할 수 있게 해줍니다. 이는 페이지 로딩 시작 시에는 필요하지 않지만 JavaScript 를 사용하여 나중에 접근할 수 있는 콘텐츠가 있을 때 유용합니다. 이 랩에서는 HTML 템플릿을 생성하는 단계를 안내합니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
태그 추가
먼저, index.html이라는 HTML 파일을 생성합니다.
HTML 파일에 <template> 태그를 추가합니다. 이 태그는 시작 태그와 종료 태그가 필요하며, 나중에 재사용하려는 콘텐츠를 포함해야 합니다.
<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
참고: id 속성은 나중에 JavaScript 에서 템플릿을 참조하는 데 도움이 될 수 있습니다.
자리 표시자 영역 생성
템플릿의 콘텐츠를 삽입할 빈 영역을 생성합니다. 이를 위해 <div> 태그를 사용하고 id 속성을 부여합니다.
<div id="placeholder"></div>
JavaScript 를 사용하여 템플릿 렌더링
HTML 파일에 JavaScript 코드 블록을 추가하여 템플릿의 내용을 자리 표시자 영역에 렌더링합니다.
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
이 코드는 먼저 getElementById 메서드를 사용하여 HTML 에서 템플릿을 가져온 다음, 해당 내용의 복제본을 생성합니다. 그런 다음 내용이 자리 표시자 영역에 추가됩니다.
index.html 파일을 저장하고 웹 브라우저에서 엽니다. 템플릿의 내용이 자리 표시자 영역에 나타나는 것을 볼 수 있습니다.
요약
HTML <template> 태그를 사용하는 것은 웹 페이지에서 재사용 가능한 콘텐츠를 생성하는 간단하고 유용한 방법입니다. JavaScript 의 도움으로 필요할 때 동적으로 콘텐츠를 렌더링할 수 있습니다. 이는 코드의 중복을 줄이고 유지 관리를 더 쉽게 하는 데 도움이 될 수 있습니다.
index.html이라는 HTML 파일을 생성합니다.<template> 태그를 추가합니다. 이 태그는 시작 태그와 종료 태그가 필요하며, 나중에 재사용하려는 콘텐츠를 포함해야 합니다.<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>
id 속성은 나중에 JavaScript 에서 템플릿을 참조하는 데 도움이 될 수 있습니다.<div> 태그를 사용하고 id 속성을 부여합니다.<div id="placeholder"></div>
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>
getElementById 메서드를 사용하여 HTML 에서 템플릿을 가져온 다음, 해당 내용의 복제본을 생성합니다. 그런 다음 내용이 자리 표시자 영역에 추가됩니다.index.html 파일을 저장하고 웹 브라우저에서 엽니다. 템플릿의 내용이 자리 표시자 영역에 나타나는 것을 볼 수 있습니다.<template> 태그를 사용하는 것은 웹 페이지에서 재사용 가능한 콘텐츠를 생성하는 간단하고 유용한 방법입니다. JavaScript 의 도움으로 필요할 때 동적으로 콘텐츠를 렌더링할 수 있습니다. 이는 코드의 중복을 줄이고 유지 관리를 더 쉽게 하는 데 도움이 될 수 있습니다.
