ES6+의 주요 기능들을 자세히 알아봅니다...
💡 퀵 접속: htm.kr/article
<article> 태그는 독립적으로 배포되거나 재사용될 수 있는 독립적인 콘텐츠를 나타낼 때 사용합니다. 블로그 포스트, 뉴스 기사, 제품 카드, 사용자 댓글 등이 이에 해당합니다. 각 article은 자체적으로 의미가 완결되어야 합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| id | 텍스트 | article의 고유 식별자를 지정합니다. |
| class | 텍스트 | article의 스타일 클래스를 지정합니다. |
<article>
<h2>React Hooks 완벽 가이드</h2>
<p>React Hooks의 모든 것을 알아봅니다...</p>
<footer>
<p>작성자: 홍길동</p>
<time>2024-03-15</time>
</footer>
</article>
<article>
<h2>댓글</h2>
<p>정말 유용한 정보네요!</p>
<footer>
<p>작성자: 김철수</p>
<time>2024-03-16</time>
</footer>
</article><!-- 1. 블로그 포스트 목록 -->
<main class="blog-posts">
<article class="post-card">
<header>
<h2>JavaScript ES6+ 완벽 가이드</h2>
<div class="post-meta">
<span class="author">작성자: 홍길동</span>
<time>2024-03-15</time>
</div>
</header>
<div class="post-content">
<p>ES6+의 주요 기능들을 자세히 알아봅니다...</p>
</div>
<footer>
<div class="tags">
<span>#JavaScript</span>
<span>#ES6</span>
</div>
</footer>
</article>
<article class="post-card">
<header>
<h2>CSS Grid 레이아웃 마스터하기</h2>
<div class="post-meta">
<span class="author">작성자: 김철수</span>
<time>2024-03-14</time>
</div>
</header>
<div class="post-content">
<p>CSS Grid를 활용한 레이아웃 설계 방법...</p>
</div>
<footer>
<div class="tags">
<span>#CSS</span>
<span>#Grid</span>
</div>
</footer>
</article>
</main>
<!-- 2. 제품 카드 -->
<section class="products">
<article class="product-card">
<img src="product1.jpg" alt="제품 이미지">
<h3>프리미엄 노트북</h3>
<p>최신 프로세서와 고성능 그래픽...</p>
<div class="price">₩1,500,000</div>
<button>장바구니 담기</button>
</article>
<article class="product-card">
<img src="product2.jpg" alt="제품 이미지">
<h3>무선 이어폰</h3>
<p>노이즈 캔슬링과 고음질...</p>
<div class="price">₩200,000</div>
<button>장바구니 담기</button>
</article>
</section>
<!-- 3. 스타일링 예제 -->
<style>
.post-card {
margin: 2rem 0;
padding: 1.5rem;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.post-card header {
margin-bottom: 1rem;
}
.post-meta {
color: #666;
font-size: 0.9rem;
}
.tags span {
background-color: #e3f2fd;
padding: 0.2rem 0.5rem;
border-radius: 3px;
margin-right: 0.5rem;
font-size: 0.8rem;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
text-align: center;
}
.product-card img {
max-width: 100%;
height: auto;
}
.price {
color: #e91e63;
font-size: 1.2rem;
font-weight: bold;
margin: 1rem 0;
}
button {
background-color: #2196f3;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
</style>ES6+의 주요 기능들을 자세히 알아봅니다...
모든 주요 브라우저에서 지원됩니다.