HTML <aside> 태그

정의와 사용법

<aside> 태그는 그 자신의 내용 이외의 내용을 정의합니다.

aside의 내용은 주위의 내용과 간접적으로 관련이 있어야 합니다.

ヒント：<aside> 내용은 일반적으로 문서에서 자리를 잡고 있습니다.

주의사항：<aside> 요소는 브라우저에서 특별한 스타일로 표시되지 않습니다. 그러나, CSS를 사용하여 설정할 수 있습니다 <aside> 요소의 스타일（아래의 예제를 참조하세요）。

다른 것을 참조하세요：

HTML DOM 참조 가이드：Aside 객체

인스턴스

예제 1

그 자신의 내용 이외의 내용을 표시합니다：

<p>이 여름, 저와 가족이 상하이 해昌 해양공원을 방문했습니다. 날씨가 좋았고, 해양공원이 매우 드림같았습니다! 저와 가족이 좋은 여름을 보냈습니다!</p>
<aside>
<h4>상해 해창 해양 공원</h4>
<p>상하이 해昌 해양공원은 푸둥 신구에 위치한 테마파크로, 해양 문화 특성을 중심으로 총 면적 약 29.7 헥타르이며, 또한 국가 4A급 관광지입니다.</p>
</aside>

직접 테스트해 보세요

예제 2

CSS를 사용하여 <aside> 요소의 스타일을 설정합니다：

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>aside 요소</h1>
<p>이 여름, 저와 가족이 상하이 해昌 해양공원을 방문했습니다. 날씨가 좋았고, 해양공원이 매우 드림같았습니다! 저와 가족이 좋은 여름을 보냈습니다!</p>
<aside>
<p>상하이 해昌 해양공원은 푸둥 신구에 위치한 테마파크로, 해양 문화 특성을 중심으로 총 면적 약 29.7 헥타르이며, 또한 국가 4A급 관광지입니다.</p>
</aside>
<p>이 여름, 저와 가족이 상하이 해昌 해양공원을 방문했습니다. 날씨가 좋았고, 해양공원이 매우 드림같았습니다! 저와 가족이 좋은 여름을 보냈습니다!</p>
<p>이 여름, 저와 가족이 상하이 해昌 해양공원을 방문했습니다. 날씨가 좋았고, 해양공원이 매우 드림같았습니다! 저와 가족이 좋은 여름을 보냈습니다!</p>
</body>
</html>

직접 테스트해 보세요

전역 속성

<aside> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 전역 속성。

이벤트 속성

<aside> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본 값으로 표시합니다 <aside> 요소:

aside {
  display: block;
}

브라우저 지원

표에서는 이 요소를 최초로 완전히 지원하는 브라우저 버전을 기재했습니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
6.0 9.0 4.0 5.0 11.1