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>를 사용하지 마세요. 그런 설명은 문서의 주 흐름에 포함된 것으로 봐야 합니다.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefoxiOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
aside
MDN browser-compat-data

같이 보기