Section (섹션)

VanillaFront 2026. 9. 16. 18:07

Va.Section — HTML <section> 시맨틱 컨테이너

HTML5의 <section> 태그를 감싸는 시맨틱 컨테이너. 주제별로 구분된 문서 섹션을 나타내는 요소입니다. Va.Article과 자주 헷갈리지만, "독립 콘텐츠"가 아니라 "주제별 그룹핑" 이라는 게 결정적 차이. 데모·문서 페이지에서 하위 섹션을 나눌 때 관행처럼 사용됩니다.

클래스: Va.Section — va_component.js:21376
short name: section
상속: Va.Semantic (Article·Main과 같은 부모)
DOM 태그: <section>
isContainer: true
베이스 CSS: va-section

1. 기본 사용

{
    tagName: 'section',
    layout: 'ds-flex fd-column gap-m',
    tags: [
        { tagName: 'h2', innerHTML: '검색 조건' },
        { tagName: 'inputField', label: '이름' },
        { tagName: 'button', text: '조회' }
    ]
}

HTML <section> 태그로 렌더링
자식을 자유롭게 담음
스크린리더가 "섹션 시작"으로 인식 (제목이 있으면)

2. <section> HTML 표준의 의미

HTML5 표준상 <section>은 "주제(theme)를 공유하는 콘텐츠 그룹" 입니다. 판단 기준:

제목(h1~h6)이 어울리는가? — 논리적 섹션이면 O
문서 목차에 들어갈 만한 단위인가? — O
부모의 하위 주제인가? — O

Article과 구분:

Article — 독립적, 그 자체로 완결 (RSS 가능)
Section — 문서 안 주제 그룹, 부모 문맥에 의존

3. Semantic 계열에서의 위치

컴포넌트시맨틱 의미

Va.Main	페이지 주요 콘텐츠 (한 페이지 하나)
Va.Article	독립 배포 가능 콘텐츠
Va.Section	주제별 문서 섹션
Va.Aside	부수적 콘텐츠
Va.Nav	네비게이션
Va.Header / Va.Footer	헤더/푸터

4. Va.Section의 특징

Va.Semantic을 상속한 얇은 확장. 자체 로직은 거의 없고 <section> HTML 태그로 렌더링 + va-section CSS 클래스가 핵심.

항목Va.DivVa.Section

HTML 태그	<div>	<section>
시맨틱 의미	없음	주제별 그룹
접근성	기본	랜드마크 (제목 있으면)
SEO	기본	크롤러가 섹션으로 인식
한 페이지 여러 개	자유	자유
중첩	자유	자유 (섹션 안 서브섹션 등)

한 줄 요약: "문서 안 주제별 섹션 컨테이너 — Article과 달리 부모 문맥에 의존."

5. 주요 속성

Semantic 상속만. 자체 추가 없음:

속성설명

innerHTML	HTML 콘텐츠 (_sanitize 적용)
text	순수 텍스트
layout	Flex/Grid 레이아웃
style / mobileStyle	스타일
class / addClass	CSS 클래스
mediaQuery	반응형

Component 표준 속성 그대로.

6. 이벤트 (Semantic 상속)

이벤트시그니처발생 시점

click	(component, element, evt)	클릭
contextmenu	(component, element, evt)	우클릭 (기본 컨텍스트 메뉴 자동 차단)
focus / blur	(component, element, evt)	포커스 진입/이탈

7. 메서드

메서드설명

setText(text)	텍스트 변경
setInnerHTML(html)	HTML 콘텐츠 변경

8. 내부 구조

<section elname="element" class="va-section [layout classes]"
         tag-name="section">
  <!-- 자식 컴포넌트들 -->
</section>

매우 단순. HTML <section> 태그 + va-section 클래스.

9. VanillaFront에서의 관행

데모/문서 파일에서 하위 섹션 나누기용으로 관행처럼 사용:

config() {
    return {
        tagName: 'article',                  // 최상위는 article
        tags: [{
            tagName: 'section',              // 하위 섹션들을 section으로
            layout: 'ds-flex fd-column gap-m',
            tags: [
                { tagName: 'h3', innerHTML: '섹션 제목' },
                /* ... */
            ]
        }]
    };
}

계층 구조: article (전체 데모) → section (하위 예제 그룹) → 실제 컴포넌트들.

⚠️ 실무 화면에서는 page > panel이 VanillaFront 표준이므로 (CLAUDE.md 3장), Section은 주로 데모 페이지 관행 + HTML 시맨틱이 필요한 상황에서 사용.

10. 언제 쓰나

Va.Section이 맞을 때

문서/데모 안 주제별 섹션 나누기
폼의 논리적 그룹 ("기본 정보 섹션", "결제 정보 섹션")
랜딩 페이지의 각 영역 ("소개", "기능", "가격")
접근성/SEO 시맨틱 강조
제목(h1~h6)과 함께 논리적 그룹 표현

다른 걸 쓸 때

독립 콘텐츠 (블로그 글 등) → Va.Article
페이지 주요 콘텐츠 랜드마크 → Va.Main
실무 폼 최상위 → Va.Page
실무 섹션 컨테이너 → Va.Panel
단순 컨테이너 → Va.Div
부수 콘텐츠 → Va.Aside

11. Section vs Panel vs Article — VanillaFront에서 흔한 혼동

컴포넌트HTML언제 쓰나

