JavaScript ES6+ 완벽 가이드
ES6+의 주요 기능들을 자세히 알아봅니다...
💡 퀵 접속: htm.kr/template
<template> 태그는 페이지가 로드될 때 렌더링되지 않지만, JavaScript를 통해 나중에 사용할 수 있는 HTML 콘텐츠를 정의할 때 사용합니다. 재사용 가능한 콘텐츠 블록을 만들거나, 동적으로 콘텐츠를 생성할 때 유용합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| id | 텍스트 | 템플릿의 고유 식별자를 지정합니다. |
| class | 텍스트 | 템플릿의 스타일 클래스를 지정합니다. |
<template id="user-card">
<div class="user-card">
<img src="" alt="프로필 이미지">
<h3></h3>
<p class="email"></p>
</div>
</template>
<script>
// 템플릿 사용 예시
const template = document.getElementById('user-card');
const userCard = template.content.cloneNode(true);
// 데이터로 템플릿 채우기
userCard.querySelector('img').src = 'profile.jpg';
userCard.querySelector('h3').textContent = '홍길동';
userCard.querySelector('.email').textContent = 'hong@example.com';
// DOM에 추가
document.body.appendChild(userCard);
</script><!-- 1. 블로그 포스트 카드 템플릿 -->
<template id="post-card-template">
<article class="post-card">
<div class="post-image">
<img src="" alt="">
</div>
<div class="post-content">
<h2></h2>
<p class="excerpt"></p>
<div class="post-meta">
<span class="date"></span>
<span class="author"></span>
</div>
</div>
</article>
</template>
<!-- 2. 댓글 템플릿 -->
<template id="comment-template">
<div class="comment">
<div class="comment-header">
<img class="avatar" src="" alt="">
<div class="comment-info">
<h4></h4>
<span class="timestamp"></span>
</div>
</div>
<p class="comment-content"></p>
</div>
</template>
<!-- 3. 스타일링 예제 -->
<style>
.post-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 2rem;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.post-content {
padding: 1.5rem;
}
.post-content h2 {
margin: 0 0 1rem;
color: #333;
}
.excerpt {
color: #666;
margin-bottom: 1rem;
}
.post-meta {
display: flex;
justify-content: space-between;
color: #999;
font-size: 0.9rem;
}
.comment {
background: #f8f9fa;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1rem;
}
.comment-header {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 1rem;
}
.comment-info h4 {
margin: 0;
color: #333;
}
.timestamp {
color: #999;
font-size: 0.8rem;
}
.comment-content {
color: #444;
margin: 0;
}
</style>
<script>
// 템플릿 사용 예시
function createPostCard(post) {
const template = document.getElementById('post-card-template');
const postCard = template.content.cloneNode(true);
postCard.querySelector('img').src = post.image;
postCard.querySelector('img').alt = post.title;
postCard.querySelector('h2').textContent = post.title;
postCard.querySelector('.excerpt').textContent = post.excerpt;
postCard.querySelector('.date').textContent = post.date;
postCard.querySelector('.author').textContent = post.author;
return postCard;
}
function createComment(comment) {
const template = document.getElementById('comment-template');
const commentElement = template.content.cloneNode(true);
commentElement.querySelector('.avatar').src = comment.avatar;
commentElement.querySelector('.avatar').alt = comment.author;
commentElement.querySelector('h4').textContent = comment.author;
commentElement.querySelector('.timestamp').textContent = comment.timestamp;
commentElement.querySelector('.comment-content').textContent = comment.content;
return commentElement;
}
</script>ES6+의 주요 기능들을 자세히 알아봅니다...
모든 주요 브라우저에서 지원됩니다.