JavaScript ES6+ 완벽 가이드
ES6+의 주요 기능들을 자세히 알아봅니다...
💡 퀵 접속: htm.kr/slot
<slot> 태그는 웹 컴포넌트(Web Components)에서 사용되는 태그로, 사용자 정의 요소의 마크업 내에서 사용자가 정의한 콘텐츠를 삽입할 수 있는 플레이스홀더를 제공합니다. 이를 통해 웹 컴포넌트의 재사용성과 유연성을 높일 수 있습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| name | 텍스트 | 슬롯의 이름을 지정합니다. 이름이 있는 슬롯은 특정 콘텐츠를 해당 위치에 삽입할 수 있습니다. |
<!-- 사용자 정의 요소 정의 -->
<script>
class UserCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
.card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 4px;
}
.header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 1rem;
}
.name {
font-size: 1.2rem;
margin: 0;
}
</style>
<div class="card">
<div class="header">
<img class="avatar" src="" alt="">
<h3 class="name"></h3>
</div>
<slot name="description">기본 설명</slot>
<slot name="footer"></slot>
</div>
`;
}
}
customElements.define('user-card', UserCard);
</script>
<!-- 사용자 정의 요소 사용 -->
<user-card>
<span slot="description">이 사용자는 프론트엔드 개발자입니다.</span>
<div slot="footer">
<button>팔로우</button>
<button>메시지</button>
</div>
</user-card><!-- 1. 블로그 포스트 카드 컴포넌트 -->
<script>
class BlogPostCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<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 {
width: 100%;
height: 200px;
object-fit: cover;
}
.post-content {
padding: 1.5rem;
}
.post-title {
margin: 0 0 1rem;
color: #333;
}
.post-meta {
display: flex;
justify-content: space-between;
color: #999;
font-size: 0.9rem;
margin-top: 1rem;
}
</style>
<article class="post-card">
<slot name="image"></slot>
<div class="post-content">
<slot name="title"></slot>
<slot name="excerpt"></slot>
<div class="post-meta">
<slot name="date"></slot>
<slot name="author"></slot>
</div>
</div>
</article>
`;
}
}
customElements.define('blog-post-card', BlogPostCard);
</script>
<!-- 2. 블로그 포스트 카드 사용 예시 -->
<blog-post-card>
<img slot="image" src="post-image.jpg" alt="포스트 이미지" class="post-image">
<h2 slot="title" class="post-title">JavaScript ES6+ 완벽 가이드</h2>
<p slot="excerpt">ES6+의 주요 기능들을 자세히 알아봅니다...</p>
<span slot="date">2024-03-15</span>
<span slot="author">홍길동</span>
</blog-post-card>
<!-- 3. 댓글 컴포넌트 -->
<script>
class CommentComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
.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>
<div class="comment">
<div class="comment-header">
<slot name="avatar"></slot>
<div class="comment-info">
<slot name="author"></slot>
<slot name="timestamp"></slot>
</div>
</div>
<slot name="content"></slot>
</div>
`;
}
}
customElements.define('comment-component', CommentComponent);
</script>
<!-- 4. 댓글 컴포넌트 사용 예시 -->
<comment-component>
<img slot="avatar" src="avatar.jpg" alt="사용자 아바타" class="avatar">
<h4 slot="author">김철수</h4>
<span slot="timestamp" class="timestamp">2024-03-15 14:30</span>
<p slot="content" class="comment-content">정말 유용한 정보네요! 감사합니다.</p>
</comment-component>ES6+의 주요 기능들을 자세히 알아봅니다...
모든 주요 브라우저에서 지원됩니다.