프론트엔드 개발에서 CSS Grid는 복잡한 레이아웃을 손쉽게 구성할 수 있는 강력한 도구입니다. 이번 글에서는 CSS Grid를 활용하여 반응형 제품 카드를 만드는 미니 프로젝트를 진행해 보겠습니다. 이 프로젝트는 HTML과 CSS의 기본 개념을 이해한 분들을 위한 실습으로, 실제 웹 개발에 유용한 기술을 익힐 수 있습니다.

프로젝트 구조

먼저, 프로젝트의 파일 구조를 다음과 같이 설정합니다:

/product-card
  ├── index.html
  └── styles.css
index.html 파일에는 제품 카드의 구조를 작성하고, styles.css 파일에는 스타일을 정의할 것입니다.

HTML 구조 작성

index.html 파일을 열어 기본적인 HTML 뼈대를 작성합니다. 제품 카드는 이미지, 제목, 설명, 가격 등을 포함합니다. 다음은 제품 카드의 HTML 구조입니다: 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>제품 카드</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="image1.jpg" alt="제품 1" class="card-image">
            <h2 class="card-title">제품 1</h2>
            <p class="card-description">이것은 제품 1에 대한 설명입니다.</p>
            <p class="card-price">₩10,000</p>
        </div>
        <div class="card">
            <img src="image2.jpg" alt="제품 2" class="card-image">
            <h2 class="card-title">제품 2</h2>
            <p class="card-description">이것은 제품 2에 대한 설명입니다.</p>
            <p class="card-price">₩20,000</p>
        </div>
        <div class="card">
            <img src="image3.jpg" alt="제품 3" class="card-image">
            <h2 class="card-title">제품 3</h2>
            <p class="card-description">이것은 제품 3에 대한 설명입니다.</p>
            <p class="card-price">₩30,000</p>
        </div>
        <!-- 추가 카드 -->
    </div>
</body>
</html>

CSS 스타일링

이제 styles.css 파일을 열어 CSS Grid를 사용하여 레이아웃을 구성하고 각 카드의 스타일을 정의합니다. 다음은 CSS 코드입니다:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

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

.card-title {
    font-size: 1.5em;
    margin: 10px;
}

.card-description {
    font-size: 0.9em;
    color: #555;
    margin: 10px;
}

.card-price {
    font-size: 1.2em;
    color: #e91e63;
    margin: 10px;
}

설명

위의 CSS 코드는 기본적인 스타일을 설정하고, CSS Grid를 통해 카드들을 적절하게 배치합니다. grid-template-columns 속성은 화면 크기에 따라 카드의 개수를 자동으로 조정하게 하며, gap 속성은 카드 간의 간격을 설정합니다. 카드에 마우스를 올렸을 때 약간 떠오르는 효과를 주기 위해 transform 속성을 활용했습니다.

반응형 디자인

위의 코드는 이미 반응형으로 설계되었지만, 추가적으로 미디어 쿼리를 사용하여 특정 화면 크기에서 카드의 스타일을 조정할 수 있습니다. 예를 들어, 작은 화면에서는 카드의 텍스트 크기를 줄일 수 있습니다:

@media (max-width: 480px) {
    .card-title {
        font-size: 1.2em;
    }
    
    .card-price {
        font-size: 1em;
    }
}

마무리

이번 포스트에서는 CSS Grid를 활용하여 반응형 제품 카드를 만드는 방법을 알아보았습니다. 이 코드는 기본적인 제품 카드 레이아웃을 제공하며, 여러분의 웹 프로젝트에 쉽게 통합할 수 있습니다. CSS Grid의 힘을 활용하면 적은 노력으로도 복잡한 레이아웃을 구현할 수 있습니다. 이제 여러분의 제품이나 서비스에 맞춰 카드 내용을 수정하고 다양한 스타일을 적용해 보세요!