<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 |