aside 보조 콘텐츠
사이드바와 간접적으로 관련된 콘텐츠에 aside 사용하기
aside 보조 콘텐츠은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
aside 요소
<aside> 요소는 주변 콘텐츠와 간접적으로 관련된 콘텐츠를 표시합니다.
- 주요 콘텐츠의 의미를 잃지 않고 주요 콘텐츠와 분리할 수 있습니다
- 사이드바, 강조 상자, 인용문 발췌, 광고 등을 생각해 보세요
아티클 안의 aside
아티클 안에서 aside는 관련은 있지만 서사에 필수적이지 않은 정보를 표시합니다.
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>페이지 수준의 aside
페이지 수준에서는 aside를 사이드바에 사용합니다.
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>aside의 ARIA 역할
페이지 수준의 <aside>는 role="complementary"에 매핑됩니다.
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->aside로 인용문 발췌 표시하기
시각적 효과를 위해 발췌한 인용문은 aside로 표시할 수 있습니다.
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>aside로 광고 표시하기
사이드바의 광고 단위는 aside로 표시할 수 있습니다.
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside와 section 비교
핵심적인 차이:
<aside>— 주요 콘텐츠와 간접적으로 관련된 보충 콘텐츠<section>— 주요 콘텐츠의 주제에 포함되는 부분
aside로 용어집 항목 표시하기
아티클에서 사용한 용어를 정의할 때 aside를 사용합니다.
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>여러 사이드바 섹션
사이드바 aside에는 서로 독립적인 여러 섹션이 포함될 수 있습니다.
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside에는 제목이 필요하지 않습니다
섹션과 달리 aside에는 제목이 반드시 필요하지 않습니다.
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>단순한 스타일 지정에는 aside를 사용하지 않습니다
Aside는 의미를 나타내는 요소이므로 단순히 시각적인 사이드바 배치에 사용하지 않습니다.
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>빠른 확인
페이지 수준의 aside는 어떤 ARIA 랜드마크 역할에 매핑되나요?
요약: aside
aside의 핵심 내용:
- 주변 콘텐츠와 간접적으로 관련된 콘텐츠
- 페이지 수준의 사이드바 → 보조 랜드마크
- 아티클 안에서 사용 → 보충 정보(용어 정의, 강조 상자)
- 여러 aside에는 aria-label로 이름을 지정함
- 순수한 레이아웃 컨테이너에는 사용하지 않음 — 그런 경우에는 디브 사용
자주 묻는 질문
“aside 보조 콘텐츠” 강의는 무료인가요?
네 — “aside 보조 콘텐츠” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“aside 보조 콘텐츠”에서 뭘 배우나요?
사이드바와 간접적으로 관련된 콘텐츠에 aside 사용하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“aside 보조 콘텐츠” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.