[Vuetify3] VCard 핵심

1️⃣ VCard 개요

• 역할: 시각적 콘텐츠 영역(카드) 생성
• 특징:
  • Elevation(그림자), Rounded corner, Outlined, Padding 등으로 콘텐츠 영역 구분
  • VCardTitle, VCardSubtitle, VCardText, VCardActions 등 세부 슬롯로 구조화 가능
  • 이미지/아이콘/버튼 등 다른 컴포넌트와 쉽게 결합

실무 사용 포인트:

• 폼, 리스트, 프로필, 대시보드 위젯 등 거의 모든 UI 블록
• 단순 container(VSheet)보다 구조화된 시각적 구획 제공

---

2️⃣ 주요 props / 슬롯 / 패턴

2-1. 주요 props

Prop설명실무 활용

elevation	그림자 정도	카드 강조, 시각적 계층
outlined	테두리만 있는 스타일	강조하지 않는 카드, 폼 영역
shaped	모서리 둥글기	디자인 일관성 맞춤
hover	hover 시 elevation 증가	대시보드 카드 시각적 피드백
max-width / min-width	카드 너비 제한	반응형/정렬 조절
color	배경색	강조/상태 표시, 디자인 시스템과 일치

2-2. 주요 슬롯

슬롯설명실무 활용

VCardTitle	제목 영역	카드 제목, 리스트 항목 제목
VCardSubtitle	부제목 영역	부제목, 소제목, 상태 표시
VCardText	본문 텍스트	설명, 요약, 내용 표시
VCardActions	버튼/행동 영역	버튼, 링크, 아이콘 액션 배치
VCardItem	리스트 아이템용	리스트 카드 내부 항목 반복

 

 

2-3. 일반 패턴

1. 기본 카드

 

<v-card elevation="2" class="pa-3">
  <v-card-title>Card Title</v-card-title>
  <v-card-text>This is the main content.</v-card-text>
  <v-card-actions>
    <v-btn text>Action 1</v-btn>
    <v-btn text>Action 2</v-btn>
  </v-card-actions>
</v-card>

1. 이미지 포함 카드

 

<v-card max-width="400">
  <v-img src="image.jpg" height="200px"/>
  <v-card-title>Title</v-card-title>
  <v-card-text>Text content here.</v-card-text>
</v-card>

1. 리스트형 카드

 

<v-card>
  <v-list>
    <v-list-item v-for="item in items" :key="item.id">
      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
        <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-card>

---

3️⃣ 실무 팁

• 카드 구조는 항상 Title → Text → Actions 순서로 시각적 위계를 준다
• 반응형: max-width + VCol/VRow와 결합하여 모바일 1열, 데스크탑 N열 패턴
• 리스트/그리드 카드: 카드 내부 반복 콘텐츠는 v-for + VCard 조합
• 상태 표시: 카드 색상, elevation, outline, icon으로 상태나 강조 표현
• 퍼포먼스: 카드가 많은 경우, v-for + key 필수, lazy-loading 고려

---

4️⃣ 실무 기준 요약 (체크리스트)

• 역할: 시각적 구획 + 콘텐츠 레이아웃
• 주요 props: elevation, outlined, shaped, hover, color, max-width
• 주요 슬롯: VCardTitle, VCardSubtitle, VCardText, VCardActions, VCardItem
• 실무 패턴:
  • 단일 카드 → Form, Profile, Info
  • 이미지 카드 → Hero, Preview
  • 리스트 카드 → 반복 데이터 표시
• 반응형: VCol과 조합, 모바일-데스크탑 열 구조 조절
• 팁: 카드 구조는 항상 위계(Title→Text→Actions) 유지, 상태 표현은 color/elevation/icon 활용

 

---

 

VContainer / VSheet / VCard

1️⃣ VContainer

• 추가 팁
  • fluid + pa-0 → 풀-블리드 섹션 구현
  • tag prop → <section> / <main> 등 시멘틱 태그 지정 가능
  • 중첩 container → 마진/패딩 계산 주의

2️⃣ VSheet

• 추가 팁
  • 기본 container보다 “시각적 강조/배경용”
  • elevation, color, rounded, padding, theme 적용
  • 카드처럼 슬롯 구조는 없고 단순 래퍼 → 콘텐츠 구획용

3️⃣ VCard

• 추가 팁
  • 슬롯 구조: VCardTitle → VCardText → VCardActions
  • 이미지/리스트/폼 등 여러 UI 요소를 포함 가능
  • elevation, outlined, hover, color 등으로 상태·강조 표현
  • 반응형: VCol과 조합해서 모바일 1열, 데스크탑 N열
  • performance: 카드 반복 시 v-for key 필수, lazy-loading 권장

---

✅ 요약

1. Container (VContainer)
   • 페이지/섹션 중앙 정렬, max-width 제한, fluid 옵션
   • 풀-블리드 배너/히어로 구현 가능
2. Sheet (VSheet)
   • 단순 시각적 래퍼, 배경/그림자/패딩 강조용
   • 카드처럼 슬롯 없음, 구조화된 콘텐츠보다 “시각적 containment”
3. Card (VCard)
   • 시각적 구획 + 콘텐츠 구조화
   • 슬롯 활용(Title, Text, Actions)
   • 반복/이미지/폼 등 다양한 실무 UI 적용
   • 반응형/상태 표시, elevation/color 활용