HTML 코드
<div class="grid">
<article class="card"><div class="img"></div><h3>카드 제목</h3><p>짧은 설명이 들어갑니다.</p><b>12,000원</b></article>
<article class="card"><div class="img"></div><h3>두 번째 카드</h3><p>같은 구조를 반복합니다.</p><b>9,900원</b></article>
</div>
<style>
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--surface),var(--border))}
h3{font-size:15px;margin:10px 12px 2px}
p{margin:0 12px;color:var(--muted);font-size:13px}
b{display:block;margin:8px 12px 12px}
</style>AI에게 이렇게 요청하세요
상품 목록에 3열로, 위에 16:9 이미지·제목·두 줄 설명·가격이 있고 호버 시 살짝 떠오르는 카드 그리드 만들어줘
<div class="grid">
<article class="card"><div class="img"></div><h3>카드 제목</h3><p>짧은 설명이 들어갑니다.</p><b>12,000원</b></article>
<article class="card"><div class="img"></div><h3>두 번째 카드</h3><p>같은 구조를 반복합니다.</p><b>9,900원</b></article>
</div>
<style>
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--surface),var(--border))}
h3{font-size:15px;margin:10px 12px 2px}
p{margin:0 12px;color:var(--muted);font-size:13px}
b{display:block;margin:8px 12px 12px}
</style>언제 쓰나
상품·글·프로젝트처럼 같은 형식의 항목 여러 개를 훑어보게 할 때.
비슷한 것과 차이
- 좌측 강조선 카드(콜아웃): 본문 안에서 팁·주의사항을 강조하는 상자
- 벤토 그리드: 카드 크기를 다르게 섞어 배치한 레이아웃