컴포넌트/해딩

H1~H6 (해딩1~6)

VanillaFront 2026. 9. 18. 18:58

H1에 대해서 설명합니다.

 

Va.H1 — HTML5 <h1> 최상위 제목 컴포넌트

페이지나 섹션의 가장 큰 제목을 표시하는 헤딩 컴포넌트입니다. HTML5 <h1> 태그로 렌더링되며, 문서의 정보 계층 구조에서 최상위 레벨을 나타냅니다.

 

클래스 정보

Va.H1 extends Va.Component
tagName: 'h1'
isContainer: true

Va.Semantic이 아닌 Va.Component를 직접 상속한다는 점에 주의 (Header/Footer/Article 등 시맨틱 컨테이너와 다른 계보).

기본 사용법

{
    tagName: 'h1',
    innerHTML: 'VanillaFront 시작하기'
}

또는 코드로:

let h1 = new Va.H1({
    text: '오늘의 이야기'
});
parent.append(h1);

HTML5 <h1>의 의미

<h1>은 HTML5의 최상위 헤딩 태그로, 문서·섹션의 가장 중요한 제목을 나타냅니다.

  • 한 페이지에 원칙적으로 하나 (전통적 SEO 관례) — 다만 HTML5 스펙상 <section>/<article> 안에서는 각 섹션마다 하나씩 두는 것도 허용
  • 검색엔진, 스크린 리더가 문서 구조 파악에 핵심적으로 참조
  • 브라우저 기본 스타일: 매우 큰 폰트 + 굵은 두께 + 위아래 여백

헤딩 계열 위치

컴포넌트태그용도

Va.H1 <h1> 최상위 제목 (페이지/섹션 타이틀)
Va.H2 <h2> 큰 소제목
Va.H3 <h3> 중간 소제목
Va.H4 <h4> 작은 소제목
Va.H5 <h5> 더 작은 소제목
Va.H6 <h6> 가장 작은 소제목

속성

속성타입설명

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

text와 innerHTML을 동시에 지정하면 text가 우선합니다.

이벤트

이벤트발생 시점콜백 인자

click 클릭 시 (sender, element, evt)
contextmenu 우클릭 시 (sender, element, evt)

Header/Footer와 달리 이벤트가 명시적으로 정의되어 있어 헤딩 클릭에도 반응할 수 있습니다.

메서드

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

내부 구조

<h1 class="va-h1">
    <!-- text 또는 innerHTML이 들어감 -->
</h1>

사용 시점 — 언제 쓰나

  • 페이지의 대표 제목 — 튜토리얼/문서 페이지 상단
  • 섹션의 주요 제목 — 게시글(Article) 안 대표 타이틀
  • 랜딩 페이지 히어로 문구 — 브랜드 슬로건 등

사용하지 말아야 할 때

  • 여러 개 남발 — SEO/접근성 관점에서 한 페이지 1개 원칙 존중 권장
  • 단순히 큰 글자가 필요할 때 → div + style: { fontSize: '...' }
  • 버튼처럼 강조된 액션 UI → Va.Button

자주 쓰는 조합 예시

페이지 상단 제목

{
    tagName: 'page',
    tags: [{
        tagName: 'article',
        tags: [
            { tagName: 'h1', innerHTML: 'VanillaFront 튜토리얼' },
            { tagName: 'section', innerHTML: '<p>본문...</p>' }
        ]
    }]
}

클릭 이벤트 사용

{
    tagName: 'h1',
    innerHTML: '📌 접기/펼치기 가능한 제목',
    style: { cursor: 'pointer' },
    onClick: 'onClickTitle'
}

// View 안:
onClickTitle(sender){
    console.log('제목 클릭');
}

Header 안에서 로고+타이틀 조합

{
    tagName: 'header',
    layout: 'ds-flex fd-row ai-center gap-m',
    tags: [
        { tagName: 'img', attributes: { src: './logo.png' }, style: { height: '32px' } },
        { tagName: 'h1', innerHTML: 'VanillaFront' }
    ]
}

HTML 태그 혼합

{
    tagName: 'h1',
    innerHTML: '오늘의 <em>특별</em> 소식'
}

실전 예시 — 튜토리얼 페이지 시작

config(){
    return {
        tagName: 'article',
        layout: 'ds-flex fd-column ai-stretch gap-m',
        style: { maxWidth: '1000px', marginRight: 'auto' },
        tags: [{
            tagName: 'h1',
            innerHTML: 'VanillaFront 기본개념',
            style: {
                color: 'var(--colorForeground)',
                borderBottom: '2px solid var(--colorPrimary)',
                paddingBottom: 'var(--sizeSpacingS)'
            }
        },{
            tagName: 'section',
            innerHTML: '<p>본문 내용...</p>'
        }]
    };
}

주의사항

  • Va.Semantic이 아니라 Va.Component 상속 — 헤딩 컴포넌트는 시맨틱 계열과 별개 계보
  • text vs innerHTML — 텍스트에 HTML 마크업을 넣고 싶으면 innerHTML 사용. XSS 방지를 위해 내부적으로 Va._sanitize()가 적용됨
  • 한 페이지에 여러 개 넣을 때는 신중히 — 시맨틱적으로 의도가 있어야 함 (예: 각 <article> 안의 대표 타이틀)
  • 스타일은 CSS 변수로 — var(--sizeFontH1) 등의 테마 변수 존재 (테마별로 자동 조정됨)
  • layout 속성 사용 시 — H1은 isContainer: true라 자식을 담을 수도 있으나 시맨틱 관점에서 권장되지 않음

대안 비교

상황추천

페이지/문서 최상위 제목 Va.H1
섹션 대표 제목 Va.H2
하위 제목들 Va.H3 ~ Va.H6
단순 큰 글씨 (제목 아님) div + fontSize 스타일
라벨성 짧은 텍스트 Va.Label

참고