핵심 요약
<main> 태그는 해당 HTML 문서의 중심이 되는 주요 콘텐츠(Main Content)를 정의하는 시맨틱 블록 태그입니다. 문서의 핵심 주제나 애플리케이션의 주요 기능을 감싸는 역할을 하며, 검색 엔진 로봇과 스크린 리더가 페이지의 가장 중요한 알맹이를 즉시 파악할 수 있도록 돕는 웹 접근성 및 SEO의 핵심 요소입니다.
1. <main> 태그란?
여러분, 식당에서 '정식'을 시켰다고 생각해 보세요. 밥, 반찬, 국물도 중요하지만 가장 중요한 건 커다란 접시에 담긴 '메인 요리(Main Dish)'죠?
웹 페이지도 마찬가지입니다. <header>가 식당 간판, <footer>가 영수증, <nav>가 메뉴판이라면, <main> 태그는 사용자가 이 페이지에 접속한 진짜 목적인 '메인 요리'를 담는 그릇입니다.
블로그라면 포스팅 본문이, 쇼핑몰이라면 상품 상세 정보가 이 <main> 그릇에 담겨야 합니다. 무의미한 <div> 박스 대신 <main> 태그를 사용하면 AI에게 "이 부분이 우리 페이지의 진짜 알맹이입니다!"라고 가장 확실하게 어필할 수 있습니다.
2. 한눈에 보는 핵심 속성 & 사용법
<main> 태그 자체에만 쓰이는 특별한 속성은 없지만, 문서 내 배치 시 엄격한 규칙이 존재합니다.
| 구분 | 내용 | 실무 핵심 가이드 |
| 사용 횟수 | 한 페이지당 오직 1개만 보여야 합니다. |
2개 이상 사용 시 hidden 속성으로 숨겨야
접근성 위반을 피합니다. |
| 포함 불가 위치 | <header>, <footer>, <nav>, <aside>의 자식 요소로 쓸 수 없습니다. |
<body>의 직계 자식으로 두거나
전체 래퍼(Wrapper) 안에 단독으로 둡니다. |
| 전역 속성 | id, class 등 모든 HTML 전역 속성 사용 가능 |
주로 id="main" 혹은 id="content"를 부여하여
스킵 네비게이션에 활용합니다. |
3. 주의사항
스킵 내비게이션(Skip Navigation)의 종착지: 시각장애인이나 키보드 전용 사용자는 상단 메뉴를 매번 탭(Tab) 키로 거치지 않고 바로 본문으로 점프하기를 원합니다. 이때 <main id="main-content">처럼 고유 ID를 부여하고, 페이지 최상단에 <a href="#main-content"> 본문 바로가기</a>를 만들어두면 웹 접근성(a11y) 점수에서 만점을 받을 수 있습니다.
숨겨진 <main>의 활용: SPA(Single Page Application) 환경에서는 DOM 트리에 여러 개의 <main>을 만들어두고 화면 전환에 따라 하나만 보여주기도 합니다. 이때 보이지 않는 <main>에는 반드시 hidden 속성을 부여해야 스크린 리더가 혼란을 겪지 않습니다.
4. 초보자가 가장 자주 하는 실수 & 해결책
Q: 구형 브라우저(IE11 등)에서 <main> 태그가 블록(Block) 요소로 인식이 안 돼요! 레이아웃이 깨집니다.
A: <main>은 HTML5 표준에 가장 늦게 합류한 태그라, 구형 브라우저에서는 크기가 없는 인라인(Inline) 요소로 취급되는 버그가 있습니다. CSS 최상단에 main { display: block; }을 한 줄 선언해 주면 이 문제가 깔끔하게 해결됩니다. (실무 크로스 브라우징의 정석 팁입니다!)
Q: 사이드바(<aside>) 영역도 <main> 안에 넣어야 하나요?
A: 사이드바의 내용이 본문과 직접적인 연관이 있는 '핵심 부가 정보'라면 <main> 안에 넣어도 됩니다. 하지만 사이트 전반에 공통으로 노출되는 '최근 댓글', '쇼핑몰 전체 광고 배너' 등이라면 <main> 바깥에 독립적으로 배치하는 것이 시맨틱 구조상 올바릅니다.
5. 복붙해서 바로 쓰는 예제
웹 접근성을 완벽하게 지키는 스킵 네비게이션 기능과 함께, 시각적으로 눈을 편안하게 해주는 파스텔 블루 톤의 메인 콘텐츠 영역 예제입니다.
<!-- HTML: 접근성과 시맨틱을 모두 잡은 레이아웃 -->
<!-- 웹 접근성 필수: 키보드 Tab 키를 누르면 나타나는 스킵 네비게이션 -->
<a href="#main-content" class="skip-nav">본문 바로가기</a>
<header class="pastel-header">
<h1>티과장 블로그</h1>
</header>
<!-- 문서의 진짜 알맹이, main 태그 시작 -->
<main id="main-content" class="pastel-main">
<article class="content-box">
<h2>파스텔 톤으로 꾸며본 메인 콘텐츠 🎨</h2>
<p>
이곳은 사용자가 이 페이지에서 가장 먼저 읽어야 할 핵심 정보가 담기는 <main> 영역입니다.<br>
키보드 사용자는 상단의 '본문 바로가기'를 통해 이곳으로 단번에 점프할 수 있습니다.
</p>
</article>
</main>
<footer class="pastel-footer">
<p>© 2026 T-Manager Blog.</p>
</footer>/* CSS: 눈이 편안한 파스텔 배색 및 크로스 브라우징 방어 */
body {
margin: 0;
font-family: 'Pretendard', sans-serif;
background-color: #fcfbf9; /* 따뜻하고 연한 크림색 배경 */
color: #5d4037; /* 가독성을 위한 부드러운 브라운 */
}
/* 12년 차의 팁: 구형 브라우저 블록 요소 인식 방어 */
main {
display: block;
}
/* 스킵 네비게이션 디자인 (웹 접근성) */
.skip-nav {
position: absolute;
top: -50px; /* 평소에는 화면 위로 완벽히 숨김 */
left: 0;
background-color: #ffb74d; /* 눈에 띄는 파스텔 오렌지 */
color: #fff;
padding: 12px 24px;
z-index: 999;
text-decoration: none;
font-weight: bold;
transition: top 0.3s ease;
border-radius: 0 0 8px 0;
}
/* 키보드 Tab 키로 포커스가 갔을 때만 화면에 등장 */
.skip-nav:focus {
top: 0;
}
/* 헤더 및 푸터 디자인 (파스텔 퍼플) */
.pastel-header, .pastel-footer {
background-color: #f3e5f5;
color: #6a1b9a;
text-align: center;
padding: 20px;
}
/* 메인 영역 레이아웃 세팅 */
.pastel-main {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
min-height: 50vh; /* 본문이 짧아도 일정 높이 유지 */
}
/* 메인 내부의 콘텐츠 박스 디자인 (파스텔 블루) */
.content-box {
background-color: #e3f2fd;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.08); /* 부드러운 파란색 그림자 */
border-left: 6px solid #90caf9; /* 좌측 포인트 라인 */
}
.content-box h2 {
margin-top: 0;
color: #1565c0;
}
.content-box p {
line-height: 1.7;
font-size: 1.05rem;
margin-bottom: 0;
}
6. 마무리 요약
- <main> 태그는 페이지에서 가장 중요한 핵심 콘텐츠(메인 요리)를 담는 그릇이다!
- 한 HTML 문서 안에서는 화면에 보여지는 <main>이 오직 1개만 존재해야 한다!
- 고유 ID를 부여하여 시각장애인을 위한 '스킵 네비게이션'의 도착 지점으로 활용하자!
※ 본 콘텐츠의 일부 문장과 이미지는 생성형 AI를 활용하여 제작되었습니다.
'웹디자인 기초' 카테고리의 다른 글
| 웹 문서에 소리를 담는 방법, HTML <audio> 태그 사용법과 속성 총정리 (0) | 2026.05.08 |
|---|---|
| HTML <video> 태그, 모바일에서 자동 재생(autoplay)이 안 되는 이유는? (0) | 2026.05.06 |
| 웹사이트의 나침반, HTML <nav> 태그 사용법과 메뉴 예제 (0) | 2026.04.29 |
| HTML <section>과 <article> 태그, 도대체 언제 어떻게 구분해서 써야 할까요? (0) | 2026.04.27 |
| HTML <header>, <footer> 태그, <div>와 도대체 무슨 차이가 있을까요? (0) | 2026.04.24 |
