HTML <article> 태그

정의와 사용법

<article> 태그는 독립적이고 자기-contained한 내용을 정의합니다.

한篇文章은 독립적으로 이해할 수 있어야 하며, 전체 사이트와 독립적으로 배포할 수 있어야 합니다.

<articel> 요소의 잠재적 출처는 다음과 같습니다:

  • 포럼 글
  • 블로그 글
  • 뉴스 보도
  • 사용자 리뷰

주의:브라우저에서,<article> 요소 자체는 특별한 스타일을 표시하지 않습니다. 그러나, CSS 스타일을 사용하여 스타일화할 수 있습니다. <article> 요소(아래 예제를 참조).

자세히 보기:

HTML DOM 참조 매뉴얼:Article 객체

예제

예제 1

독립적이고 자기-contained인 세 가지 내용:

<article>
<h2>구글 크롬</h2>
<p>구글 크롬은 구글에서 개발한 웹 브라우저로, 2008년에 출시되었습니다. 크롬은 현재 세계에서 가장 인기 있는 웹 브라우저입니다!</p>
<p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
<article>
<h2>모질라 파이어폭스</h2>
<p>모질라 파이어폭스는 모질라에서 개발된 오픈소스 웹 브라우저입니다. 2018년 1월부터 파이어폭스는 두 번째로 인기 있는 웹 브라우저로 자리 잡았습니다.</p>
<p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
<article>

Microsoft Edge

<h2>Microsoft Edge</h2>
<p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>

</html>

예제 2

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>가장 인기 있는 브라우저</h1>
  <article class="browser">
    <h2>구글 크롬</h2>
    <p>구글 크롬은 구글에서 개발한 웹 브라우저로, 2008년에 출시되었습니다. 크롬은 현재 세계에서 가장 인기 있는 웹 브라우저입니다!</p>
  <p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
  <article class="browser">
    <h2>모질라 파이어폭스</h2>
    <p>모질라 파이어폭스는 모질라에서 개발된 오픈소스 웹 브라우저입니다. 2018년 1월부터 파이어폭스는 두 번째로 인기 있는 웹 브라우저로 자리 잡았습니다.</p>
  <p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
  <article class="browser">
    
Microsoft Edge

    <h2>Microsoft Edge</h2>
  <p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
<p>Microsoft Edge는 마이크로소프트가 개발한 웹 브라우저로, 2015년에 출시되었습니다. Microsoft Edge는 인터넷 익스플로러를 대체했습니다.</p>
</article>
</body>

</html>

직접 시험해 보세요

<article> 태그는 또한 이벤트 속성을 지원합니다 전역 속성。

HTML에서의 전역 속성

<article> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。

기본 CSS 설정

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

article {
  display: block;
}

브라우저 지원

표에서는 각 요소를 최초로 완전히 지원한 브라우저 버전이 표시되었습니다.

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