<HTML5+CSS3>다단으로 편집하기

columm-width-단의 너비 지정하기

-한 화면을 여러 개의 단으로 구성할 때, 단의 너비를 고정해 놓고 화면을 분할할 수 있다. 너비 값을 바꿀 수 없기 때문에 화면이 커지면 단의 개수가 많아진다.

속성 값

(1) 값 :단 너비를 직접 지정합니다.

(2) auto : 단의 개수 colum-count같은 다른 속성을 이용해 단의 너비를 결정합니다.

 

ex) div { column-width:80 px -> 각단의 너비 80px

}

 

column-count속성 – 단의 개수 지정하기

-다단 화면을 만들 때 단의 개수를 먼저 정해놓고 화면을 분할할 수도 있다.

속성 값

(1) 개수 :0보다 큰 값으로 콘텐츠가 들어갈 단의 개수를 지정

(2) auto : 단의 너비 column-width 같은 다른 속성으로 단의 개수를 정합니다.

 

단의 개수를 3개로 고정한 예.

ex) div { column-count : 3 ; ->단의개수 3개

}

 

단의 개수를 3개로하고 너비를 auto로 지정한 것

ex) div { column-width : auto;

column-count:3 ;

}

 

column 너비와 카운트 속성을 묶어서 columns속성으로  지정한 예

ex) div { width:620px;

columns:auto 3;

}

%실제 소스를 작성할 때는 –webkit-column-width, -moz-column-width처럼 접두사를 붙여서 사용합니다.

 

column-gap 속성 – 단과 단 사이 여백 지정하기

-둘 이상의 단으로 구성할 경우 단과 단 사이의 여백을 지정하는 속성입니다.

속성 값

(1) 값 :단과 단 사이의 여백을 숫자로 표시합니다.

(2) normal : 자동으로 여백을 지정합니다. W3C에서 권장하는 여백은 1em입니다.

 

ex) div { column-gap:normal;} 단과 단 사이 여백 자동

ex) div {column-gap:3px; } 단과 단 사이 여백 3px

column-rule속성 – 구분선의 색상,스타일,너비 지정하기

-이 속성에는 color,style,width,rule이 있다. 단과 단 사이에 구분선을 표시할 수 있다. 이때 구분선의 색상,스타일,너비를 ᄄᆞ로 지정할 수 있다. 구분선의 속성들을 한꺼번에 표시하는 속성은 column-rlue이다.

 

각 속성의 속성 값들

(1) color : 색상 값;

(2) style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset;

(3) width: thin, medium, thick, 크기 값;

(4) rule : column-rule-width 값,column-rule-style 값, column-rule-color 값;

 

단 사이에 1px 두께의 회색 점선으로 된 구분선을 추가하는 것이다.

ex) div { column-rule: 1px dotted #ccc; } ->회색 점선의 구분선

 

단사이에 여백을 1em, 구분색:검정, 스타일:실선 크기는 1px 예이다

ex)div { column-gap:1em ; ->여백 1em

column-rule-color:black; ->검은색 선

column-rule-style:soild; ->실선으로 된 구분선

column-rule-width:1px; ->구분선의 크기 1px

}

 

다단 위치 지정하기

-웹 문서의 경우 내비,사이드 바 ,푸터 등 역역은 제외하고 실제 콘텐츠 부분만 다단으로 구성한다. 어디서부터 시작할지 지정하는 속성이 필요로 한다.

페이지나 단을 나눌 때 위치 지정 속성 :breack-before,breack-after,breack-inside

특정 요소 앞부분에서 단을 나누는 속성: breack-before:column

특정 요소 뒷부분에서 단을 나누는 속성: breack-after:column

앞이나 뒤에서 강제로 단을 나누지 않게하는 속성:breack-before:avoid-column OR breack-after:avoid-column

 

%breack-inside:column과 breack-insidre:avoid-column은 해당 요소 안에서 강제로 단을 나누거나 단이 나뉘지 않게 하는 속성이다.

 

 

column-span속성 – 여러 단을 하나로 합치기

-여러 개로 나누어진 단의 흐름을 따라가다가 중간에 단을 합칠 때 이 속성을 사용한다.

 

속성 값

(1) 1 : 단 하나만 합치는 것이므로 합치지 않는 것과 같다. 기본 값

(2) all : 전체 단을 하나로 합쳐서 표현. 단의 일부만 합칠 수는 없다.

 

텍스트 영역에 여러개로 나누어진 단을 column-sppan속성으로 합치는 것이다

ex) p { column-span: all; } ->전체 단을 하나로 합쳐서 표시