목차
- 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.
- 컬럼 수는 요소의 모든 콘텐츠를 표시하는 데 필요한 최소 컬럼 수임.
- column-width 속성은 유연한(flexible) 속성이라, 화면 해상도에 따라 컬럼 개수 유동적으로 변함. (즉, 해상도가 줄면서 지정 컬럼 너비 미달 시, 컬럼 개수 줄여서 해당 컬럼 너비를 확보함.)
- column-count 속성만 사용하면 해상도가 줄어도 컬럼 개수가 유지되는데, column-width 속성을 함께 사용하면 해상도 줄 때 지정 컬럼 너비를 유지하면서 컬럼 개수가 점점 줄어듦.
2.
- 기본값: auto
- 상속여부: X
- 애니가능: O
- CSS버전: CSS3
- JS구문: object.style.columnWidth="100px";
3.
IE10 이상 주요 최신 브라우저 모두 지원.
4. cf.
5. MDN column-width 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
column-width 구문
selector {column-width: auto|length|initial|inherit;}
[속성값]
auto
컬럼 너비를 브라우저가 자동 결정. (기본값)
length
컬럼 너비 직접 지정. (rem, em, px, ch 등 단위 사용 가능)
※ 컬럼 개수는 콘텐츠를 모두 보여주는데 필요한 최소 개수가 됨.
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>
결과보기
