HTML 기초 정리(9) - <aside> 옆쪽 본문
HTML 기초 정리(9) - <aside> 옆쪽
- 2024. 11. 20. 22:54
728x90
정의 및 사용법
태그 <aside>는 태그가 배치된 콘텐츠 외의 다른 콘텐츠를 정의합니다.
옆의 내용은 주위의 내용과 간접적으로 연관되어야 합니다.
팁: 콘텐츠 <aside>는 종종 문서의 사이드바에 배치됩니다.
참고: 이 <aside>요소는 브라우저에서 특별한 것으로 렌더링되지 않습니다.
그러나 CSS를 사용하여 <aside> 요소에 스타일을 지정할 수 있습니다(아래 예 참조).
예시
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>The aside element</h1>
<p>My family and I visited The Epcot center this summer.
The weather was nice, and Epcot was amazing! I had a great summer together with my family!
</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.
</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
</p>
<p>My family and I visited The Epcot center this summer. The weather was nice,
and Epcot was amazing! I had a great summer together with my family!
</p>
</body>
</html>
아래와 같이 실행된다.
반응형
'프로그램 > HTML' 카테고리의 다른 글
| HTML 기초 정리(11) - <b> 굵게 (0) | 2024.11.22 |
|---|---|
| HTML 기초 정리(10) - <audio> 소리 (0) | 2024.11.21 |
| HTML 기초 정리(8) - <article> 기사 (0) | 2024.11.18 |
| HTML 기초 정리(7) - <area> 이미지 맵 (0) | 2024.11.17 |
| HTML 기초 정리(6) - <address> 주소 (0) | 2024.11.14 |
프로그램/HTML Related Articles
- HTML 기초 정리(11) - <b> 굵게
- HTML 기초 정리(10) - <audio> 소리
-
HTML 기초 정리(8) - <article> 기사
- HTML 기초 정리(7) - <area> 이미지 맵
RECENT COMMENT