main

설명

body 안의 문서의 주요 콘텐츠. 페이지당 하나 지정하기 작성 다 하고 페이지 기준 핵심 콘텐츠를 main으로 감싸면 됨. 페이지를 조립하는 page.tsx나 최상위 레이아웃 파일에서 전체 콘텐츠 중 지배적인 부분에만 <main>을 지정

Primary

Primary

content category

flow

section

main 유의사항 페이지 컴포넌트 수준에서 확인해야 함.

main

<body> 내부 요소 중 지배적인 콘텐츠를 나타냄. (페이지 방문 목적)

블로그 게시글: 본문 글
쇼핑몰: 상품 리스트
포럼: 글 목록 또는 글 읽기 영역

별도의 화면상 표기는 없다.

시멘틱 태그로, 스크린리더와 같은 접근성 도구에서 페이지의 주요 내용을 빠르게 파악할 수 있도록 도움.

📌

Tip: - 모든 페이지에 하나의 <main> 태그만 사용해야 함. - 작성을 완료된 후, 페이지의 지배적인 콘텐츠를 <main>으로 감싸기. - 헤더, 네비게이션, 사이드바, 푸터 등 반복적으로 나타나는 콘텐츠는 제외.

유의사항

<main>은 다른 시멘틱 태그(header, footer, nav, aside)와 겹치지 않도록 사용.

스크린리더는 <main> 영역을 바로 탐색할 수 있으므로, 중복되지 않게 정확히 지정해야 함.

페이지 컴포넌트 수준에서 확인해야 함.

main은 페이지당 하나여야 하니까. 조립하면서 페이지를 구성하는 page.tsx 컴포넌트에서 main이 뭔지 판단하고 태그를 써야 함.

따라서 하위 컴포넌트들에선 main을 쓰면 안됨.


// page.tsx
import { Header } from './Header';
import { Footer } from './Footer';
import { ProductList } from './ProductList';

export default function Page() {
  return (
    <>
      <Header />
      <main>
        <ProductList />
      </main>
      <Footer />
    </>
  );
}