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 |
참고
- API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apifooter
- 연관: Va.Semantic(부모), Va.Header(대응 페어)
'컴포넌트 > 시멘틱태그' 카테고리의 다른 글
| Summary (썸머리) (0) | 2026.09.16 |
|---|---|
| Details (디테일스) (0) | 2026.09.16 |
| Header (해더) (0) | 2026.09.16 |
| Aside (어사이드) (0) | 2026.09.16 |
| Section (섹션) (0) | 2026.09.16 |