Span (스팬)

Va.Span — 인라인 <span> 컨테이너

텍스트나 인라인 요소를 감싸는 가장 기본적인 인라인 컨테이너입니다. HTML <span> 태그로 렌더링되며, 문장 안에서 부분 스타일링이나 인라인 그루핑에 사용됩니다.

클래스 정보

Va.Span extends Va.Component
tagName: 'span'
isContainer: true
isEnableRoot: true

Va.Semantic이 아닌 Va.Component를 직접 상속하며, Va.Div와 비슷한 계보의 저수준 컨테이너입니다.

기본 사용법

{
    tagName: 'span',
    text: '인라인 텍스트'
}

HTML 태그와 함께:

{
    tagName: 'span',
    innerHTML: '이것은 <b>굵은</b> 텍스트'
}

코드로:

let span = new Va.Span({ text: 'Hello' });
parent.append(span);

HTML <span>의 의미

<span>은 의미 없는 인라인 컨테이너입니다. <div>가 블록 레벨인 것과 대비되며 다음과 같은 위치에 사용됩니다:

• 문장 중 일부 단어에만 스타일을 적용
• 아이콘 + 텍스트 조합처럼 인라인 요소 그루핑
• JS로 조작할 텍스트 부분 표시
• 시맨틱 태그(<em>, <strong>, <mark> 등)로 표현할 수 없는 인라인 요소

속성

속성타입설명

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

Va.Div와 달리 properties에 명시된 것은 innerHTML만 — text는 Va.Component 공통 속성으로부터 처리됩니다.

이벤트

이벤트발생 시점콜백 인자

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

메서드

• setInnerHTML(html) — HTML 변경 후 업데이트 (내부적으로 Va._sanitize() 통과)
• Va.Component 공통 메서드 (append, remove, addStyleClass 등)

setText는 별도 오버라이드가 없지만 text 속성 변경 후 update() 호출로 동작합니다.

내부 구조

<span class="va-span" tag-name="span">
    <!-- containerElement는 element 자신 -->
    <!-- text 또는 innerHTML이 여기에 -->
</span>

Div와의 차이 — 핵심 비교

항목Va.DivVa.Span

HTML 태그	<div>	<span>
display 기본값	block	inline
사용 목적	블록 그루핑, 레이아웃	인라인 그루핑, 부분 스타일
flex/grid 컨테이너	자연스러움	부적합 (inline은 flex 자식)
문장 안에 사용	줄바꿈 발생	흐름 유지
gridHeader/gridBody 속성	있음	없음

사용 시점 — 언제 쓰나

• 텍스트 일부에만 색상/두께 강조 — 문장 흐름 안에서 부분 스타일링
• 아이콘 + 텍스트 인라인 조합 — <i class="ico_..."> 와 함께
• 뱃지/태그 표시 — 카운트, 상태 표시
• 동적으로 바뀌는 인라인 값 — 통화, 개수, 시간 등

사용하지 말아야 할 때

• 블록 레벨 컨테이너 → Va.Div
• 강조 의미 표현 → <em> (기울임) 또는 <strong> (중요)
• 하이라이트/형광펜 → <mark>
• 삭제선/변경 표시 → <del> / <ins>
• 버튼 역할 → Va.Button

의미가 있는 인라인 마크업은 시맨틱 태그를, 순수 스타일 목적이면 Va.Span을.

자주 쓰는 조합 예시

아이콘 + 텍스트 라벨

{
    tagName: 'span',
    layout: 'ds-flex fd-row ai-center gap-xs',
    tags: [
        { tagName: 'i', class: 'ico_check' },
        { tagName: 'span', text: '완료' }
    ]
}

뱃지/카운트 표시

{
    tagName: 'div',
    innerHTML: '알림 <span style="color:red;font-weight:bold">3</span>건'
}

부분 강조

{
    tagName: 'div',
    tags: [
        { tagName: 'span', text: '남은 시간: ' },
        {
            tagName: 'span',
            text: '5분',
            style: { color: 'var(--colorDanger)', fontWeight: 'bold' }
        }
    ]
}

동적으로 업데이트되는 값

config(){
    return {
        tagName: 'div',
        tags: [
            { tagName: 'span', text: '현재 값: ' },
            { ref: 'refValue', tagName: 'span', text: '0' }
        ]
    };
}
onUpdate(newValue){
    this.getRef('refValue').text = newValue;
    this.getRef('refValue').update();
}

실전 예시 — 상태 배지 스타일

{
    tagName: 'span',
    text: '진행중',
    style: {
        display: 'inline-block',
        padding: '2px 8px',
        borderRadius: '10px',
        background: 'var(--colorPrimaryBackground)',
        color: 'var(--colorPrimaryForeground)',
        fontSize: 'var(--sizeFontS)'
    }
}

주의사항

• 인라인이라 크기 지정 제한 — width/height는 display: inline-block으로 바꿔야 적용됨
• flex/grid 컨테이너로는 부적합 — 자식으로 넣는 건 OK, 자기 자신을 flex/grid 컨테이너로 쓸 땐 display 변경 필요
• innerHTML은 Va._sanitize() 통과 — XSS 방지 이스케이프
• text와 innerHTML 동시 사용 시 text 우선
• 의미 있는 강조는 시맨틱 태그를 — <em>, <strong>, <mark>, <code> 등이 있으면 그 쪽을 우선 고려
• 남용 주의 (span soup) — Div soup과 마찬가지로 인라인이 스타일 상자로만 남용되면 문서 의미가 약해짐

대안 비교

상황추천

블록 그루핑 / 레이아웃	Va.Div
문장 내 부분 스타일 (의미 없음)	Va.Span
중요/강조 텍스트	<strong>
기울임 텍스트	<em>
형광펜 하이라이트	<mark>
코드 조각	<code>
텍스트 라벨 컴포넌트	Va.Label

참고

• API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apispan
• 연관: Va.Component(부모), Va.Div(블록 대응)