CSS로 반응형 컬럼 카드 만드는 방법 완벽 가이드

CSS만으로도 화면 크기에 따라 자동으로 배치가 조정되는 반응형 컬럼 카드를 손쉽게 만들 수 있습니다. 핵심은 float, calc() 함수, 그리고 미디어 쿼리(media query)를 조합하는 것입니다. 아래 예제 코드를 통해 구현 방법을 단계별로 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .card {
        color: white;
        float: left;
        width: calc(25% - 20px);
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        height: 200px;
    }
    .card p {
        font-size: 18px;
    }
    .cardContainer:after {
        content: "";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 600px) {
        .card {
            width: 100%;
        }
    }
</style>
</head>
<body>
<h1>Responsive column card Example</h1>
<h2>Resize the screen to see the below cards resize themselves</h2>
<div class="cardContainer">
<div class="card" style="background-color:rgb(153, 29, 224);">
<h2>First card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(12, 126, 120);">
<h2>Second card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(207, 41, 91);">
<h2>Third card</h2>
<p>Some text</p>
</div>
<div class="card" style="background-color:rgb(204, 91, 39);">
<h2>Fourth card</h2>
<p>Some text</p>
</div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같이 4개의 카드가 한 줄에 나란히 배치된 화면을 확인할 수 있습니다.

CSS로 반응형 컬럼 카드 만드는 방법 완벽 가이드

브라우저 창의 너비를 600px 이하로 줄이면 미디어 쿼리가 작동하여 카드가 세로로 한 줄씩 쌓이는 형태로 전환됩니다.

CSS로 반응형 컬럼 카드 만드는 방법 완벽 가이드

코드 핵심 포인트 정리

box-sizing: border-box — 패딩과 테두리를 포함한 전체 너비 계산 방식을 지정해 레이아웃이 어긋나지 않도록 합니다.
width: calc(25% - 20px) — 각 카드가 부모 요소의 25% 폭을 차지하면서 좌우 마진(10px씩)까지 고려해 정확히 4개가 한 줄에 배치되도록 합니다.
.cardContainer:after (클리어픽스) — float로 인해 무너진 부모 요소의 높이를 복원하는 필수 기법입니다.
@media screen and (max-width: 600px) — 화면 너비가 600px 이하일 때 카드 너비를 100%로 변경해 모바일 환경에서 가독성을 확보합니다.

이처럼 미디어 쿼리의 분기점(breakpoint) 값을 조정하면 태블릿용 2단 배치 등 다양한 반응형 레이아웃으로 확장할 수 있습니다. 최신 프로젝트에서는 flexbox나 grid를 활용하면 더욱 유연하고 깔끔하게 동일한 효과를 구현할 수 있으니 참고하시기 바랍니다.