목차
column-width 예제 - 컬럼 너비 설정 column-width 정의 column-width 구문 column-width 예제 - 컬럼개수 3개 설정 column-width 예제 - 컬럼 간 간격 설정 column-width 예제 - 컬럼 간 경계 짓기
column-width 예제 - 문단의 컬럼 너비 설정
<style>
.hz {column-width: 100px;}
</style>
<div class="hz">다수의 텍스트 코드</div>
결과보기
column-width 정의
문단의 컬럼(= 열) 폭을 지정.
1.
컬럼 수는 요소 전체의 모든 콘텐츠를 표시하는 데 필요한 최소 열 수임.
2.
유연한 속성이라, 화면 해상도 크기에 따라 컬럼 개수 유동적으로 변함 .
※ 위 예제의 결과보기 클릭해서 화면 사이즈 조정해보시면 알 수 있음.
※ 해상도에 상관없이 컬럼 개수 고정하려면, column-count 속성 이용.
3.
기본값: auto
상속여부: X
애니효과: O
CSS버전: CSS3
JS구문: object .style.columnWidth ="100px"
4.
IE10 이상 주요 최신 브라우저 모두 지원 .
5. cf.
column-count 속성 - 컬럼 개수 고정.
column-gap 속성 - 컬럼 간격 지정.
column-rule 속성 - 컬럼 구분 막대
column-width 구문
selector {column-width: auto|length |initial|inherit;}
[속성값]
auto
컬럼 너비를 브라우저가 자동 결정. (기본값)
length
컬럼 너비 직접 지정.
※ 컬럼 개수는 콘텐츠를 모두 보여주는데 필요한 최소 개수가 됨.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
column-width 예제 - 컬럼개수 3개 설정
<style>
.hz {column-count : 3;}
</style>
<div class="hz">다수의 텍스트 코드</div>
결과보기
column-width 예제 - 컬럼 간 간격 설정
<style>
.hz {
column-count : 3;
column-gap : 50px;
}
</style>
<div class="hz">다수의 텍스트 코드</div>
결과보기
column-width 예제 - 컬럼 간 경계 짓기
<style>
.hz {
column-count : 3;
column-gap : 50px;
column-rule : 10px double red;
}
</style>
<div class="hz">다수의 텍스트 코드</div>
결과보기
