카드 그리드 레이아웃

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 27번째.

카드 그리드는 이커머스 사이트, 포트폴리오 또는 블로그에서 흔히 사용되는 반응형 패턴입니다. 이는 항목들(제품, 기사 또는 프로필 등)을 균등한 간격의 카드로 배치합니다. 각 카드는 보통 이미지, 제목, 약간의 텍스트, 그리고 때로는 버튼이나 링크를 포함합니다.

이 레이아웃은 주로 CSS Grid 또는 Flexbox로 구축되어, 화면 크기에 따라 행당 카드 수가 변경됩니다(예: 모바일에서는 1열, 태블릿에서는 2~3열, 데스크톱에서는 4열 이상).

먼저, 제품 목록을 위한 HTML 구조를 만듭니다:

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- 여기에 더 많은 제품 카드가 들어갑니다 -->
</div>

이제 이것을 반응형으로 만들기 위해 CSS를 추가합니다:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 태블릿 이상용 */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 데스크톱용 */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

이것은 모바일에서 단일 열, 태블릿에서 두 개의 열, 그리고 데스크톱 화면에서 세 개의 열을 생성합니다.

챌린지

쉬움

여행 사진 갤러리를 위한 HTML 페이지가 제공됩니다. 여러분의 작업은 다양한 화면 크기에 적응하는 반응형 카드 그리드를 만드는 것입니다.

요구 사항:

레이아웃에 CSS Grid를 사용하세요.
모바일(작은 화면)에서는 한 줄에 1개의 카드를 표시합니다.
태블릿에서는 한 줄에 2개의 카드를 표시합니다.
데스크톱에서는 한 줄에 3개 이상의 카드를 표시합니다.

각 카드를 다음으로 스타일링하세요:

멋진 배경색
둥근 모서리

목표: 어떤 화면 크기에서도 멋지게 보이는 깔끔하고 현대적인 갤러리 레이아웃을 만듭니다.

치트 시트

카드 그리드(Card Grid)는 항목을 균등한 간격의 카드로 배열하는 반응형 패턴으로, 주로 제품, 기사 또는 포트폴리오에 사용됩니다.

카드 그리드를 위한 HTML 구조:

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- 여기에 더 많은 제품 카드 추가 -->
</div>

CSS Grid를 사용한 반응형 카드 그리드용 CSS:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 태블릿 이상 */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 데스크톱용 */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

이를 통해 모바일에서는 1열, 태블릿에서는 2열, 데스크톱 화면에서는 3열로 구성된 반응형 레이아웃이 생성됩니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Card Grid Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 2rem;
    }

    h1 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }

    .gallery-grid {
      gap: 1.5rem;
    }

    .card {
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.03);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card h3 {
      margin: 0.8rem;
      color: #444;
    }

    .card p {
      margin: 0 0.8rem 1rem;
      font-size: 0.9rem;
      color: #666;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .gallery-grid {
          
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .gallery-grid {

      }
    }
  </style>
</head>
<body>
    <h1>Travel Gallery</h1>

    <div class="gallery-grid">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Beach">
          <h3>Sunny Beach</h3>
          <p>Relaxing views of golden sand and turquoise waters.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e" alt="Mountains">
          <h3>Mountain Escape</h3>
          <p>Fresh air and breathtaking peaks for hiking lovers.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg" alt="City Lights">
          <h3>City Lights</h3>
          <p>A bustling city skyline shining bright at night.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Hutan_Tangkahan.jpg" alt="Forest">
          <h3>Green Forest</h3>
          <p>Peaceful trails and endless shades of green.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Caravan_in_the_desert.jpg" alt="Desert">
          <h3>Desert Adventure</h3>
          <p>Golden dunes stretching far into the horizon.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="Lake">
          <h3>Crystal Lake</h3>
          <p>Mirror-like reflections surrounded by mountains.</p>
        </div>
    </div>
</body>
</html>