How To – 혼합 컬럼 레이아웃

w3.css

혼합 컬럼 레이아웃

CSS를 사용하여 혼합된 열 레이아웃 그리드를 만드는 방법을 알아보자.

화면 너비에 따라 4열, 2열, 전체 너비 열로 변경되는 반응형 열 레이아웃을 만드는 방법을 알아보자.

혼합 컬럼 레이아웃을 만드는 방법

1단계) HTML 추가

<div class="row">

  <div class="column" style="background-color:#aaa;">

  <h2>1열</h2>

  <p>텍스트 입력..</p>

  </div>

  <div class="column" style="background-color:#bbb;">

  <h2>2열</h2>

  <p>텍스트 입력..</p>

  </div>

  <div class="column" style="background-color:#ccc;">

  <h2>3열</h2>

  <p>텍스트 입력..</p>

  </div>

  <div class="column" style="background-color:#ddd;">

  <h2>4열</h2>

  <p>텍스트 입력..</p>

  </div>

</div>

2단계) CSS 추가

.column {

  float: left;

  width: 25%;

}

.row:after {

  content: "";

  display: table;

   clear: both;

}

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

  .column {

    width: 50%;

  }

}

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

  .column {

    width: 100%;

  }

}