컴포넌트/시멘틱태그

Footer (푸터)

VanillaFront 2026. 9. 16. 18:25

Va.Footer — HTML5 <footer> 시맨틱 컴포넌트

페이지나 섹션의 꼬리말 영역(저작권, 회사 정보, 링크, 연락처 등)을 담는 시맨틱 컨테이너입니다. Va.Semantic을 상속받아 <footer> 태그로 렌더링됩니다.

클래스 정보

Va.Footer extends Va.Semantic extends Va.Component
tagName: 'footer'
isContainer: true

기본 사용법

{
    tagName: 'footer',
    tags: [{
        tagName: 'div',
        text: '© 2026 VanillaFront. All rights reserved.'
    }]
}

또는 코드로:

let footer = new Va.Footer({
    innerHTML: '© 2026 VanillaFront'
});
parent.append(footer);

HTML5 <footer>의 의미

<footer>는 HTML5 시맨틱 태그로, 하단 마무리/부가 정보 콘텐츠를 감쌉니다. 사용 위치에 따라 의미가 달라집니다:

  • <body> 바로 아래 → 페이지 전체의 푸터 (사이트 저작권, 회사 정보, 사이트맵)
  • <article> / <section> 안 → 해당 섹션의 푸터 (작성자, 작성일, 태그, 관련 링크)

한 페이지 안에 여러 개의 <footer>가 있을 수 있으며, 각 섹션마다 붙여도 정상입니다.

시맨틱 계열 위치

컴포넌트역할위치

Va.Page 페이지 최상위 컨테이너 최상단
Va.Header 머리말 영역 Page / Article / Section 상단
Va.Nav 내비게이션 Header 안 또는 독립
Va.Main 메인 콘텐츠 Page 중앙
Va.Aside 사이드 콘텐츠 Main 좌/우
Va.Footer 꼬리말 영역 Page / Article / Section 하단

속성

Va.Semantic으로부터 상속:

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

이벤트

Va.Semantic으로부터 상속 (onClick, onMouseEnter 등 표준 DOM 이벤트).

메서드

  • setText(text) — 텍스트 설정 후 업데이트
  • setInnerHTML(html) — HTML 설정 후 업데이트
  • Va.Component / Va.Semantic 공통 메서드

내부 구조

<footer class="va-footer">
    <!-- containerElement에 자식 컴포넌트 또는 innerHTML 렌더링 -->
</footer>

사용 시점 — 언제 쓰나

  • 페이지 하단의 저작권 · 회사 정보 · 개인정보 처리방침 링크 영역
  • 게시글(<article>) 하단의 태그 · 관련 글 · 댓글로 가기 블록
  • 카드/섹션 하단의 부가 액션(공유, 좋아요) · 메타 정보 영역

사용하지 말아야 할 때

  • 단순 하단 여백/구분선 → div 사용
  • 다음 페이지로 이동하는 페이지네이션 → div + Va.Pagination 사용
  • 폼의 하단 액션 바(확인/취소 버튼) → Va.Panel 하단 영역이나 div 사용 (푸터는 "마무리 정보"의 의미)

자주 쓰는 조합 예시

페이지 푸터 (저작권 + 회사 정보)

{
    tagName: 'footer',
    layout: 'ds-flex fd-column ai-center gap-s',
    style: { padding: '20px', borderTop: '1px solid var(--colorNeutralStroke)' },
    tags: [{
        tagName: 'div',
        text: '© 2026 VanillaFront. All rights reserved.'
    },{
        tagName: 'div',
        layout: 'ds-flex fd-row gap-m',
        tags: [
            { tagName: 'a', innerHTML: '이용약관', attributes: { href: '/terms' } },
            { tagName: 'a', innerHTML: '개인정보처리방침', attributes: { href: '/privacy' } },
            { tagName: 'a', innerHTML: '고객문의', attributes: { href: '/contact' } }
        ]
    }]
}

게시글 푸터 (태그 + 작성자)

{
    tagName: 'article',
    tags: [{
        tagName: 'header',
        tags: [{ tagName: 'h1', innerHTML: '오늘의 이야기' }]
    },{
        tagName: 'section',
        innerHTML: '본문 …'
    },{
        tagName: 'footer',
        layout: 'ds-flex fd-row gap-s',
        tags: [
            { tagName: 'tag', text: 'VanillaFront' },
            { tagName: 'tag', text: 'ES6' },
            { tagName: 'div', style: { flex: 1 } },
            { tagName: 'div', text: 'by leebyeungok' }
        ]
    }]
}

실전 예시 — 페이지 전체 구조

config(){
    return {
        tagName: 'page',
        tags: [{
            tagName: 'header',
            tags: [ /* 로고 + 내비 */ ]
        },{
            tagName: 'main',
            tags: [ /* 본문 */ ]
        },{
            tagName: 'footer',
            layout: 'ds-flex fd-row ai-center',
            style: {
                padding: '15px 20px',
                borderTop: '1px solid var(--colorNeutralStroke)',
                color: 'var(--colorForegroundSecondary)',
                fontSize: 'var(--sizeFontS)'
            },
            tags: [{
                tagName: 'div',
                text: '© 2026 VanillaFront'
            },{
                tagName: 'div',
                style: { flex: 1 }
            },{
                tagName: 'div',
                text: 'v1.0.0'
            }]
        }]
    };
}

주의사항

  • 한 페이지에 여러 개 OK — <body> 직계, 각 <article> 안 등 여러 위치에 놓을 수 있음
  • 폼 액션 바와 혼동 금지 — "저장/취소" 같은 인터랙션 바는 시맨틱상 <footer>가 아님. Panel 하단이나 div로 처리
  • 스타일은 CSS 변수로 — var(--colorNeutralStroke), var(--colorForegroundSecondary) 등 테마 변수 사용 권장
  • <address> 태그와 짝 — 연락처 정보가 있다면 <footer> 안에 <address>를 넣는 것이 시맨틱적으로 옳음

대안 비교

상황추천

페이지/섹션의 꼬리말 상자 Va.Footer
페이지/섹션의 머리말 상자 Va.Header
폼 하단 확인/취소 버튼 바 div 또는 Panel 하단
의미 없는 단순 그루핑 div

참고