Web Accessibility Academy · 강의

main에 콘텐츠 넣기와 main 하나만 사용하기

하나뿐인 주요 콘텐츠 영역을 정의하세요.

레슨 2/413개 단계

main에 콘텐츠 넣기와 main 하나만 사용하기은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

main은 핵심 무대입니다

모든 페이지에는 하나의 중심이 있습니다. 바로 고유한 콘텐츠입니다. 주요 콘텐츠 요소에는 이 콘텐츠가 들어가며, 머리말과 바닥글은 여기에 포함되지 않습니다.

항상 하나의 주요 콘텐츠

페이지에는 정확히 하나의 주요 콘텐츠 랜드마크가 있어야 합니다. 주요 콘텐츠가 두 개면 사용자는 기본 목적지가 하나일 것으로 기대하기 때문에 혼란을 겪습니다.

안에 들어갈 내용

문서, 양식, 대시보드처럼 페이지의 핵심 콘텐츠를 주요 콘텐츠 안에 넣으십시오. 사용자가 실제로 이 페이지를 찾은 이유가 되는 내용입니다.

<main>
  <h1>Your dashboard</h1>
  <p>Today's stats...</p>
</main>

밖에 둘 내용

사이트 로고, 전역 탐색 메뉴, 바닥글 링크처럼 반복되는 내용은 이 페이지에만 있는 것이 아니므로 주요 콘텐츠 밖에 둡니다.

건너뛰기 링크의 대상

건너뛰기 링크는 주요 콘텐츠를 가리키므로 키보드 사용자는 모든 페이지에 반복되는 머리말을 지나 콘텐츠로 바로 이동할 수 있습니다.

<a href="#main">Skip to content</a>
<main id="main">...</main>

주요 콘텐츠에 포커스 가능하게 만들기

건너뛰기 링크가 포커스를 주요 콘텐츠로 옮길 수 있도록 주요 콘텐츠에 탭 인덱스를 -1로 추가하십시오. 이렇게 하면 주요 콘텐츠 자체가 탭 대상이 되지는 않습니다.

<main id="main" tabindex="-1">
  ...
</main>

두 개의 주요 콘텐츠, 숨김 규칙

두 번째 주요 콘텐츠가 꼭 필요하다면 하나를 제외한 나머지는 모두 화면에서 숨겨야 합니다. 한 번에 표시되는 주요 콘텐츠는 하나뿐이어야 합니다.

주요 콘텐츠를 중첩하지 마십시오

주요 콘텐츠 요소는 문서, 보조 콘텐츠, 탐색 메뉴, 머리말 또는 바닥글 안에 들어갈 수 없습니다. 페이지 본문의 최상위 수준에 배치하십시오.

주요 콘텐츠 역할의 대체 방법

아주 오래된 브라우저를 지원하려면 백업으로 주요 콘텐츠 역할을 추가할 수 있지만, 현대적인 방식에서는 기본 제공 주요 콘텐츠 요소를 사용하는 것이 올바릅니다.

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

주요 콘텐츠를 하나만 두면 좋은 이유

주요 콘텐츠가 하나면 스크린 리더 사용자는 키 하나만 눌러도 모든 페이지에서 매번 정확히 콘텐츠에 도착할 수 있습니다. 🎯

깔끔한 페이지 구조

머리말, 탐색 메뉴, 하나의 주요 콘텐츠, 바닥글 순서입니다. 이렇게 예측 가능한 구조 덕분에 페이지를 소리로 훑어보기가 쉽습니다.

빠른 확인

하나의 페이지에는 표시되는 주요 콘텐츠 랜드마크가 몇 개 있어야 할까요?

인터랙티브 레슨에서 답해보세요

복습: 명확한 주요 콘텐츠 하나

고유한 콘텐츠를 하나의 주요 콘텐츠에 넣고, 반복되는 부분은 바깥에 두며, 주요 콘텐츠를 건너뛰기 링크의 대상으로 사용하는 방법을 배웠습니다. 🙌

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“main에 콘텐츠 넣기와 main 하나만 사용하기” 강의는 무료인가요?

네 — “main에 콘텐츠 넣기와 main 하나만 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“main에 콘텐츠 넣기와 main 하나만 사용하기”에서 뭘 배우나요?

하나뿐인 주요 콘텐츠 영역을 정의하세요. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“main에 콘텐츠 넣기와 main 하나만 사용하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Web Accessibility Academy(으)로 돌아가기