Main (메인)

VanillaFront 2026. 9. 14. 18:31

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 관행 대체제)