From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/main/index.html | 172 ++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/ko/web/html/element/main/index.html (limited to 'files/ko/web/html/element/main') diff --git a/files/ko/web/html/element/main/index.html b/files/ko/web/html/element/main/index.html new file mode 100644 index 0000000000..3ac94eb7d0 --- /dev/null +++ b/files/ko/web/html/element/main/index.html @@ -0,0 +1,172 @@ +--- +title:
+slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML grouping content + - HTML sections + - Reference +translation_of: Web/HTML/Element/main +--- +
{{HTMLRef}}
+ +

HTML <main> 요소는 문서 {{HTMLElement("body")}}의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-standard")}}
+ + + +

{{htmlattrxref("hidden")}} 속성 없이는 문서에 하나보다 많은 <main> 요소가 존재해선 안됩니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠플로우 콘텐츠.
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 요소. 단, 구조적으로 올바른 <main> 요소여야 합니다.
가능한 ARIA 역할기본적으로 main 역할 포함, {{ARIARole("presentation")}} 가능.
DOM 인터페이스{{domxref("HTMLElement")}}
+ +

특성

+ +

이 요소는 전역 특성만 포함합니다.

+ +

사용 일람

+ +

<main> 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.

+ +

<main>은 요소 개요에 영향을 주지 않습니다. {{htmlelement("body")}} 등의 요소나 {{htmlelement("h2")}}와 같은 제목 요소와 달리 <main>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.

+ +

예제

+ +
<!-- other content -->
+
+<main>
+  <h1>Apples</h1>
+  <p>The apple is the pomaceous fruit of the apple tree.</p>
+
+  <article>
+    <h2>Red Delicious</h2>
+    <p>These bright red apples are the most common found in many
+    supermarkets.</p>
+    <p>... </p>
+    <p>... </p>
+  </article>
+
+  <article>
+    <h2>Granny Smith</h2>
+    <p>These juicy, green apples make a great filling for
+    apple pies.</p>
+    <p>... </p>
+    <p>... </p>
+  </article>
+
+</main>
+
+<!-- other content -->
+ +

접근성 고려사항

+ +

랜드마크

+ +

<main> 요소는 main 랜드마크 역할과 동일하게 행동합니다. 랜드마크는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, role="main"보다 <main> 요소를 사용하세요.

+ +

건너뛰기 링크

+ +

건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.

+ +

<main> 요소에 {{htmlattrxref("id")}} 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.

+ +
<body>
+  <a href="#main-content">Skip to main content</a>
+
+  <!-- navigation and header content -->
+
+  <main id="main-content">
+    <!-- main page content -->
+  </main>
+</body>
+
+ + + +

읽기 모드

+ +

브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 <main> 요소와 더불어 제목과 콘텐츠 구획 요소를 사용합니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5.1')}}No change from {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

브라우저 호환성

+ +

대부분의 브라우저에서 <main> 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <main> 요소에 "main" {{glossary("ARIA")}} 역할을 명시해 접근성을 확보하는 것이 좋습니다.

+ +
<main role="main">
+  ...
+</main>
+
+ + + +

{{Compat("html.elements.main")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf