[Vuetify3] VMenu / VList
1️⃣ 기본 개념VMenu클릭/호버 시 팝업 메뉴를 띄움버튼/아이콘 등 트리거와 함께 사용, context 메뉴, 드롭다운 메뉴VList항목을 나열하는 UI페이지, 카드, 사이드바, 모달 등 항상 보이는 리스트용2️⃣ 핵심 차이보임 여부트리거 클릭/호버 시 나타남항상 보임트리거 필요예: 버튼, 아이콘 등불필요컨텐츠내부에 VList 등 다른 컴포넌트 포함 가능단순 항목 나열실무 용도드롭다운 메뉴, 컨텍스트 메뉴, 옵션 선택사이드바 메뉴, 게시판 리스트, 카드 반복 리스트반응형/레이아웃트리거 기준으로 팝업 위치 결정VRow/VCol 등으로 레이아웃 가능3️⃣ 실무 예시3-1. VMenu (드롭다운 메뉴) 메뉴 열기 Option 1 Option 2 ..
[Vuetify3] 폼/입력 컴포넌트
1️⃣ 폼/입력 컴포넌트 개요1-1. 역할사용자로부터 데이터 입력 받기유효성 검증과 피드백 제공다양한 UI 형태(텍스트, 선택, 토글, 체크 등) 지원1-2. 주요 컴포넌트컴포넌트역할실무 포인트VForm폼 래퍼, validation 관리submit 이벤트, v-model 바인딩, ref로 유효성 체크VTextField단일 텍스트 입력label, placeholder, outlined, dense, rules 활용VTextarea여러 줄 텍스트 입력auto-grow, maxlength, hint, denseVSelect드롭다운 선택items, multiple, chips, v-modelVCheckbox / VRadio / VSwitch선택형 입력v-model + 상태 표시, boolean 값 바인딩VCom..
[Vuetify3] VCard 핵심
1️⃣ VCard 개요역할: 시각적 콘텐츠 영역(카드) 생성특징:Elevation(그림자), Rounded corner, Outlined, Padding 등으로 콘텐츠 영역 구분VCardTitle, VCardSubtitle, VCardText, VCardActions 등 세부 슬롯로 구조화 가능이미지/아이콘/버튼 등 다른 컴포넌트와 쉽게 결합실무 사용 포인트:폼, 리스트, 프로필, 대시보드 위젯 등 거의 모든 UI 블록단순 container(VSheet)보다 구조화된 시각적 구획 제공2️⃣ 주요 props / 슬롯 / 패턴2-1. 주요 propsProp설명실무 활용elevation그림자 정도카드 강조, 시각적 계층outlined테두리만 있는 스타일강조하지 않는 카드, 폼 영역shaped모서리 둥글기디자인..
[Vuetify3] VContainer / Grid (VRow / VCol)
1️⃣ 레이아웃 / 컨테이너 관련 주요 컴포넌트컴포넌트역할실무 사용 포인트VContainer페이지/섹션 콘텐츠의 중앙 정렬, 최대 너비 제한중앙 콘텐츠, 폼, 카드 영역. fluid → 전체 폭VRow12컬럼 기반 행(flex)align, justify, dense, no-guttersVCol컬럼 단위 레이아웃cols, sm, md, lg, xl, offset, orderVSheet사각 영역 컨테이너, 배경/그림자/테두리 가능카드, 섹션, 배경 색상용 래퍼. padding/margin 자유롭게VCard카드형 콘텐츠 래퍼내부 콘텐츠 구획, elevation, round, outlined 등VMain앱 메인 영역, v-app-bar/v-navigation-drawer와 함께 사용전체 레이아웃 구조의 메인 콘..