How To – 2열 레이아웃

w3.css

2열 레이아웃

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

요즘 위젯 같은 것들이 많이 사용되지 않는 개인 블로그나 온라인 이력서 같은 곳에 2열 그리드 레이아웃이 많이 사용 되더라.

2열 레이아웃을 만드는 방법

1단계) HTML 추가

<div class="row">

  <div class="column"></div>

  <div class="column"></div>

</div>

두 개의 동일한 열 생성

float 예제

Internet Explorer 10 및 이전 버전을 사용하는 브라우저에서 지원되려면 float로 사용해야한다.

.column {

  float: left;

  width: 50%;

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

flex 예제

두 개의 열을 만드는 현대적인 방법은 CSS Flexbox를 사용하는 것이다.
FlexBox는 Internet Explorer 10 및 이전 버전에서는 지원되지 않는다.

.row {

  display: flex;

}

.column {

  flex: 50%;

}

두 개의 다른 열 생성

float – 기본

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

float – 반응형

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}