main element - by. UXKM

2025-05-16

요약 설명
<main> 요소는 문서에서 핵심적인 주요 콘텐츠 영역을 나타내는 시맨틱 태그로, 해당 페이지에서 고유하고 중심이 되는 내용을 포함합니다.
헤더, 내비게이션, 사이드바, 푸터 등을 제외한 콘텐츠 영역에 해당하며, 문서 안에 단 한 번만 사용해야 합니다. <main> 내부에는 여러 개의 <section>, <article>, <aside>등을 포함할 수 있으며, 보조 정보가 아닌 페이지 목적에 부합하는 콘텐츠를 담는 데 사용됩니다.

주요 역할 및 특징

문서의 핵심 콘텐츠 표시
- <main>은 문서의 가장 중요한 콘텐츠를 담는 영역으로, 문서의 주된 목적을 나타냅니다.
- 예를 들어 블로그 게시물, 제품 설명, 뉴스 기사 등이 포함됩니다.
SEO 및 접근성
- 검색 엔진은 <main>을 통해 주요 콘텐츠를 구분하며, SEO에 긍정적인 영향을 미칩니다.
- 스크린 리더는 <main>을 통해 사용자가 주요 콘텐츠를 빠르게 탐색할 수 있도록 지원합니다.
페이지 내 한 번만 사용
<main>은 문서 내에서 중복 사용할 수 없으며, 페이지당 하나만 사용해야 합니다.
다른 의미론적 태그와의 관계
<header>, <footer>, <aside>, <nav>와 같은 반복적인 콘텐츠와는 분리되어야 하며, 문서 구조의 명확성을 강화합니다.

CSS 기본 값

<main> 요소는 기본적으로 블록 레벨 요소입니다.

							main {
								display: block;
							}

기본 문법

							<main>
								<!-- 주요 콘텐츠 -->
							</main>

속성

<main> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

							<main id="main-content" class="content-area" role="main">
								<!-- 주요 콘텐츠 -->
							</main>

예제

단일 페이지의 주요 콘텐츠

								<main>
									<h1>회사 소개</h1>
									<p>우리는 혁신적인 기술로 세상을 변화시키고 있습니다.</p>
								</main>

블로그 게시물

								<main>
									<article>
										<h1>HTML5의 장점</h1>
										<p>HTML5는 풍부한 의미론적 태그와 새로운 기능을 제공합니다.</p>
									</article>
								</main>

쇼핑몰 웹사이트의 주요 상품 목록

								<main>
									<section>
										<h2>인기 상품</h2>
										<ul>
											<li>상품 1</li>
											<li>상품 2</li>
											<li>상품 3</li>
										</ul>
									</section>
								</main>

접근성을 고려한 주요 콘텐츠

								<main aria-labelledby="main-title">
									<h1 id="main-title">주요 콘텐츠</h1>
									<p>이 페이지는 HTML5의 주요 기능과 태그를 다룹니다.</p>
								</main>

주의사항

<main> 요소는 문서의 주된 내용을 정의하기 위해 사용되며, 다른 영역(헤더, 푸터, 사이드바 등)과 중복되지 않도록 한 번만 사용해야 합니다.
또한, 주요 콘텐츠를 나타내지 않는 경우 <main> 요소를 사용하지 말고, 다른 적절한 의미론적 태그나 <div>를 사용하세요.