Va.Aside — HTML <aside> 시맨틱 컨테이너
HTML5의 <aside> 태그를 감싸는 시맨틱 컨테이너. 주 콘텐츠와 관련은 있지만 부수적인 콘텐츠를 나타냅니다. 사이드바·관련 링크·광고·인용문 같은 UI에 어울려요.
- 클래스: Va.Aside — va_component.js:21421
- short name: aside
- 상속: Va.Semantic (Main·Article·Section과 같은 부모)
- DOM 태그: <aside>
- isContainer: true
- 베이스 CSS: va-aside
1. 기본 사용
{
tagName: 'aside',
layout: 'ds-flex fd-column gap-s',
style: { width: '300px', padding: '20px' },
tags: [
{ tagName: 'h3', innerHTML: '관련 글' },
{ tagName: 'ul', tags: [/* 링크들 */] }
]
}
- HTML <aside> 태그로 렌더링
- 스크린리더가 "보조 콘텐츠"로 인식
- 대개 좌측/우측 사이드바 자리에 배치
2. <aside> HTML 표준의 의미
HTML5 표준상 <aside>는 "주 콘텐츠와 관련은 있지만 없어도 문서가 성립하는 부수적 콘텐츠". 판단 기준:
- 없어져도 주요 콘텐츠 이해에 지장이 없나? — 있으면 aside
- 관련 링크·용어 설명·광고·인용문인가? — aside
- 사이드바·서브 메뉴인가? — aside
예시:
- 블로그 글 옆 관련 글 목록
- 기사 안 인용문 박스
- 페이지 우측 광고 영역
- 문서 좌측 목차 (navigation은 nav가 더 맞을 수도)
3. Semantic 계열에서의 위치
컴포넌트시맨틱 의미
| Va.Main | 페이지 주요 콘텐츠 |
| Va.Article | 독립 배포 가능 콘텐츠 |
| Va.Section | 주제별 문서 섹션 |
| Va.Aside | 부수적 콘텐츠 |
| Va.Nav | 네비게이션 |
| Va.Header / Va.Footer | 헤더/푸터 |
4. 주요 속성
Semantic 상속만. 자체 추가 없음:
속성설명
| innerHTML | HTML 콘텐츠 (_sanitize 적용) |
| text | 순수 텍스트 |
| layout | Flex/Grid 레이아웃 |
| style / mobileStyle | 스타일 |
| class / addClass | CSS 클래스 |
| mediaQuery | 반응형 |
5. 이벤트 (Semantic 상속)
이벤트시그니처발생 시점
| click | (component, element, evt) | 클릭 |
| contextmenu | (component, element, evt) | 우클릭 (기본 컨텍스트 메뉴 자동 차단) |
| focus / blur | (component, element, evt) | 포커스 진입/이탈 |
6. 메서드
Semantic 상속. setText, setInnerHTML 등 표준.
7. 내부 구조
<aside elname="element" class="va-aside [layout classes]" tag-name="aside">
<!-- 자식 컴포넌트들 -->
</aside>
매우 단순. HTML <aside> 태그 + va-aside 클래스.
8. 언제 쓰나
Va.Aside가 맞을 때
- 사이드바 (좌측·우측 부가 메뉴)
- 관련 글·추천 콘텐츠 목록
- 인용문·주석 박스
- 위젯·광고 영역
- 용어 설명 박스
- 주 콘텐츠 옆의 부수 정보
다른 걸 쓸 때
- 네비게이션이 주된 역할 → Va.Nav
- 페이지 주요 콘텐츠 → Va.Main
- 독립 콘텐츠 → Va.Article
- 주제별 섹션 → Va.Section
- 단순 컨테이너 → Va.Div
⚠️ <nav>와 혼동 주의 — 사이드바가 네비게이션이 주된 역할이면 <nav>가 더 정확. 관련 링크가 부수적이면 <aside> 안에 <nav>를 중첩하기도.
9. 흔한 조합 예시
// 좌측 사이드바 + 메인 콘텐츠
{
tagName: 'div',
layout: 'ds-flex fd-row',
tags: [
{
tagName: 'aside',
style: { width: '250px', padding: '20px', background: '#f5f5f5' },
tags: [
{ tagName: 'h3', innerHTML: '카테고리' },
{ tagName: 'ul', tags: [/* 카테고리 링크들 */] }
]
},
{
tagName: 'main',
style: { flex: 1, padding: '20px' },
tags: [/* 주요 콘텐츠 */]
}
]
}
// 블로그 글 + 우측 관련 글
{
tagName: 'main',
layout: 'ds-flex fd-row gap-l',
tags: [
{
tagName: 'article',
style: { flex: 1 },
tags: [
{ tagName: 'h1', innerHTML: '기사 제목' },
{ tagName: 'p', innerHTML: '본문...' }
]
},
{
tagName: 'aside',
style: { width: '300px' },
tags: [
{ tagName: 'h3', innerHTML: '관련 글' },
{ tagName: 'ul', tags: [/* 관련 글 링크 */] }
]
}
]
}
// 인용문 박스 (본문 안 aside)
{
tagName: 'article',
tags: [
{ tagName: 'p', innerHTML: '본문 1' },
{
tagName: 'aside',
style: {
background: '#eef',
padding: '16px',
borderLeft: '4px solid #66f',
margin: '20px 0'
},
tags: [
{ tagName: 'p', innerHTML: '💡 참고: 이 개념은...' }
]
},
{ tagName: 'p', innerHTML: '본문 2' }
]
}
// 광고·위젯 영역
{
tagName: 'aside',
style: { padding: '20px', border: '1px solid gray' },
tags: [
{ tagName: 'h4', innerHTML: '이벤트 안내' },
{ tagName: 'img', src: '/promo.jpg' },
{ tagName: 'button', text: '자세히 보기' }
]
}
// 모바일: 상단 사이드바
{
tagName: 'aside',
style: {
display: 'none'
},
mediaQuery: {
mobile: { display: 'block' }
},
tags: [/* 모바일 전용 알림 */]
}
10. 실전 예 — 블로그 상세 페이지
class BlogDetail extends Va.View {
config() {
return {
tagName: 'div',
layout: 'ds-flex fd-column',
style: { minHeight: '100vh' },
tags: [
// 헤더
{
tagName: 'header',
tags: [/* 로고, 네비 */]
},
// 주요 콘텐츠 영역
{
tagName: 'main',
layout: 'ds-flex fd-row gap-l',
style: { flex: 1, padding: '20px', maxWidth: '1200px', margin: '0 auto' },
tags: [
// 본문 (독립 콘텐츠)
{
tagName: 'article',
style: { flex: 1 },
tags: [
{ tagName: 'h1', innerHTML: '블로그 제목' },
{ tagName: 'p', innerHTML: '본문 내용...' }
]
},
// 우측 사이드바 (부수 콘텐츠)
{
tagName: 'aside',
style: {
width: '300px',
display: 'flex',
flexDirection: 'column',
gap: '20px'
},
tags: [
// 작성자 정보
{
tagName: 'section',
style: { padding: '16px', border: '1px solid gray' },
tags: [
{ tagName: 'h3', innerHTML: '작성자' },
{ tagName: 'p', innerHTML: '홍길동' }
]
},
// 관련 글
{
tagName: 'section',
style: { padding: '16px', border: '1px solid gray' },
tags: [
{ tagName: 'h3', innerHTML: '관련 글' },
{ tagName: 'ul', tags: [/* 관련 글 링크 */] }
]
},
// 광고
{
tagName: 'section',
style: { padding: '16px', background: '#f5f5f5' },
tags: [
{ tagName: 'p', innerHTML: '광고 영역' }
]
}
]
}
]
},
// 푸터
{ tagName: 'footer', tags: [/* 저작권 등 */] }
]
};
}
}
시맨틱 계층:
- <header> — 페이지 헤더 (랜드마크)
- <main> — 주요 콘텐츠 영역 (랜드마크)
- <article> — 블로그 글 본문 (독립 콘텐츠)
- <aside> — 부수 콘텐츠 (랜드마크)
- <section> × 3 — 부수 콘텐츠 안 각 그룹
- <footer> — 페이지 푸터 (랜드마크)
스크린리더 사용자가 "메인 콘텐츠로 이동 / 부수 콘텐츠로 이동" 같은 랜드마크 네비게이션으로 빠르게 이동 가능.
11. 알아두면 좋을 주의사항
- "부수적"이 판단 기준 — 없어져도 주 콘텐츠 이해에 지장 없어야 aside 적절.
- <nav>와 혼동 주의 — 네비게이션이 주된 목적이면 <nav>가 더 정확.
- 한 페이지 여러 개 OK — 사이드바가 좌우 둘 다 있어도 각각 aside.
- 본문 안에도 사용 가능 — 인용문·주석 박스로.
- 자체 스타일 최소 — va-aside 클래스만. width·position·padding 명시 필요.
- 모바일에서 어떻게 보일지 계획 — 좌측 사이드바를 모바일에선 어떻게 처리할지 (mediaQuery 활용).
- contextmenu 자동 preventDefault — 우클릭 시 브라우저 메뉴 차단.
- 접근성 랜드마크 — 스크린리더가 "complementary" 랜드마크로 인식.
- SEO 관점 — 크롤러가 주 콘텐츠와 부수 콘텐츠를 구분해 이해.
- VanillaFront 실무엔 자주 안 쓰임 — 업무 화면은 대개 page + panel. Aside는 콘텐츠 사이트에 어울림.
12. aside vs nav vs section vs div 선택
상황추천
| 부수 콘텐츠 (관련 글, 광고) | aside |
| 좌측/우측 사이드바 (네비 위주) | nav (안에 aside 중첩도 가능) |
| 본문 안 인용문 박스 | aside |
| 주제별 문서 섹션 | section |
| 네비게이션 링크 모음 | nav |
| 단순 컨테이너 (시맨틱 무관) | div |
| 위젯·광고 영역 | aside |
"주 콘텐츠와 관련은 있지만 없어도 되는 부수 콘텐츠면 aside".
참고
- API 문서 페이지: https://vanillafront.com/docs.html?theme=light#main#apiaside
- 연관: Va.Semantic(부모), Va.Nav(네비게이션 전용 형제)
'컴포넌트 > 시멘틱태그' 카테고리의 다른 글
| Footer (푸터) (0) | 2026.09.16 |
|---|---|
| Header (해더) (0) | 2026.09.16 |
| Section (섹션) (0) | 2026.09.16 |
| Article (아티클) (0) | 2026.09.14 |
| Main (메인) (0) | 2026.09.14 |