Va.Main — HTML <main> 시맨틱 컨테이너
HTML5의 <main> 태그를 감싸는 시맨틱 컨테이너 컴포넌트. 한 페이지의 주요 콘텐츠를 나타내는 접근성·SEO용 랜드마크 요소입니다. Va.Section, Va.Article, Va.Header, Va.Footer 등과 같은 Semantic 계열의 형제.
- 클래스: Va.Main — va_component.js:21939
- short name: main
- 상속: Va.Semantic (Section·Article과 같은 부모)
- DOM 태그: <main>
- isContainer: true
- 베이스 CSS: va-main
1. 기본 사용
{
tagName: 'main',
layout: 'ds-flex fd-column gap-m',
tags: [
{ tagName: 'h1', innerHTML: '주요 콘텐츠' },
{ tagName: 'p', innerHTML: '본문 내용...' }
]
}
- HTML <main> 태그로 렌더링
- 안에 다른 컴포넌트를 자유롭게 담음
- 스크린리더가 "메인 콘텐츠 영역"으로 인식
2. Semantic 계열 소개
Va.Main은 HTML5 시맨틱 태그 전용 컴포넌트 계열의 하나입니다. 모두 같은 부모 클래스 Va.Semantic을 상속하고 태그명만 다릅니다.
컴포넌트HTML 태그시맨틱 의미
| Va.Main | <main> | 페이지의 주요 콘텐츠 (한 페이지에 하나) |
| Va.Section | <section> | 주제별 콘텐츠 섹션 |
| Va.Article | <article> | 독립적으로 배포 가능한 콘텐츠 |
| Va.Aside | <aside> | 부수적 콘텐츠 (사이드바 등) |
| Va.Nav | <nav> | 네비게이션 영역 |
| Va.Header | <header> | 헤더 |
| Va.Footer | <footer> | 푸터 |
| Va.Page | <page> (커스텀) | VanillaFront 페이지 컨테이너 |
| Va.Panel | <panel> (커스텀) | VanillaFront 섹션 컨테이너 |
| Va.Details / Va.Summary | <details> / <summary> | 접기/펼치기 |
| Va.Figure | <figure> | 이미지·도표 |
모두 최소 코드로 정의되어 있고 대부분 HTML 태그명 + 시맨틱 클래스 부여만 담당.
3. Va.Main의 특징
Va.Semantic의 얇은 확장. 자체 로직은 거의 없고, <main>이라는 HTML 태그로 렌더링하는 것과 CSS 클래스 va-main을 붙이는 것이 핵심입니다.
항목Va.DivVa.Main
| HTML 태그 | <div> | <main> |
| 시맨틱 의미 | 없음 | 주요 콘텐츠 (랜드마크) |
| 접근성 | 기본 | 스크린리더 랜드마크 자동 인식 |
| SEO | 기본 | 크롤러가 주요 콘텐츠로 인식 |
| 한 페이지 여러 개 | 자유 | HTML 표준상 하나만 권장 |
한 줄 요약: "페이지의 주요 콘텐츠를 시맨틱하게 표현하는 컨테이너."
4. 주요 속성
Semantic 상속만 있고 자체 추가 없음:
속성설명
| innerHTML | HTML 콘텐츠 (_sanitize 적용) |
| text | 순수 텍스트 |
| layout | Flex/Grid 레이아웃 |
| style / mobileStyle | 스타일 |
| class / addClass | CSS 클래스 |
| mediaQuery | 반응형 |
Component가 지원하는 모든 표준 속성 그대로.
5. 이벤트 (Semantic 상속)
이벤트시그니처발생 시점
| click | (component, element, evt) | 클릭 |
| contextmenu | (component, element, evt) | 우클릭 (기본 컨텍스트 메뉴 자동 차단) |
| focus / blur | (component, element, evt) | 포커스 진입/이탈 |
6. 메서드
메서드설명
| setText(text) | 텍스트 변경 |
| setInnerHTML(html) | HTML 콘텐츠 변경 |
Component의 기본 메서드 그대로.
7. 내부 구조
<main elname="element" class="va-main [layout classes]" tag-name="main">
<!-- 자식 컴포넌트들 -->
</main>
핵심: 그냥 HTML <main> 태그 + CSS 클래스. 매우 단순.
8. 언제 쓰나
Va.Main이 맞을 때
- 페이지의 주요 콘텐츠 영역 감싸기
- 접근성이 중요한 페이지 (스크린리더 랜드마크)
- SEO 최적화 (크롤러가 주요 콘텐츠 인식)
- 표준 HTML 구조를 지키고 싶을 때
다른 걸 쓸 때
- VanillaFront 표준 페이지 구조 → Va.Page + Va.Panel (더 권장)
- 단순 컨테이너 (시맨틱 무관) → Va.Div
- 부수적 콘텐츠 → Va.Aside
- 헤더 / 푸터 → Va.Header / Va.Footer
- 콘텐츠 섹션 → Va.Section
- 독립 배포 가능한 콘텐츠 (블로그 글 등) → Va.Article
9. Va.Main vs Va.Page — VanillaFront의 관행
VanillaFront에는 **Va.Page**라는 커스텀 컨테이너가 있고, 프로젝트 관행상 화면 최상위는 page를 쓰는 게 표준입니다.
상황선택
| VanillaFront 표준 화면 | page + panel (관행) |
| HTML 시맨틱 우선 | main |
| 혼용 | main 안에 panel 배치 등 |
CLAUDE.md에도 "화면 표준 구조는 최상위 tagName:'page' + 섹션 분할 tagName:'panel'"로 명시되어 있습니다. page/panel은 자체 gap을 가져 여백이 자연스러운 반면, main은 그런 스타일이 자동 없음.
결론: 특별한 이유가 없으면 page를 최상위로. main은 접근성·시맨틱이 특히 중요한 상황에.
10. 흔한 조합 예시
// 기본
{
tagName: 'main',
layout: 'ds-flex fd-column gap-m',
tags: [
{ tagName: 'h1', innerHTML: '페이지 제목' },
{ tagName: 'p', innerHTML: '본문' }
]
}
// header + main + footer 표준 구조
{
tagName: 'div',
tags: [
{ tagName: 'header', innerHTML: '헤더' },
{
tagName: 'main',
layout: 'ds-flex fd-column gap-m',
tags: [ /* 주요 콘텐츠 */ ]
},
{ tagName: 'footer', innerHTML: '푸터' }
]
}
// aside(사이드바) + main 레이아웃
{
tagName: 'div',
layout: 'ds-flex fd-row',
tags: [
{
tagName: 'aside',
style: { width: '250px' },
tags: [ /* 사이드 메뉴 */ ]
},
{
tagName: 'main',
style: { flex: 1 },
tags: [ /* 주요 콘텐츠 */ ]
}
]
}
// main 안에 page 구조 (혼합)
{
tagName: 'main',
tags: [
{
tagName: 'page',
tags: [{
tagName: 'panel',
tags: [ /* ... */ ]
}]
}
]
}
11. 실전 예 — 접근성 우선 페이지 구조
class Article extends Va.View {
config() {
return {
tagName: 'div',
layout: 'ds-flex fd-column',
style: { minHeight: '100vh' },
tags: [
// 헤더 (랜드마크)
{
tagName: 'header',
tags: [
{
tagName: 'nav',
tags: [ /* 네비게이션 */ ]
}
]
},
// 주요 콘텐츠 (랜드마크)
{
tagName: 'main',
layout: 'ds-flex fd-row',
style: { flex: 1 },
tags: [
// 본문
{
tagName: 'article',
style: { flex: 1, padding: '20px' },
tags: [
{ tagName: 'h1', innerHTML: '기사 제목' },
{ tagName: 'p', innerHTML: '본문 내용...' }
]
},
// 부가 정보 (랜드마크)
{
tagName: 'aside',
style: { width: '300px', padding: '20px' },
tags: [
{ tagName: 'h2', innerHTML: '관련 글' },
{ tagName: 'ul', tags: [/* 링크들 */] }
]
}
]
},
// 푸터 (랜드마크)
{
tagName: 'footer',
tags: [
{ tagName: 'p', innerHTML: '© 2026 VanillaFront' }
]
}
]
};
}
}
핵심: <header>, <nav>, <main>, <article>, <aside>, <footer>가 모두 HTML5 표준 랜드마크로 인식되어 스크린리더가 정확히 안내.
12. 알아두면 좋을 주의사항
- 한 페이지에 <main>은 하나만 — HTML 표준. 여러 개 넣으면 접근성 도구에서 경고.
- Va.Page가 VanillaFront 관행 — 특별한 이유 없으면 page 사용. main은 접근성 필요 시.
- 자체 스타일 최소 — gap·padding 자동 없음. layout·style로 직접 지정.
- 이벤트 자동 제공 — click·contextmenu·focus·blur. Semantic 계열 공통.
- contextmenu 자동 preventDefault — 우클릭 시 브라우저 컨텍스트 메뉴 차단. 원치 않으면 오버라이드.
- text vs innerHTML — 자식 tags가 있으면 대개 무시. 순수 텍스트 담을 땐 사용.
- 접근성 랜드마크 — 스크린리더의 "메인 콘텐츠로 이동" 기능이 이걸 대상으로.
- SEO 크롤러가 인식 — 검색 엔진이 페이지의 주요 콘텐츠를 이걸로 판단.
- 커스텀 태그 (<main>) — HTML5 표준이라 모든 최신 브라우저 지원.
- 레이아웃 컨테이너로만 씀 — 값 관리 로직 없음.
13. main vs page vs div 선택
상황추천
| VanillaFront 표준 화면 | page (관행) |
| 접근성·SEO 우선 | main |
| 단순 컨테이너 | div |
| 사이드바 | aside |
| 헤더/푸터 | header / footer |
| 콘텐츠 섹션 | section / article |
"VanillaFront 관행 따르면 page, 표준 HTML 시맨틱이 중요하면 main".
참고
- API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apimain
- 연관: Va.Semantic(부모, 로직 대부분 제공), Va.Page(VanillaFront 관행 대체제)
'컴포넌트 > 시멘틱태그' 카테고리의 다른 글
| Article (아티클) (0) | 2026.09.14 |
|---|