• Q&A
  • 회원가입
  • 로그인

[column] CSS - column-width 속성 - 문단 컬럼 너비 (= column-width속성 = 컬럼위드스 속성)

목차
  1. column-width 예제 - 컬럼 너비 설정
  2. column-width 정의
  3. column-width 구문
  4. column-width 예제 - 컬럼개수 3개 설정
  5. column-width 예제 - 컬럼 간 간격 설정
  6. 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>

 

결과보기


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

찾아주셔서 감사합니다. Since 2012