IT 강좌 CSS 기초 030_다단 레이아웃 Columns

다단 레이아웃 Columns

Columns(열)는 텍스트 레이아웃에서 다단을 만드는 데 사용되는 속성입니다. 컨테이너의 열 수와 열 너비를 설정하여 텍스트 내용이 다단 간에 자동으로 흐르도록 합니다. Columns(열)는 모든 유형의 콘텐츠에 적용되지 않으며, 주로 텍스트 콘텐츠의 다단 레이아웃을 처리하는 데 사용되며, 전체 페이지의 레이아웃이 아닙니다.

column-count： 열의 개수를 지정합니다.
column-width： 각 열의 너비를 지정합니다.
column-gap： 열 사이의 간격을 지정합니다.
column-rule： 열 사이의 규칙 선(구분선)을 설정합니다.

예제:

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>이것은 단락 111입니다, 이것은 단락 111입니다, 이것은 단락 111입니다.</p>
3
        <p>이것은 단락 222입니다, 이것은 단락 222입니다, 이것은 단락 222입니다.</p>
4
        <p>이것은 단락 333입니다, 이것은 단락 333입니다, 이것은 단락 333입니다.</p>
5
    </div>

효과:

예제 효과

다단 레이아웃 Columns

댓글