HTML <main> 태그

정의 및 사용법

<main> 요소는 문서의 주 내용을 정의합니다.

<main> 요소 내의 내용은 문서에 대해서는 유일해야 합니다. 중복되는 내용이 포함되지 않도록 해야 합니다. 예를 들어,サイ드바, 탐색 링크, 저작권 정보, 웹 브랜드 및 검색 양식 등이 포함될 수 있습니다.

주의:문서에서는 여러 개의 <main> 요소。 <main> 요소는 다음과 같은 것으로는 될 수 없습니다. <article>、<aside>、<footer>、<header> 또는 <nav> 요소의 자식 요소.

인스턴스

예제 1

문서의 주 내용을 지정:

<main>
  <h1>가장 인기 있는 브라우저</h1>
  <p>크롬, 파이어폭스, 엣지는 현재 가장 많이 사용되는 브라우저입니다.</p>
  <article>
    <h2>구글 크롬</h2>
    <p>구글 크롬은 구글이 개발한 웹 브라우저로, 2008년에 출시되었습니다......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox는 Mozilla에서 개발한 오픈 소스 웹 브라우저......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge는 마이크로소프트에서 개발한 웹 브라우저로, 2015년에 출시되었습니다......&</p>
  </article>
</main>

직접 테스트해 보세요

예제 2

CSS를 사용하여 설정 <main> 요소의 스타일:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>가장 인기 있는 브라우저</h1>
  <p>크롬, 파이어폭스, 엣지는 현재 가장 많이 사용되는 브라우저입니다.</p>
  <article>
    <h2>구글 크롬</h2>
    <p>구글 크롬은 구글이 개발한 웹 브라우저로, 2008년에 출시되었습니다......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox는 Mozilla에서 개발한 오픈 소스 웹 브라우저......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge는 마이크로소프트에서 개발한 웹 브라우저로, 2015년에 출시되었습니다......&</p>
  </article>
</main>
</body>
</html>

직접 테스트해 보세요

전역 속성

<main> 태그는 또한 지원합니다 HTML에서의 전역 속성。

이벤트 속성

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

브라우저 지원

표에서는 이 태그를 최초로 완전히 지원한 브라우저 버전이 기재되었습니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
26.0 12.0 21.0 7.0 16.0