[column] CSS - Multiple Columns - (멀티 컬럼 개괄)

1. Multi Column 예제
2. Multi Column 속성 종류

Multi Column 예제

 

<style> 

.hz {

  column-count: 3;

  column-gap: 50px;

  column-rule: 10px double gray;

  column-width:100px;

  height:200px; 

  column-fill: auto;

}

 .hz h2 {

    column-span:all;        

}    

</style>

<div class="hz">

    <h2>홈짱닷컴 (Homzzang.com) 소개</h2>    

홈짱닷컴 (Homzzang.com)은 2012년 오픈한 코딩 매뉴얼 사이트입니다. 현재는 HTML, CSS, JavaScript, jQuery, PHP, SQL 등 그누보드 커스텀에 필요한 언어와 그외 각종 프로그래밍 언어를 제공 중입니다. 그누보드4, 그누보드5, 배추빌더, 아미나, 나리야, 영카트 등 다양한 빌더 커스텀에 필요한 매뉴얼도 제공 중입니다. 매일 오셔서 조금씩 공부하시다 보면 금방 회원 님도 코딩 고수가 되실 수 있을 겁니다. 오늘도 좋은 하루 되시길 바랍니다.

</div> 

 

결과보기

Multi Column 속성 종류

※ 아래 속성은 IE10 이상 주요 최신 브라우저 모두 지원.

• column-count 속성 - 컬럼 개수 지정.
• column-fill 속성 - 컬럼 채우는 방법 지정.
• column-gap 속성 - 컬럼 사이의 간격 지정.
• column-rule 속성 - 모든 column-rule-* 속성을 일괄 지징.
• column-rule-color 속성 - 컬럼구분바 색상 지정.
• column-rule-style 속성 - 컬럼구분바 모양 지정.
• column-rule-width 속성 - 컬럼구분바 너비 지정.
• column-span 속성 - 요소가 확장되어야 하는 컬럼 개수지정.
• column-width 속성 - 컬럼 너비 지정.
• columns 속성 - column-width와 column-count 속성 일괄 지정.