어떻게 생성하나요: 두 열 레이아웃

CSS를 사용하여 두 열 레이아웃 그리드를 생성하는 방법을 배웁니다.

열 1

일부 텍스트..

열 2

일부 텍스트..

직접 시도해보세요

두 열 레이아웃을 어떻게 생성하나요

1단계 - HTML 추가:

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

2단계 - CSS 추가:

이 예제에서는 두 열을 생성할 것입니다:평행의 열:

浮动 예제

.column {
  float: left;
  width: 50%;
}
/* 열 뒤의 float을 지우기 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

직접 시도해보세요

두 열 레이아웃을 생성하는 현대적인 방법은 CSS Flexbox을 사용하는 것입니다. 하지만 이는 Internet Explorer 10 이상 버전을 지원하지 않습니다.

Flex 예제

.row {
  display: flex;
}
.column {
  flex: 50%;
}

직접 시도해보세요

두 열 레이아웃을 생성할 때 float나 flex를 사용할 수 있습니다. 하지만 IE10 이하 버전을 지원해야 한다면 float를 사용해야 합니다.

팁:Flexible Box Layout Module에 대한更多信息를 알고 싶다면, 우리의 CSS Flexbox 튜토리얼。

이 예제에서는 두 열을 다른 너비로 생성할 것입니다:

예제

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

직접 시도해보세요

이 예제에서는 다음과 같은 것을 생성할 것입니다:응답형두 열 레이아웃:

예제

/* 응답형 레이아웃 - 스크린 너비가 600px 미만이면 두 열을 가로로 배치하지 않고 쌓아넣습니다 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

직접 시도해보세요

관련 페이지

튜토리얼:CSS 웹 레이아웃

튜토리얼:CSS 응답형 웹 디자인