<aside>: 별도 구획 요소
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
시도해 보기
<p> Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms. </p> <aside> <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p> </aside> <p> Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures. </p> aside { width: 40%; padding-left: 0.5rem; margin-left: 0.5rem; float: right; box-shadow: inset 5px 0 5px -5px #29627e; font-style: italic; color: #29627e; } aside > p { margin: 0.5rem; } | 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 콘텐츠, 뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소.<aside> 요소는 <address>의 후손이 될 수 없음에 주의하세요. |
| 암시적 ARIA 역할 | complementary |
| 가능한 ARIA 요소 | feed, none, note, presentation, region, search |
| DOM 인터페이스 | HTMLElement |
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
- 괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로
<aside>로 나타내선 안됩니다.
예제
<aside> 사용하기
다음 예제는 글 내의 문단을 <aside>로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.
html
<article> <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p> <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside> <p>영화에 대한 정보...</p> </article> 결과
명세
| Specification |
|---|
| HTML # the-aside-element |