실습 — 반응형 카드 목록

<div class="cards">
  <article class="card">
    <img class="thumb" src="/learn/htmlcss/sample-logo.png" alt="">
    <div class="body">
      <span class="tag">공지</span>
      <h4>휴관 안내</h4>
      <p>다음 주 월요일은 쉽니다.</p>
    </div>
  </article>

  <article class="card">
    <img class="thumb" src="/learn/htmlcss/sample-logo.png" alt="">
    <div class="body">
      <span class="tag">안내</span>
      <h4>대출 방법</h4>
      <p>한 번에 다섯 권까지 빌릴 수 있습니다.</p>
    </div>
  </article>

  <article class="card">
    <img class="thumb" src="/learn/htmlcss/sample-logo.png" alt="">
    <div class="body">
      <span class="tag">시설</span>
      <h4>열람실 이용</h4>
      <p>3층에 있습니다.</p>
    </div>
  </article>
</div>

* { box-sizing: border-box; }

/* ④ 되풀이되는 값에 이름을 붙입니다 */
:root {
  --brand: #6e56cf;
  --line: #e5e0f5;
  --gap: 14px;
  --radius: 10px;
}

/* ①② 격자 — 폭에 따라 열 수가 바뀝니다 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;   /* 그림이 모서리를 넘지 않게 */
  background: #fff;

  /* ⑤ 마우스를 올렸을 때 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}

/* ③ 그림 자리를 정합니다 */
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f4f2fb;
  display: block;
}

.body { padding: var(--gap); }

.tag {
  display: inline-block;
  background: #f4f2fb;
  color: var(--brand);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.card h4 { margin: 8px 0 4px; font-size: 1rem; }
.card p  { margin: 0; color: #5b6272; font-size: 0.9rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}