section	<section> HTML 표준	데모/문서 하위 그룹, 시맨틱 우선
panel	<panel> (커스텀)	VanillaFront 실무 화면 표준 — 자체 gap 있음
article	<article> HTML 표준	독립 콘텐츠, 데모 최상위

실무 원칙:

폼·업무 화면 — page + panel
데모·문서 페이지 — article + section
블로그·상품 — article

12. 흔한 조합 예시

// 데모 페이지 하위 섹션 (VanillaFront 관행)
{
    tagName: 'article',
    tags: [{
        tagName: 'section',
        layout: 'ds-flex fd-column gap-m',
        tags: [
            { tagName: 'h3', innerHTML: '기본 사용' },
            { tagName: 'button', text: '테스트' }
        ]
    },{
        tagName: 'section',
        layout: 'ds-flex fd-column gap-m',
        tags: [
            { tagName: 'h3', innerHTML: '고급 옵션' },
            /* ... */
        ]
    }]
}

// 폼의 논리 그룹
{
    tagName: 'div',
    tags: [
        {
            tagName: 'section',
            layout: 'ds-flex fd-column gap-s',
            tags: [
                { tagName: 'h2', innerHTML: '기본 정보' },
                { tagName: 'inputField', label: '이름' },
                { tagName: 'inputField', label: '이메일' }
            ]
        },
        {
            tagName: 'section',
            layout: 'ds-flex fd-column gap-s',
            tags: [
                { tagName: 'h2', innerHTML: '결제 정보' },
                { tagName: 'inputField', label: '카드번호' }
            ]
        }
    ]
}

// 랜딩 페이지의 각 영역
{
    tagName: 'main',
    tags: [
        {
            tagName: 'section',
            style: { padding: '80px 20px' },
            tags: [
                { tagName: 'h1', innerHTML: 'VanillaFront' },
                { tagName: 'p',  innerHTML: '순수 자바스크립트 UI 프레임워크' }
            ]
        },
        {
            tagName: 'section',
            style: { padding: '80px 20px', background: '#f5f5f5' },
            tags: [
                { tagName: 'h2', innerHTML: '주요 기능' },
                /* 기능 카드들 */
            ]
        },
        {
            tagName: 'section',
            style: { padding: '80px 20px' },
            tags: [
                { tagName: 'h2', innerHTML: '가격' },
                /* 가격표 */
            ]
        }
    ]
}

13. 실전 예 — 문서 페이지 구조

class ApiButton extends Va.View {
    config() {
        return {
            tagName: 'article',              // 문서 전체 (독립 콘텐츠)
            layout: 'ds-flex fd-column ai-stretch gap-m',
            style: { maxWidth: '1000px' },
            tags: [
                { tagName: 'h1', innerHTML: 'Va.Button' },

                // 섹션 1: 개요
                {
                    tagName: 'section',
                    layout: 'ds-flex fd-column gap-s',
                    tags: [
                        { tagName: 'h2', innerHTML: '개요' },
                        { tagName: 'p',  innerHTML: '기본 버튼 컴포넌트...' }
                    ]
                },

                // 섹션 2: 속성
                {
                    tagName: 'section',
                    layout: 'ds-flex fd-column gap-s',
                    tags: [
                        { tagName: 'h2', innerHTML: '속성' },
                        /* 속성 표 */
                    ]
                },

                // 섹션 3: 예제
                {
                    tagName: 'section',
                    layout: 'ds-flex fd-column gap-s',
                    tags: [
                        { tagName: 'h2', innerHTML: '예제' },
                        { tagName: '/view/demo/buttons/DemoButtons' }
                    ]
                }
            ]
        };
    }
}

시맨틱 계층:

<article> — 문서 전체 (독립적, 재배포 가능한 API 문서)
<section> × 3 — 개요 / 속성 / 예제 (문서 안 하위 주제)

각 section이 자체 제목(<h2>)을 가져 논리적 구조가 명확.

14. 알아두면 좋을 주의사항

Section vs Article 판단 — "독립 배포 가능한가?" — 그렇지 않으면 section.
제목 있으면 시맨틱 의미 — <h1>~<h6> 없이 그냥 section만 쓰면 시맨틱 이득 없음. 랜드마크가 되려면 제목 필수.
section을 만능 div로 오용 주의 — 시맨틱 없이 그냥 컨테이너로만 쓸 거면 div가 더 적절.
중첩 자유 — Section 안 Section 가능. 문서 계층 표현.
contextmenu 자동 preventDefault — 우클릭 시 브라우저 메뉴 차단.
자체 스타일 최소 — va-section 클래스만. gap·padding은 layout·style로 명시.
VanillaFront 관행: 데모는 article > section — 실무는 page > panel.
접근성 랜드마크 — 스크린리더는 제목이 있는 section을 랜드마크로 인식.
text/innerHTML은 자식 tags와 배타적 — 대개 자식으로 구조화.
커스텀 <section> 태그 — HTML5 표준이라 모든 최신 브라우저 지원.

15. section vs panel vs article vs div 선택

상황추천

데모/문서 하위 그룹	section (VanillaFront 관행)
실무 폼/화면 섹션	panel (VanillaFront 표준)
독립 콘텐츠 (블로그·상품)	article
랜딩 페이지 각 영역	section
폼 논리 그룹 (제목 있음)	section
단순 컨테이너 (시맨틱 무관)	div

"주제별로 나누고 제목이 있으면 section, 실무 화면 UI 그룹이면 panel".

참고

API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apisection
연관: Va.Semantic(부모), Va.Article(가장 자주 비교되는 형제)