목차
column-rule-style 예제 - 컬럼구분자 모양 지정
column-rule-style 정의
column-rule-style 구문
column-rule-style 예제 - 컬럼구분자 모양 지정
<style>
.hz {
column-count: 3;
column-gap: 50px;
column-rule-style: dotted;
column-rule-color: red;
}
</style>
<div class="hz">
홈짱닷컴 (Homzzang.com)은 2012년 오픈한 코딩 매뉴얼 사이트입니다. 현재는 HTML, CSS, JavaScript, jQuery, PHP, SQL 등 그누보드 커스텀에 필요한 언어와 그외 각종 프로그래밍 언어를 제공 중입니다. 그누보드4, 그누보드5, 배추빌더, 아미나, 나리야, 영카트 등 다양한 빌더 커스텀에 필요한 매뉴얼도 제공 중입니다. 매일 오셔서 조금씩 공부하시다 보면 금방 회원 님도 코딩 고수가 되실 수 있을 겁니다. 오늘도 좋은 하루 되시길 바랍니다.
</div>
결과보기
column-rule-style 정의
컬럼구분자 모양 지정.
1.
2.
기본값: none
상속여부: X
애니가능: X
CSS버전: CSS3
JS구문: object .style.columnRuleStyle ="dotted";
3.
IE10 이상 주요 최신 브라우저 모두 지원.
단, 구형 브라우저 경우, (-webkit-, -moz-) 접두어 필요.
4. MDN column-rule-style 예제보기https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style
column-rule-style 구문
selector {column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;}
[속성값]
none 컬럼구분자 사용 X (기본값)
hidden 있지만 눈에 안보이는 컬럼구분자.
dotted ★ 점선 모양
dashed ★ - (대쉬 = 막대바) 모양
solid ★
2px 정도의 굵은 두께 모양
double ★
두 줄 모양
groove
3D 움푹 파인 홈 모양 (※ solid 값과 비슷)
ridge
3D 위로 올라온 것 같은 모양 (※ solid 값과 비슷)
inset
3D 안으로 들어간 느낌의 모양 (※ solid 값과 비슷)
outset
3D 밖으로 나온 느낌의 모양 (※ solid 값과 비슷)
initial 이 속성의 기본값을 사용.
inherit
부모요소의 속성값을 상속.
주소 복사
랜덤 이동