HTML <aside> 태그

<article>
    <h2>React Hooks 완벽 가이드</h2>
    <p>React Hooks의 모든 것을 알아봅니다...</p>
    
    <aside>
        <h3>관련 포스트</h3>
        <ul>
            <li><a href="/react-basics">React 기초</a></li>
            <li><a href="/react-context">Context API</a></li>
        </ul>
    </aside>
</article>

<!-- 1. 사이드바 -->
<div class="layout">
    <main>
        <article>
            <h1>웹 개발 트렌드 2024</h1>
            <p>2024년 웹 개발의 주요 트렌드를 살펴봅니다...</p>
        </article>
    </main>

    <aside class="sidebar">
        <section class="author-info">
            <h3>작성자 소개</h3>
            <img src="author.jpg" alt="작성자 프로필">
            <p>10년 경력의 웹 개발자입니다.</p>
        </section>

        <section class="related-posts">
            <h3>관련 포스트</h3>
            <ul>
                <li><a href="/post/1">프론트엔드 개발 가이드</a></li>
                <li><a href="/post/2">백엔드 개발 트렌드</a></li>
            </ul>
        </section>

        <section class="advertisement">
            <h3>스폰서</h3>
            <div class="ad-content">
                <img src="ad.jpg" alt="광고">
                <p>최고의 개발 도구를 만나보세요!</p>
            </div>
        </section>
    </aside>
</div>

<!-- 2. 인용구 -->
<article>
    <h2>CSS Grid 레이아웃</h2>
    <p>CSS Grid는 2차원 레이아웃 시스템입니다...</p>
    
    <aside class="quote">
        <blockquote>
            "CSS Grid는 웹 레이아웃의 혁명입니다."
            <footer>— CSS 전문가</footer>
        </blockquote>
    </aside>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.sidebar {
    background-color: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
}

.sidebar section {
    margin-bottom: 2rem;
}

.sidebar h3 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.author-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.related-posts ul {
    list-style: none;
    padding: 0;
}

.related-posts li {
    margin-bottom: 0.5rem;
}

.related-posts a {
    text-decoration: none;
    color: #2196f3;
}

.related-posts a:hover {
    text-decoration: underline;
}

.advertisement {
    background-color: #fff;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ad-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
}

.quote {
    background-color: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.quote blockquote {
    margin: 0;
    font-style: italic;
    color: #333;
}

.quote footer {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}
</style>