HTML <aside>: 보완 콘텐츠 요소
HTML <aside>
요소는 문서의 주요 내용에 간접적으로만 연관된 부분을 나타내며, 주로 사이드바와 콜아웃 박스에 사용합니다.
article {
max-width: 700px;
line-height: 1.6;
}
aside {
max-width: 200px;
border-left: 4px solid maroon;
float: right;
margin-bottom: 16px;
margin-left: 16px;
padding-left: 8px;
}
aside p {
margin: 0;
}
<article>
<p>행성상성운은 발광성운의 일종으로, 늙은 적색거성의 외피층이 팽창하여 형성된 전리 기체들로 이루어져 있다.</p>
<aside>
<p>
최초로 발견된 행성상성운은 여우자리의 아령 성운으로, 1764년 샤를 메시에가 발견해 메시에 천체 목록에 메시에
27(M27)로 등재하였다.
</p>
</aside>
<p>
별의 수명이 거의 다 끝난 적색거성 단계에서, 별의 외피층은 강력한 항성풍에 의해 바깥쪽으로 방출된다. 그 결과
적색거성의 대기 대부분이 팽창해 나가고 나면, 노출된 뜨겁고 밝은 항성핵이 자외선을 내뿜어 팽창한 외피층을 전리시킨다.
흡수된 자외선은 중심별 주위의 흐릿한 기체를 들뜨게 만들고, 알록달록한 행성상성운이 보이게 된다.
</p>
<footer>
—위키백과,
<cite href="https://ko.wikipedia.org/wiki/%ED%96%89%EC%84%B1%EC%83%81%EC%84%B1%EC%9A%B4">'행성상성운'</cite>
</footer>
</article>
불러오는 중...
특성
전역 특성만 포함합니다.
사용 일람
- 텍스트의 중간에 괄호로 감싸서 추가한 설명을 따로 나타내기 위한 용도로는
<aside>
를 사용하지 마세요. 그런 설명은 문서의 주 흐름에 포함된 것으로 봐야 합니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
aside |