CSS 컬럼 간격 속성
정의와 사용법
column-gap 속성은 칼럼 간의 간격을 정의합니다.
비고:칼럼 간에 간격이 설정되면 열 규칙그럼 간격 중간에 표시됩니다.
또한 참조:
CSS3 가이드:CSS3 다중 열
HTML DOM 참조 가이드:columnGap 속성
CSS 문법
column-gap: length|normal;
속성 값
| 값 | 설명 | 테스트 |
|---|---|---|
| length | 칼럼 간의 간격을 지정된 길이로 설정합니다. | 테스트 |
| normal | 칼럼 간의 간격을 일반 간격으로 정의합니다. W3C가 제안하는 값은 1em입니다. | 테스트 |
기술 세부 사항
| 기본값: | normal |
|---|---|
| 상속성: | no |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.columnGap="40px" |
더 많은 예제
- Column-count
- div 요소 내의 텍스트를 세 열로 나눕니다.
- Column-rule
- 칼럼 간의 너비, 스타일, 그리고 색상을 정의합니다.
브라우저 지원
표에 있는 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
webkit- 또는 moz-로 시작하는 숫자는 프리픽스를 사용하는 첫 번째 버전을 의미합니다.
| 속성 | Chrome | IE / Edge | Firefox | Safari | 오페라 |
|---|---|---|---|---|---|
| 다중 열에서 | 50 | 10 | 52 | 10 | 37 |
| 그리드에서 | 66 | 16 | 61 | 12 | 53 |
| 협력 프레임에서 | 84 | 84 | 63 | 14.1 | 70 |
