SubTitle (서브타이틀)

Va.SubTitle — Title 아래의 보조 제목 컴포넌트

Title 아래에 오는 보조/부제목을 표시하는 전용 컨테이너입니다. Va.Div를 상속받으며 va-sub-title 클래스가 부여되어 테마별 보조 제목 스타일(작은 폰트, 옅은 색상 등)이 자동 적용됩니다.

 

클래스 정보

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

기본 사용법

{
    tagName: 'subTitle',
    innerHTML: '2026년 3월 기준'
}

또는 코드로:

let subTitle = new Va.SubTitle({
    text: '(선택 사항)'
});
parent.append(subTitle);

Title과의 관계

Va.Title과 짝을 이루는 컴포넌트로, 일반적으로 Title 바로 아래에 배치됩니다:

컴포넌트역할시각적 특성

Va.Title	주 제목	큰 폰트, 굵은 두께, 진한 색
Va.SubTitle	보조 제목	작은 폰트, 옅은 색, 부가 설명용

폼/카드/패널에서 "메인 제목 + 부가 설명" 조합이 매우 흔한 패턴이며, 이 조합을 표준화한 것이 SubTitle의 존재 이유입니다.

속성

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-sub-title" tag-name="subTitle">
    <!-- containerElement에 text 또는 innerHTML -->
</div>

사용 시점 — 언제 쓰나

• Title 바로 아래 부가 설명 — 날짜, 기준, 상태, 카운트 등
• 폼 섹션의 안내 문구 — 필수 입력 안내, 형식 설명 등
• 카드 부제목 — 카테고리, 태그, 메타 정보
• 다이얼로그 제목 아래 설명 — 작업 상세 설명

사용하지 말아야 할 때

• 주 제목 → Va.Title
• 본문 텍스트 → Va.Div / Va.Section
• 필드 라벨 → Va.Label
• 에러/경고 메시지 → 별도 알림 컴포넌트나 Va.Validation
• H1~H6 계층 → Va.H2 ~ Va.H6

자주 쓰는 조합 예시

Title + SubTitle 기본 조합

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

카드 UI에서 카테고리 표시

{
    tagName: 'div',
    style: { padding: '20px', border: '1px solid var(--colorNeutralStroke)' },
    tags: [
        { tagName: 'subTitle', innerHTML: '공지사항' },
        { tagName: 'title', innerHTML: '시스템 점검 안내' },
        { tagName: 'div', innerHTML: '본문 내용...' }
    ]
}

폼 섹션 안내

{
    tagName: 'section',
    tags: [
        { tagName: 'title', innerHTML: '기본 정보' },
        { tagName: 'subTitle', innerHTML: '* 표시는 필수 입력 항목입니다.' },
        { tagName: 'inputField', label: '이름 *' },
        { tagName: 'inputField', label: '이메일 *' }
    ]
}

HTML 마크업 혼합

{
    tagName: 'subTitle',
    innerHTML: '기준일: <strong>2026-03-15</strong> (마지막 업데이트)'
}

커스텀 스타일

{
    tagName: 'subTitle',
    innerHTML: '진행중',
    style: {
        color: 'var(--colorPrimary)',
        fontWeight: 'bold'
    }
}

실전 예시 — 대시보드 카드

config(){
    return {
        tagName: 'div',
        layout: 'ds-flex fd-row gap-m',
        tags: [{
            tagName: 'div',
            style: {
                flex: 1,
                padding: '20px',
                border: '1px solid var(--colorNeutralStroke)',
                borderRadius: 'var(--sizeRadiusM)'
            },
            tags: [
                { tagName: 'subTitle', innerHTML: '오늘의 매출' },
                { tagName: 'title', innerHTML: '₩ 12,345,000' },
                { tagName: 'subTitle', innerHTML: '전일 대비 +8.5%', style: { color: 'green' } }
            ]
        },{
            tagName: 'div',
            style: {
                flex: 1,
                padding: '20px',
                border: '1px solid var(--colorNeutralStroke)',
                borderRadius: 'var(--sizeRadiusM)'
            },
            tags: [
                { tagName: 'subTitle', innerHTML: '주문 건수' },
                { tagName: 'title', innerHTML: '234' },
                { tagName: 'subTitle', innerHTML: '전일 대비 -2건', style: { color: 'red' } }
            ]
        }]
    };
}

주의사항

• 아이콘 지원 없음 — icon 속성을 넘겨도 렌더링되지 않음. 아이콘 붙이려면 innerHTML에 <i class="ico_..."> 직접 삽입
• 위치 자유 — Title 위/아래 어디든 놓을 수 있음. 카드 UI에서는 "카테고리 위 → 제목 아래" 순서도 흔함
• 본문 대체 금지 — 짧은 부가 텍스트용이지 본문용이 아님. 긴 텍스트는 Va.Div 또는 Va.Section
• 테마 대응 — 폰트 크기·색상은 테마 CSS 변수로 자동 조정 (Light/Dark 등에서 자동으로 옅은 색 처리)
• Va.Div 상속 — Div의 gridHeader/gridBody 등 모든 속성 사용 가능

대안 비교

상황추천

주 제목	Va.Title
주 제목의 부가 설명	Va.SubTitle
문서 헤딩 계층	Va.H1 ~ Va.H6
필드 라벨	Va.Label
안내/에러 메시지	Va.Validation
페이지 머리말 영역	Va.Header
단순 텍스트	Va.Div / Va.Span

참고

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