• 회원가입
  • 로그인
  • 구글아이디로 로그인

[column] CSS - column-rule-style 속성 - 컬럼구분자 모양 지정 (= 컬럼구분바 생김새 = column-rule-style속성 = 컬럼룰스타일속성)

목차
  1. column-rule-style 예제 - 컬럼구분자 모양 지정
  2. column-rule-style 정의
  3. 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

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
column CSS - Multiple Columns - (멀티 컬럼 개괄)
column CSS - column-count 속성 - 컬럼 개수 지정 (= 요소 안 텍스트를 지정 컬럼개수로 구분 = …
column CSS - column-fill 속성 - 컬럼 채우기 방식 지정 (= column-fill속성 = 컬럼필속성…
column CSS - column-gap 속성 - 컬럼간의 간격 지정 (= column-gap속성 = 컬럼갭속성)
column CSS - column-rule 속성 - 컬럼구분자 스타일 일괄지정 (= 컬럼구분바 단축속성 = column…
column CSS - column-rule-color 속성 - 컬럼구분자 색상 지정 (= 컬럼구분바 색깔 = colum…
column CSS - column-rule-style 속성 - 컬럼구분자 모양 지정 (= 컬럼구분바 생김새 = colu…
column CSS - column-rule-width 속성 - 컬럼구분자 너비 지정 (= 컬럼구분바 두께 = colum…
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
목록
찾아주셔서 감사합니다. Since 2012