HTML 기초 정리(8) - <article> 기사 본문
HTML 기초 정리(8) - <article> 기사
- 2024. 11. 18. 18:34
728x90
정의 및 사용법
태그 <article>는 독립적이고 자체 포함되는 콘텐츠를 지정합니다.
기사는 그 자체로 의미를 가져야 하며, 사이트의 나머지 부분과 독립적으로 배포할 수 있어야 합니다.
해당 원소 의 잠재적 출처 <article>:
- 포럼 게시물
- 블로그 게시물
- 뉴스기사
참고: 이 <article>요소는 브라우저에서 특별한 것으로 렌더링되지 않습니다.
그러나 CSS를 사용하여 <article> 요소에 스타일을 지정할 수 있습니다(아래 예 참조).
예시
CSS를 사용하여 <article> 요소의 스타일을 지정합니다.
<html>
<head>
<style>
.all-browsers { margin: 0; padding: 5px; background-color: lightgray;}
.all-browsers > h1, .browser { margin: 10px; padding: 5px;}
.browser { background: white;}
.browser > h2, p { margin: 4px; font-size: 90%;}
</style>
</head>
<body>
<article class="all-browsers">
<h1>
Most Popular Browsers
</h1>
<article class="browser">
<h2>
Google Chrome
</h2>
<p>
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!
</p>
</article>
<article class="browser">
<h2>
Mozilla Firefox
</h2>
<p>
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.
</p>
</article>
<article class="browser">
<h2>
Microsoft Edge
</h2>
<p>
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.
</p>
</article>
</article>
</body>
</html>
아래와 같이 실행된다.
반응형
'프로그램 > HTML' 카테고리의 다른 글
| HTML 기초 정리(10) - <audio> 소리 (0) | 2024.11.21 |
|---|---|
| HTML 기초 정리(9) - <aside> 옆쪽 (0) | 2024.11.20 |
| HTML 기초 정리(7) - <area> 이미지 맵 (0) | 2024.11.17 |
| HTML 기초 정리(6) - <address> 주소 (0) | 2024.11.14 |
| HTML 기초 정리(5) - <abbr> 약어 (0) | 2024.11.13 |
RECENT COMMENT