목차
column-rule-width 예제 - 컬럼구분자 너비 지정
column-rule-width 정의
column-rule-width 구문
column-rule-width 예제 - 컬럼구분자 너비 지정
<style>
.hz {
column-count: 3;
column-gap: 50px;
column-rule-width: 5px;
column-rule-style: solid;
column-rule-color: red;
}
</style>
<div class="hz">
홈짱닷컴 (Homzzang.com)은 2012년 오픈한 코딩 매뉴얼 사이트입니다. 현재는 HTML, CSS, JavaScript, jQuery, PHP, SQL 등 그누보드 커스텀에 필요한 언어와 그외 각종 프로그래밍 언어를 제공 중입니다. 그누보드4, 그누보드5, 배추빌더, 아미나, 나리야, 영카트 등 다양한 빌더 커스텀에 필요한 매뉴얼도 제공 중입니다. 매일 오셔서 조금씩 공부하시다 보면 금방 회원 님도 코딩 고수가 되실 수 있을 겁니다. 오늘도 좋은 하루 되시길 바랍니다.
</div>
결과보기
column-rule-width 정의
컬럼구분자 너비(=두께) 지정.
1.
2.
기본값: medium
상속여부: X
애니가능: O
CSS버전: CSS3
JS구문: object .style.columnRuleWidth ="10px";
3.
IE10 이상 주요 최신 브라우저 모두 지원.
단, 구형 브라우저 경우, (-webkit-, -moz-) 접두어 필요.
4. MDN column-rule-width 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width
column-rule-width 구문
selector {column-rule-width: medium|thin|thick|length |initial|inherit;}
[속성값]
midium
중간 두께 (3px) - 기본값
thick
굵은 두께 (5px)
length
px, cm, % 등 길이 단위값 (예) 5px
inherit
부모요소의 속성값을 상속.
※ 주의
none : 이런 속성값 존재 X
컬럼구분자 없애려면, 숫자 0 사용(예: column-rule-width:0;)하거나 column-rule-style:none 사용.
주소 복사
랜덤 이동