CSS
열

통사론

• 열 개수 : 자동 | 숫자 | 상속 | 초기 | 설정 해제;
• column-width : 자동 | 길이;
• column : [column-width] | [column-count];
• column-span : none | all | 상속 | initial | unset;
• column-gap : normal | length | 상속 | initial | unset;
• column-fill : auto | balance | 상속 | intial | unset;
• column-rule-color : color | 상속 | initial | unset;
• column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | 상속 | initial | unset;
• column-rule-width : thin | medium | thick | length | 상속 | initial | unset;
• column-rule : [column-rule-width] | [columm-rule-style] | [column-rule-color];
• break-after : auto | always | left | right | recto | verso | page | column | region | avoid | avoid-page | avoid-column | avoid-region;
• break-before : auto | always | left | right | recto | verso | page | column | region | avoid | avoid-page | avoid-column | avoid-region;
• break-inside : auto | avoid | avoid-page | avoid-column | avoid-region;

간단한 예 (열 개수)

CSS 다중 열 레이아웃을 사용하면 여러 열의 텍스트를 쉽게 만들 수 있습니다.

암호

<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

.multi-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

결과

열 너비

column-width 속성은 최소 열 너비를 설정합니다. column-count 가 정의되어 있지 않으면 브라우저는 사용 가능한 너비에 맞는만큼의 열을 만듭니다.

암호:

<div id="multi-columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

.multi-columns {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

결과