How To – 반응형 지그재그 레이아웃

w3.css

반응형 지그재그 레이아웃

CSS를 사용하여 반응형 지그재그(교대) 레이아웃을 만드는 방법을 알아보자.

지그재그 레이아웃을 만드는 방법

1단계) HTML 추가

<div class="container">

  <div class="row">

    <div class="column-66">

      ...

    </div>

    <div class="column-33">

      ...

    </div>

  </div>

</div>

<div class="container">

  <div class="row">

    <div class="column-33">

      ...

    </div>

    <div class="column-66">

      ...

    </div>

  </div>

</div>

2단계) CSS 추가

* {

  box-sizing: border-box;

}

.container {

  padding: 64px;

}

.row:after {

  content: "";

  display: table;

  clear: both

}

.column-66 {

  float: left;

  width: 66.66666%;

  padding: 20px;

}

.column-33 {

  float: left;

  width: 33.33333%;

  padding: 20px;

}

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

  .column-66,

  .column-33 {

    width: 100%;

    text-align: center;

  }

}