CSS3기본 튜토리얼

CSS3 상자 크기(box-sizing)CSS3 애니메이션(Animations)

CSS3 다중 열 레이아웃

CSS3요소의 텍스트 내용을 다중 열로 나눌 수 있습니다.

다중 열 레이아웃 생성

CSS3다중 열 레이아웃 모듈이 도입되었습니다. 이는 여러 열 레이아웃을 간단하고 효과적으로 생성하는 데 사용됩니다. 이제, 잡지와 신문에서 볼 수 있는 레이아웃을 풀리언트 없이 생성할 수 있습니다. 이는 CSS를 사용하여 생성된 예제입니다.3다중 열 레이아웃 기능은 일부 텍스트를 세 열로 나누는 간단한 예제입니다.

예제

p {
　　　　-webkit-column-count:　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

테스트를 보세요‹/›

열 수나 너비를 설정합니다

CSS 속성, column-count와 column-width은 어떤 열이 표시되고 얼마나 많은 열이 표시되는지 지정합니다. column-count 속성은 multicol 요소 내의 열 수를 설정하며, column-width 속성은 필요한 열 너비를 설정합니다.

예제

p {
　　　　-webkit-column-width:　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

테스트를 보세요‹/›

주의:column-width는 열의 최적 너비를 지정합니다. 하지만, 실제 열 너비는 사용 가능한 공간에 따라 넓어지거나 좁아질 수 있습니다. 이 속성은 column과 혼동되지 않아야 합니다.-count 속성과 함께 사용할 수 있습니다。

설정

column 속성을 사용하여 열 간격을 설정할 수 있습니다.-gap 속성은 열 간의 간격을 지정합니다. 각 열 간에 동일한 간격이 적용됩니다. 기본 간격은 normal로, 이는 다음과 같습니다:1em.

예제

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

테스트를 보세요‹/›

열 규칙을 설정

column 속성을 사용하여도 됩니다.-rule 속성은 각 열 간에 선을 추가하며, 단일 선언에서 규칙의 너비, 스타일, 색상을 설정하는 줄임말 속성입니다. 이 column-rule 속성은 border와 outline과 같은 값을 사용합니다.

예제

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px solid red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px solid red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px solid red;
}

테스트를 보세요‹/›

주의:열 규칙의 너비는 열 상자의 너비에 영향을 미치지 않지만, 열 규칙의 너비가 간격보다 크다면 인접한 열 상자는 그 규칙과 겹칩니다.

CSS3다중 열 속성

아래 표는 모든 다중 열 속성을 간단히 요약합니다：

속성	설명
column-count	다중 열 요소 내의 열 수를 지정합니다.
column-fill	내용이 열을 건너뛰는 방식을 지정합니다.
column-gap	열 간의 간격을 지정합니다.
column-rule	각 열 간에 그려질 선이나 레이어를 지정합니다.
column-rule-color	열 간의 규칙적인 색상을 지정합니다.
column-rule-style	열 간의 규칙적인 스타일을 지정합니다.
column-rule-width	열 간의 규칙적인 너비를 지정합니다.
column-span	요소가 얼마나 많은 열을 건너뛰는지 지정합니다.
column-width	열의 최적 너비를 지정합니다.
columns	동시에 설정하는 데 사용됩니다.column-width와column-count속성의 줄임말 속성입니다.

CSS3 상자 크기(box-sizing)CSS3 애니메이션(Animations)