[column] CSS - column-rule-width 속성 - 컬럼구분자 너비 지정 (= 컬럼구분바 두께 = column-rule-width속성 = 컬럼룰위드스속성)

1. column-rule-width 예제 - 컬럼구분자 너비 지정
2. column-rule-width 정의
3. 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.

• column-rule-style 속성은 필수이나, column-rule-width 속성과 column-rule-color 속성은 선택임.
• column-rule 속성으로 일괄지정 가능.

 

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) - 기본값

 

thin

얇은 두께 (1px)

 

thick

굵은 두께 (5px)

 

length

px, cm, % 등 길이 단위값 (예) 5px 

 

initial

이 속성의 기본값을 사용.

 

inherit

부모요소의 속성값을 상속.

※ 주의

• none : 이런 속성값 존재 X
• 컬럼구분자 없애려면, 숫자 0 사용(예: column-rule-width:0;)하거나 column-rule-style:none 사용.