# Cardbox Widget – 다목적 카드 레이아웃 위젯
들어가며
케이테마 프리미엄 Cardbox Widget은 카드 형태로 콘텐츠를 표현하는 범용 위젯입니다. 블로그 포스트, 제품, 서비스, 팀원, 포트폴리오 등 어떤 콘텐츠든 카드 레이아웃으로 깔끔하게 정리할 수 있습니다.
주요 기능
- Repeater 기반: 무제한 카드 추가
- 다양한 콘텐츠: 이미지 + 제목 + 설명 + 버튼/링크
- Grid 레이아웃: 2, 3, 4, 6열 선택
- 카드 스타일: 클린, 플로팅, 보더, 그라디언트 등
- 호버 효과: Lift, Shadow, Zoom, Tilt 등
- 완전한 반응형: 디바이스별 컬럼 조절
각 카드 구성
- 이미지: 카드 상단 이미지 (선택 사항)
- 배지: 카드 상단 배지/라벨 (예: “NEW”, “SALE”)
- 제목: 카드 제목
- 설명: 카드 내용 (HTML 지원)
- 메타 정보: 날짜, 카테고리, 작성자 등 (선택 사항)
- 버튼: Call-to-Action 버튼
- 링크: 카드 전체 클릭 가능 (선택 사항)
레이아웃 옵션
컬럼 수 (반응형)
- 데스크톱: 2, 3, 4, 6열 (기본: 3)
- 태블릿: 2, 3, 4열 (기본: 2)
- 모바일: 1, 2열 (기본: 1)
간격
- Row Gap: 행 간격 (0 ~ 100px, 기본: 30px)
- Column Gap: 열 간격 (0 ~ 100px, 기본: 30px)
카드 비율
- Auto: 콘텐츠에 맞춰 자동 높이
- Equal Height: 모든 카드 동일 높이
스타일 옵션
1. 카드 스타일
배경
- 단색, 그라디언트, 이미지
테두리
- 스타일, 굵기, 색상
- Border Radius (둥근 모서리)
그림자
- Box Shadow
- 호버 시 그림자 강화
패딩
- 내부 여백 조절
2. 이미지 스타일
- 비율: 16:9, 4:3, 1:1 (정사각형)
- Object Fit: Cover, Contain
- Border Radius: 이미지 모서리
- 호버 효과: Zoom, Grayscale, Brightness
- Overlay: 호버 시 오버레이
3. 배지 스타일
- 위치: Top Left, Top Right
- 배경색: 배지 배경
- 텍스트 색상: 배지 텍스트
- Border Radius: 둥근 모서리
- 패딩: 배지 크기
4. 제목/설명 스타일
- Typography: 폰트, 크기, 굵기
- 색상: 텍스트 색상
- 호버 색상: 제목 호버 시
- 간격: Margin
5. 버튼 스타일
- Typography: 버튼 텍스트
- 배경색: 버튼 배경
- 텍스트 색상: 버튼 텍스트
- 호버 효과: 색상 변화
- Border: 테두리
- Border Radius: 둥근 모서리
- 패딩: 버튼 크기
6. 호버 효과
- Lift: translateY(-10px) (위로 이동)
- Shadow Grow: 그림자 강화
- Tilt: 기울임 (3D 효과)
- Zoom: scale(1.05) (확대)
- Glow: 발광 효과
실전 활용 예제
예제 1: 블로그 포스트 카드 (3열)
설정:
- 컬럼: 3열
- 이미지 비율: 16:9
- 이미지 호버: Zoom In
- 배지: 카테고리 (Top Left, Primary 색상)
- 제목: 포스트 제목 (22px, Bold)
- 메타: 날짜, 작성자 (아이콘 포함)
- 설명: 요약 (2-3줄)
- 버튼: “Read More” (텍스트 링크)
- 카드: 흰색, 그림자, Border Radius 10px
- 호버: Lift + Shadow Grow
예제 2: 제품 카드 (4열)
설정:
- 컬럼: 4열
- 이미지 비율: 1:1 (정사각형)
- 배지: “SALE -30%” (Top Right, 빨강)
- 제목: 제품명 (18px)
- 설명: 간단한 설명 (1줄)
- 가격: 메타 정보로 표시
- 버튼: “장바구니 담기” (Primary 버튼)
- 카드: 테두리만 (1px solid)
- 호버: Image Zoom + Card Lift
예제 3: 포트폴리오 카드 (3열, 큰 이미지)
설정:
- 컬럼: 3열
- 이미지: 큰 사이즈 (4:3 비율)
- 이미지 호버: Overlay (어두운 오버레이 + 텍스트 표시)
- 제목: 프로젝트 이름 (오버레이 안에)
- 설명: 짧은 설명 (오버레이 안에)
- 버튼: “View Project” (오버레이 안에)
- 카드: 이미지만 (테두리 없음)
- Border Radius: 15px
디자인 팁
카드 스타일 선택 가이드
블로그/뉴스
- 클린 카드 (흰색, 그림자)
- 16:9 이미지
- 메타 정보 표시
- Read More 링크
제품/이커머스
- 테두리 카드 또는 그림자 카드
- 1:1 정사각형 이미지
- 배지 (SALE, NEW)
- 가격 표시
- 버튼 강조
포트폴리오
- 이미지 중심
- 호버 오버레이
- 최소한의 텍스트
- 큰 이미지 (4:3 또는 16:9)
팀/인물
- 원형 또는 정사각형 이미지
- 이름, 직책
- SNS 링크 아이콘
- Grayscale to Color 호버
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
마무리
Cardbox Widget은 어떤 콘텐츠든 카드 형태로 표현할 수 있는 만능 위젯입니다. 블로그, 포트폴리오, 제품, 팀 소개 등 다양한 용도로 활용하여 깔끔하고 정돈된 레이아웃을 만드세요!