컴포넌트/시멘틱태그

Header (해더)

VanillaFront 2026. 9. 16. 18:21

Va.Header — HTML5 <header> 시맨틱 컴포넌트

페이지나 섹션의 머리말 영역(로고, 제목, 상단 내비게이션, 브랜딩 등)을 담는 시맨틱 컨테이너입니다. Va.Semantic을 상속받아 <header> 태그로 렌더링됩니다.

클래스 정보

Va.Header extends Va.Semantic extends Va.Component
tagName: 'header'
isContainer: true

기본 사용법

{
    tagName: 'header',
    tags: [{
        tagName: 'h1',
        innerHTML: 'VanillaFront'
    },{
        tagName: 'nav',
        tags: [ /* 상단 메뉴 */ ]
    }]
}

또는 코드로:

let header = new Va.Header({
    innerHTML: '<h1>VanillaFront</h1>'
});
parent.append(header);

HTML5 <header>의 의미

<header>는 HTML5 시맨틱 태그로, 상단 소개/도입부 콘텐츠를 감쌉니다. 사용 위치에 따라 의미가 달라집니다:

  • <body> 바로 아래 → 페이지 전체의 헤더 (사이트 로고/글로벌 내비)
  • <article> / <section> 안 → 해당 섹션의 헤더 (제목/작성자/작성일 등)

한 페이지 안에 여러 개의 <header>가 있을 수 있으며, 이는 문법상 정상입니다.

시맨틱 계열 위치

컴포넌트역할위치

Va.Page 페이지 최상위 컨테이너 최상단
Va.Header 머리말 영역 Page / Article / Section 상단
Va.Nav 내비게이션 Header 안 또는 독립
Va.Main 메인 콘텐츠 Page 중앙
Va.Aside 사이드 콘텐츠 Main 좌/우
Va.Footer 꼬리말 영역 Page / Article / Section 하단

속성

Va.Semantic으로부터 상속:

  • innerHTML — HTML 문자열
  • text — 순수 텍스트 (자동으로 이스케이프)
  • layout, style, class, hidden 등 공통 속성

이벤트

Va.Semantic으로부터 상속 (onClick, onMouseEnter 등 표준 DOM 이벤트).

메서드

  • setText(text) — 텍스트 설정 후 업데이트
  • setInnerHTML(html) — HTML 설정 후 업데이트
  • Va.Component / Va.Semantic 공통 메서드

내부 구조

<header class="va-header">
    <!-- containerElement에 자식 컴포넌트 또는 innerHTML 렌더링 -->
</header>

사용 시점 — 언제 쓰나

  • 페이지 상단의 로고 + 글로벌 내비 + 사용자 액션(로그인/설정 등) 영역
  • 게시글(<article>) 상단의 제목 + 작성자 + 작성일 블록
  • 카드/섹션 상단의 타이틀 바 + 액션 버튼 영역

사용하지 말아야 할 때

  • 단순 텍스트 강조 → <h1>~<h6> 사용
  • 내비게이션 자체가 목적이면 → Va.Nav 사용 (Header는 감싸는 상자 역할)
  • 페이지 어느 영역과도 관련 없는 부유 요소 → div 사용

자주 쓰는 조합 예시

페이지 헤더 (로고 + 내비)

{
    tagName: 'header',
    layout: 'ds-flex fd-row ai-center',
    tags: [{
        tagName: 'h1',
        innerHTML: 'VanillaFront'
    },{
        tagName: 'div',
        style: { flex: 1 }
    },{
        tagName: 'nav',
        tags: [
            { tagName: 'button', text: 'Home' },
            { tagName: 'button', text: 'Docs' },
            { tagName: 'button', text: 'Blog' }
        ]
    }]
}

게시글 헤더

{
    tagName: 'article',
    tags: [{
        tagName: 'header',
        tags: [
            { tagName: 'h1', innerHTML: '오늘의 이야기' },
            { tagName: 'div', text: '2026-09-16 · leebyeungok' }
        ]
    },{
        tagName: 'section',
        innerHTML: '본문 …'
    }]
}

실전 예시 — 페이지 상단 헤더

config(){
    return {
        tagName: 'page',
        tags: [{
            tagName: 'header',
            layout: 'ds-flex fd-row ai-center gap-m',
            style: { padding: '10px 20px', borderBottom: '1px solid var(--colorNeutralStroke)' },
            tags: [{
                tagName: 'img',
                attributes: { src: './assets/img/main/logo.png' },
                style: { height: '32px' }
            },{
                tagName: 'div',
                style: { flex: 1 }
            },{
                tagName: 'button',
                appearance: 'transparent',
                text: '로그인',
                onClick: 'onClickLogin'
            }]
        },{
            tagName: 'main',
            tags: [ /* 본문 */ ]
        }]
    };
}

주의사항

  • 한 페이지에 여러 개 OK — <body> 직계, 각 <article> 안 등 여러 위치에 놓을 수 있음
  • Va.Nav와 헷갈리지 말 것 — Header는 "상단 영역 상자", Nav는 "링크 목록". 보통 Header 안에 Nav가 들어감
  • 스타일은 CSS 변수로 — var(--colorNeutralStroke), var(--sizeSpacingM) 등 테마 변수 사용 권장

대안 비교

상황추천

페이지/섹션의 머리말 상자 Va.Header
페이지/섹션의 꼬리말 상자 Va.Footer
링크 목록 (내비게이션) Va.Nav
의미 없는 단순 그루핑 div

참고

'컴포넌트 > 시멘틱태그' 카테고리의 다른 글

Details (디테일스)  (0) 2026.09.16
Footer (푸터)  (0) 2026.09.16
Aside (어사이드)  (0) 2026.09.16
Section (섹션)  (0) 2026.09.16
Article (아티클)  (0) 2026.09.14

'컴포넌트/시멘틱태그'의 다른글

  • 현재글Header (해더)

관련글

티스토리툴바