Title (타이틀)

Va.Title — 페이지·섹션의 표준 타이틀 컴포넌트

화면이나 섹션의 대표 제목을 표시하는 전용 타이틀 컨테이너입니다. Va.Div를 상속받으며 va-title 클래스가 부여되어 테마별 타이틀 전용 스타일(폰트 크기, 두께, 여백 등)이 자동 적용됩니다.

클래스 정보

Va.Title extends Va.Div extends Va.Component
tagName: 'title' (실제 렌더링은 <div>)
isContainer: true

기본 사용법

{
    tagName: 'title',
    innerHTML: '사용자 관리'
}

또는 코드로:

let title = new Va.Title({
    text: '오늘의 리포트'
});
parent.append(title);

H1 / Header와 다른 점

시맨틱 태그와의 차이점은 다음과 같습니다:

컴포넌트렌더링 태그시맨틱 의미용도

Va.H1	<h1>	HTML5 헤딩 (문서 최상위 제목)	SEO/접근성 중요한 실제 문서 제목
Va.Header	<header>	HTML5 머리말 영역	로고+메뉴+액션 등을 담는 상자
Va.Title	<div class="va-title">	UI 스타일링용 타이틀	폼/패널/카드 등 UI 블록의 시각적 제목

즉 Va.Title은 B2B UI에서 "이 영역은 타이틀입니다"라는 시각적 표시를 하기 위한 컴포넌트로, HTML 시맨틱 계층과는 독립적입니다.

속성

Va.Div로부터 상속받는 모든 속성 + 명시적 노출:

속성타입설명

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

text와 innerHTML 동시 지정 시 text가 우선합니다.

이벤트

Va.Div로부터 상속:

• click — 클릭 시
• contextmenu — 우클릭 시

메서드

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

내부 구조

<div class="va-title" tag-name="title">
    <!-- containerElement에 text 또는 innerHTML -->
</div>

사용 시점 — 언제 쓰나

• 폼 상단 제목 — "회원 정보 입력" 같은 시각적 제목
• 카드 상단 제목 — 카드 내부 대표 텍스트
• 패널 헤더 텍스트 — Panel의 title 옵션 대신 별도로 배치할 때
• 모달 다이얼로그 제목 — Dialog 안의 헤더 텍스트

사용하지 말아야 할 때

• 문서 최상위 제목 (SEO 중요) → Va.H1
• 페이지 머리말 영역 (로고+메뉴 조합) → Va.Header
• 소제목 → Va.SubTitle
• 필드 라벨 → Va.Label
• 툴바 안의 액션 그룹 → Va.ActionBar

자주 쓰는 조합 예시

폼 제목 + 필드들

{
    tagName: 'section',
    layout: 'ds-flex fd-column gap-m',
    tags: [
        { tagName: 'title', innerHTML: '회원 정보' },
        { tagName: 'inputField', label: '이름' },
        { tagName: 'inputField', label: '이메일' }
    ]
}

Title + SubTitle 조합

{
    tagName: 'section',
    tags: [
        { tagName: 'title', innerHTML: '월간 리포트' },
        { tagName: 'subTitle', innerHTML: '2026년 3월' }
    ]
}

TitleBar와 함께 — 제목 + 액션 버튼

{
    tagName: 'titleBar',
    title: '사용자 목록',
    tags: [
        { tagName: 'button', text: 'Edit', icon: 'ico_pen_fill' },
        { tagName: 'button', text: 'Save', appearance: 'primary', icon: 'ico_checkmark' }
    ]
}

커스텀 스타일

{
    tagName: 'title',
    innerHTML: '중요 공지',
    style: {
        color: 'var(--colorPrimary)',
        borderLeft: '4px solid var(--colorPrimary)',
        paddingLeft: '10px'
    }
}

HTML 마크업 혼합

{
    tagName: 'title',
    innerHTML: '오늘의 <em>특별</em> 소식 <span style="color:red">(NEW)</span>'
}

실전 예시 — 카드 UI

config(){
    return {
        tagName: 'div',
        style: {
            padding: '20px',
            border: '1px solid var(--colorNeutralStroke)',
            borderRadius: 'var(--sizeRadiusM)',
            background: 'var(--colorNeutralBackground)'
        },
        tags: [
            { tagName: 'title', innerHTML: '오늘의 매출' },
            { tagName: 'subTitle', innerHTML: '2026-03-15 기준' },
            {
                tagName: 'div',
                style: { fontSize: '2em', fontWeight: 'bold', margin: '10px 0' },
                text: '₩ 12,345,000'
            },
            {
                tagName: 'actionBar',
                layout: 'ds-flex fd-row gap-s',
                tags: [
                    { tagName: 'button', text: '상세 보기', appearance: 'primary' }
                ]
            }
        ]
    };
}

주의사항

• <title> HTML 태그와 혼동 금지 — 실제 렌더링은 <div class="va-title">이고, HTML의 브라우저 탭 제목용 <title>과는 무관
• SEO/접근성이 필요하면 H1~H6 병행 — Va.Title은 시각적 스타일 목적이므로 검색엔진이 문서 구조로 인식하지 않음. 실제 문서 제목은 Va.H1과 함께 사용
• 아이콘 지원 없음 — icon 속성을 넘겨도 렌더링되지 않음 (버튼과 다름). 아이콘 붙이려면 innerHTML에 <i class="ico_..."> 직접 삽입
• Va.Div 상속 — Div의 gridHeader/gridBody 등 모든 속성 사용 가능
• 테마 대응 — 폰트 크기·두께는 테마 CSS 변수(var(--sizeFontTitle) 등)로 자동 조정

대안 비교

상황추천

UI 블록의 시각적 제목	Va.Title
문서 최상위 제목 (SEO)	Va.H1
페이지 상단 머리말 영역	Va.Header
소제목	Va.SubTitle
제목 + 액션 버튼 세트	Va.TitleBar
필드 라벨	Va.Label
단순 텍스트	Va.Div / Va.Span

참고

• API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apititle
• 연관: Va.Div(부모), Va.SubTitle(짝을 이루는 하위 제목)