VanillaFront

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:..

Va.Section — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너. 주제별로 구분된 문서 섹션을 나타내는 요소입니다. Va.Article과 자주 헷갈리지만, "독립 콘텐츠"가 아니라 "주제별 그룹핑" 이라는 게 결정적 차이. 데모·문서 페이지에서 하위 섹션을 나눌 때 관행처럼 사용됩니다.클래스: Va.Section — va_component.js:21376short name: section상속: Va.Semantic (Article·Main과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-section1. 기본 사용{ tagName: 'section', layout: 'ds-flex fd-column gap-m', tags: [ ..

Va.Article — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너. 독립적으로 배포·재사용 가능한 콘텐츠를 나타내는 랜드마크 요소입니다. 블로그 글·뉴스 기사·상품 카드처럼 그 자체로 완결된 콘텐츠 단위에 어울립니다. VanillaFront에서 가장 자주 쓰는 semantic 태그 중 하나 — 데모 코드에서도 최상위 컨테이너로 자주 등장.클래스: Va.Article — va_component.js:21824short name: article상속: Va.Semantic (Main·Section과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-article1. 기본 사용{ tagName: 'article', layout: 'ds-flex f..

Va.Main — HTML 시맨틱 컨테이너HTML5의 태그를 감싸는 시맨틱 컨테이너 컴포넌트. 한 페이지의 주요 콘텐츠를 나타내는 접근성·SEO용 랜드마크 요소입니다. Va.Section, Va.Article, Va.Header, Va.Footer 등과 같은 Semantic 계열의 형제.클래스: Va.Main — va_component.js:21939short name: main상속: Va.Semantic (Section·Article과 같은 부모)DOM 태그: isContainer: true베이스 CSS: va-main1. 기본 사용{ tagName: 'main', layout: 'ds-flex fd-column gap-m', tags: [ { tagName: 'h1',..