컴포넌트/패널 외 영역 (Div, Span)

Title (타이틀)

VanillaFront 2026. 9. 18. 20:20

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

참고