CSS 컬럼 룰 스타일 속성

정의와 사용법

column-rule-style 속성은 칼럼 간의 스타일 규칙을 정의합니다.

다른 참고:

CSS3 가이드:CSS3 다중 열

HTML DOM 참조 가이드:columnRuleStyle 속성

예제

칼럼 간의 색상 규칙을 설정합니다:

div {
  column-rule-style: dotted;
}

자신이 직접 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

속성 값

값 설명 테스트
none 규칙이 없는 것을 정의합니다. 테스트
hidden 숨기는 규칙을 정의합니다. 테스트
dotted 점선 규칙을 정의합니다. 테스트
dashed 점선 규칙을 정의합니다. 테스트
solid 직선 규칙을 정의합니다. 테스트
double 둥근선 규칙을 정의합니다. 테스트
groove 3D grooved 규칙을 정의합니다. 이 효과는 너비와 색상 값에 따릅니다. 테스트
ridge 3D ridged 규칙을 정의합니다. 이 효과는 너비와 색상 값에 따릅니다. 테스트
inset 3D inset 규칙을 정의합니다. 이 효과는 너비와 색상 값에 따릅니다. 테스트
outset 3D outset 규칙을 정의합니다. 이 효과는 너비와 색상 값에 따릅니다. 테스트

기술 세부 사항

기본 값: none
상속성: no
버전: CSS3
JavaScript 문법: object.style.columnRuleStyle="dotted"

더 많은 예제

Column-count
div 요소 내의 텍스트를 세 열로 나눕니다.
Column-gap
div 요소 내의 텍스트를 세 열로 나누고, 열 사이의 간격을 30 픽셀로 설정합니다.
Column-rule
칼럼 간의 너비, 스타일 및 색상을 정의합니다.

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

带 -webkit- 또는 -moz-의 숫자는 프리퍼셜의 첫 번째 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
50.0
4.0 -webkit-		 10.0 52.0
2.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1