[column] CSS - column-fill 속성 - 컬럼 채우기 방식 지정 (= column-fill속성 = 컬럼필속성)

1. column-fill 예제 - 컬럼 채우는 방식 지정
2. column-fill 정의
3. column-fill 구문

column-fill 예제 - 컬럼 채우는 방식 지정

 

<style> 

.hz {

  column-count: 3;

  height:200px;

}

.auto {

  column-fill: auto;

}

.balance {

  column-fill: balance;

}

</style>

<div class="hz auto">

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

</div>

<div class="hz balance">

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

</div>

 

결과보기

column-fill 정의

 

지정요소 안 텍스트를 각각의 컬럼에 균형있게 채울지 말지 지정.

 

---

 

1. 

컬럼 개수가 2개 이상 (예: column-count:2)인 요소에 height 속성값이 지정된 경우 컬럼 채우는 방식을 지정 가능.

 

2.

• 기본값: balance
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.columnFill="auto";

 

3. MDN column-fill 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill

 

column-fill 구문

 

selector {column-fill: balance|auto|initial|inherit;}

 

---

[속성값]

 

balance

각 컬럼에 텍스트를 균형있게 배분해 채움. (기본값)

• 열이 높이보다 커지는 것을 허용 X
• 콘텐츠를 수평으로 균등 배포하므로 각 열의 콘텐츠 실제 높이가 지정된 높이보다 짧을 수 있음.

 

auto

컬럼 높이에 도달할 때까지 채우고, 다음 컬럼을 채워나감.

• 반드시 모든 열을 채우거나 균등하게 채우는 건 아님.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값을 상속.