How To – 컬럼 카드

w3.css

반응형 컬럼 카드

CSS를 사용하여 반응형 컬럼 카드를 만드는 방법을 알아보자.

컬럼 카드 생성 방법

1단계) HTML 추가

<div class="row">

  <div class="column">

    <div class="card">..</div>

  </div>

  <div class="column">

    <div class="card">..</div>

  </div>

  <div class="column">

    <div class="card">..</div>

  </div>

  <div class="column">

    <div class="card">..</div>

  </div>

</div>

2단계) CSS 추가

* {

  box-sizing: border-box;

}

body {

  font-family: Arial, Helvetica, sans-serif;

}

.column {

  float: left;

  width: 25%;

  padding: 0 10px;

}

.row {margin: 0 -5px;}

.row:after {

  content: "";

  display: table;

  clear: both;

}

.card {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  padding: 16px;

  text-align: center;

  background-color: #f1f1f1;

}

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

    display: block;

    margin-bottom: 20px;

  }

}