VanillaFront

Va.Panel — Page의 짝을 이루는 섹션 컨테이너Page 안에서 화면을 논리적으로 분할하는 표준 섹션 컨테이너입니다. 내부적으로 태그로 렌더링되며, Va.Page > Va.Panel 구조는 VanillaFront 화면의 표준 스캐폴드입니다. 접기/펼치기, 드래그로 크기 조절, 리사이즈 감지 등 실무에서 자주 필요한 기능들을 내장합니다. 클래스 정보Va.Panel extends Va.Semantic extends Va.ComponenttagName: 'panel' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'page', tags: [{ tagName: 'panel', tags: [ { tagName: 'in..

Va.Page — View의 표준 최상위 컨테이너VanillaFront View의 루트로 사용되는 표준 페이지 컨테이너입니다. 내부적으로는 태그로 렌더링되지만 va-page 클래스로 페이지 전용 레이아웃/여백/스타일이 적용되며, Va.Panel과 짝을 이뤄 Page > Panel 구조로 화면을 구성하는 것이 VanillaFront의 표준입니다.클래스 정보Va.Page extends Va.Semantic extends Va.ComponenttagName: 'page' (실제 렌더링은 )isContainer: true기본 사용법{ tagName: 'page', tags: [{ tagName: 'panel', title: '섹션1', tags: [ /* 콘텐츠..

Va.Span — 인라인 컨테이너텍스트나 인라인 요소를 감싸는 가장 기본적인 인라인 컨테이너입니다. HTML 태그로 렌더링되며, 문장 안에서 부분 스타일링이나 인라인 그루핑에 사용됩니다.클래스 정보Va.Span extends Va.ComponenttagName: 'span'isContainer: trueisEnableRoot: trueVa.Semantic이 아닌 Va.Component를 직접 상속하며, Va.Div와 비슷한 계보의 저수준 컨테이너입니다.기본 사용법{ tagName: 'span', text: '인라인 텍스트'}HTML 태그와 함께:{ tagName: 'span', innerHTML: '이것은 굵은 텍스트'}코드로:let span = new Va.Span({ text..

Va.Div — 범용 컨테이너VanillaFront에서 가장 기본적이고 가장 많이 쓰이는 범용 컨테이너입니다. HTML 태그로 렌더링되며, 시맨틱적 의미 없이 자식 요소들을 그룹핑하거나 레이아웃을 구성하는 데 사용됩니다.클래스 정보Va.Div extends Va.ComponenttagName: 'div'isContainer: trueisEnableRoot: trueVa.Semantic이 아닌 Va.Component를 직접 상속하며, isEnableRoot: true로 라우터 영역의 루트가 될 수 있습니다.기본 사용법{ tagName: 'div', tags: [ { tagName: 'button', text: '확인' }, { tagName: 'button', tex..

H1에 대해서 설명합니다. Va.H1 — HTML5 최상위 제목 컴포넌트페이지나 섹션의 가장 큰 제목을 표시하는 헤딩 컴포넌트입니다. HTML5 태그로 렌더링되며, 문서의 정보 계층 구조에서 최상위 레벨을 나타냅니다. 클래스 정보Va.H1 extends Va.ComponenttagName: 'h1'isContainer: trueVa.Semantic이 아닌 Va.Component를 직접 상속한다는 점에 주의 (Header/Footer/Article 등 시맨틱 컨테이너와 다른 계보).기본 사용법{ tagName: 'h1', innerHTML: 'VanillaFront 시작하기'}또는 코드로:let h1 = new Va.H1({ text: '오늘의 이야기'});parent.append(h1..

Va.Summary — HTML5 시맨틱 컴포넌트 컨테이너의 항상 보이는 헤더(제목) 역할을 하는 시맨틱 컴포넌트입니다. Va.Semantic을 상속받아 태그로 렌더링됩니다. 사용자가 이 요소를 클릭하면 부모 가 접혔다 펼쳐집니다.클래스 정보Va.Summary extends Va.Semantic extends Va.ComponenttagName: 'summary'isContainer: true기본 사용법{ tagName: 'details', tags: [{ tagName: 'summary', innerHTML: '자세히 보기' },{ tagName: 'div', innerHTML: '펼쳐졌을 때 보이는 상세 내용' }]}또는 코드..

Va.Details — 접고 펼치는 HTML5 컴포넌트타이틀을 클릭하면 본문이 접혔다 펼쳐지는 아코디언형 시맨틱 컴포넌트입니다. HTML5 + 태그를 기반으로 하며, 열림/닫힘 아이콘과 커스텀 헤더 위치를 지원합니다.클래스 정보Va.Details extends Va.Semantic extends Va.ComponenttagName: 'details'isContainer: true기본 사용법{ tagName: 'details', title: '더 알아보기', open: false, tags: [{ tagName: 'div', innerHTML: '숨겨진 상세 내용이 여기에 표시됩니다.' }]}또는 코드로:let details = new Va.Deta..

Va.Footer — HTML5 시맨틱 컴포넌트페이지나 섹션의 꼬리말 영역(저작권, 회사 정보, 링크, 연락처 등)을 담는 시맨틱 컨테이너입니다. Va.Semantic을 상속받아 태그로 렌더링됩니다.클래스 정보Va.Footer extends Va.Semantic extends Va.ComponenttagName: 'footer'isContainer: true기본 사용법{ tagName: 'footer', tags: [{ tagName: 'div', text: '© 2026 VanillaFront. All rights reserved.' }]}또는 코드로:let footer = new Va.Footer({ innerHTML: '© 2026 VanillaFr..

Va.Header — HTML5 시맨틱 컴포넌트페이지나 섹션의 머리말 영역(로고, 제목, 상단 내비게이션, 브랜딩 등)을 담는 시맨틱 컨테이너입니다. Va.Semantic을 상속받아 태그로 렌더링됩니다.클래스 정보Va.Header extends Va.Semantic extends Va.ComponenttagName: 'header'isContainer: true기본 사용법{ tagName: 'header', tags: [{ tagName: 'h1', innerHTML: 'VanillaFront' },{ tagName: 'nav', tags: [ /* 상단 메뉴 */ ] }]}또는 코드로:let header = new Va.Head..

Va.Aside — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너. 주 콘텐츠와 관련은 있지만 부수적인 콘텐츠를 나타냅니다. 사이드바·관련 링크·광고·인용문 같은 UI에 어울려요.클래스: Va.Aside — va_component.js:21421short name: aside상속: Va.Semantic (Main·Article·Section과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-aside1. 기본 사용{ tagName: 'aside', layout: 'ds-flex fd-column gap-s', style: { width: '300px', padding: '20px' }, tags: [ { tagName:..