멀티 컬럼 요소의 컨텐트를 채우는 방식을 지정합니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- balance
사용법
column-fill: auto;
object.style.columnFill = "auto"
속성
- auto
- 컬럼 순서대로 내용을 채웁니다.
- balance
- 컬럼들의 내용을 서로 균일하게 채웁니다.
column-fill
column-span
멀티 컬럼 요소 안에서 여러 컬럼에 걸친 요소를 만듭니다. 블록 요소에 적용할 수 있지만, 플로팅 요소(float)와 절대 위치(position: absolute)로 지정된 요소에는 적용되지 않습니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- none
사용법
column-span: all;
object.style.columnSpan = "all"
속성
- none
- 일반적인 방식으로 표현됩니다.
- all
- 모든 컬럼들에 걸쳐진 요소로 나타냅니다.
break-inside
멀티 컬럼 요소의 나누기 방식을 지정합니다. 블록 요소에 적용할 수 있습니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- auto
사용법
break-inside: avoid;
속성
- auto
- 페이지/컬럼 나누기를 강제하지도 금지하지도 않습니다.
- avoid
- 요소의 중간에서 페이지/컬럼을 나누지 않습니다.
- avoid-page
- 요소의 중간에서 페이지를 나누지 않습니다.
- avoid-column
- 요소의 중간에서 컬럼을 나누지 않습니다.
break-after
멀티 컬럼 요소의 나누기 방식을 지정합니다. 블록 요소에 적용할 수 있습니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- auto
사용법
break-after: always;
속성
- auto
- 페이지/컬럼 나누기를 강제하지도 금지하지도 않습니다.
- always
- 항상 요소의 뒤에서 페이지/컬럼을 나눕니다.
- avoid
- 요소의 뒤에서 페이지/컬럼을 나누지 않습니다.
- left
- 요소의 뒤에서 나누고 페이지/컬럼을 나누고 다음 컬럼이 왼편에 오도록 합니다.
- right
- 요소의 뒤에서 나누고 페이지/컬럼을 나누고 다음 컬럼이 오른편에 오도록 합니다.
- page
- 요소의 뒤에서 항상 페이지를 나눕니다.
- column
- 요소의 뒤에서 항상 컬럼을 나눕니다.
- avoid-page
- 요소의 뒤에서 페이지를 나누지 않습니다.
- avoid-column
- 요소의 뒤에서 컬럼을 나누지 않습니다.
break-before
멀티 컬럼 요소의 나누기 방식을 지정합니다. 블록 요소에 적용할 수 있습니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- auto
사용법
break-before: always;
속성
- auto
- 페이지/컬럼 나누기를 강제하지도 금지하지도 않습니다.
- always
- 항상 요소의 앞에서 페이지/컬럼을 나눕니다.
- avoid
- 요소의 앞에서 페이지/컬럼을 나누지 않습니다.
- left
- 요소의 앞에서 나누고 페이지/컬럼을 나누고 다음 컬럼이 왼편에 오도록 합니다.
- right
- 요소의 앞에서 나누고 페이지/컬럼을 나누고 다음 컬럼이 오른편에 오도록 합니다.
- page
- 요소의 앞에서 항상 페이지를 나눕니다.
- column
- 요소의 앞에서 항상 컬럼을 나눕니다.
- avoid-page
- 요소의 앞에서 페이지를 나누지 않습니다.
- avoid-column
- 요소의 앞에서 컬럼을 나누지 않습니다.
column-rule
멀티 컬럼 요소의 각 컬럼을 구분하는 선을 지정합니다. column-rule-width, column-rule-style, column-rule-color에 대한 단축 프로퍼티입니다.
생략된 값은 각각의 기본 값이 적용됩니다.
멀티 컬럼 요소에 적용할 수 있습니다.
생략된 값은 각각의 기본 값이 적용됩니다.
멀티 컬럼 요소에 적용할 수 있습니다.
- CSS Level
- CSS 3
- 상속
- 아니오
사용법
column-rule: 3px outset #ff00ff;
object.style.columnRule = "3px outset #ff00ff"
속성
- <column-rule-width> <column-rule-style> <column-rule-color>
- 컬럼 구분 선을 지정합니다.
column-rule-width
멀티 컬럼 요소의 구분선 두께를 지정합니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- medium
사용법
column-rule-width: 1px;
object.style.columnRuleWidth = "thin";
속성
- <border-width>
- 컬럼 구분자의 두께를 지정합니다.
column-rule-style
컬럼 구분자의 스타일을 지정합니다.
- CSS Level
- CSS 3
- 상속
- 아니오
- 기본값
- none
사용법
column-rule-style: dotted;
object.style.columnRuleStyle = "dotted"
속성
- <border-style>
- 컬럼 구분자의 스타일을 지정합니다.
column-gap
columns
멀티 컬럼 요소를 지정합니다. 멀티 칼럼은 워드프로세서의 다단과 같습니다. column-width, column-count에 대한 단축 프로퍼티 입니다.
- CSS Level
- CSS 3
- 상속
- 아니오
사용법
columns: 100px 3;
object.style.columns = "100px 3"
속성
- <column-width> <column-count>
- 컬럼 너비와 갯수를 지정합니다.
예
<div style="border: 1px solid #666; -webkit-columns:120px 3;-moz-columns:120px 3;columns:120px 3; -webkit-column-rule: 1px solid; -moz-column-rule: 1px solid; column-rule: 1px solid;">
동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
</div>
동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.
column-width
피드 구독하기:
글 (Atom)