[column] CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)

1. columns 예제 - (컬럼너비/컬럼개수) 일괄 지정
2. columns 정의
3. columns 구문

columns 예제 - (컬럼너비/컬럼개수) 일괄 지정

 

<style> 

.hz1 {

  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */

  -moz-columns: 100px 3; /* Firefox */

  columns: 100px 3;

}

.hz2 {

  -webkit-columns: 50px 4; /* Chrome, Safari, Opera */

  -moz-columns: 50px 4; /* Firefox */

  columns: 50px 4;

}

</style>

<h2>컬럼최소너비:100px, 가로3개</h2>

<div class="hz1">

<p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리</p>

</div>

<h2>컬럼최소너비:50px, 가로4개</h2>

<div class="hz2">

<p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리</p>

</div>

결과보기

columns 정의

 

컬럼너비와 컬럼개수를 일괄 지정하는 단축 속성.

• column-width 속성 - 컬럼 최소 너비 지정.
• column-count 속성 - 컬럼 최대 개수 지정.

 

---

 

1.

• column-width 속성은 최소값 설정이라서, 해상도가 작어지면 컬럼 최소 너비 확보 위해서 컬럼 개수 줄여서 해당 너비를 확보함.
• column-count 속성은 최대값 설정이라서, 해상도가 아무리 커져도 지정 컬럼 개수 이상 안 늘어남. 그러나, 해상도가 작아지면 지정된 column-width 확보 위해 컬럼 개수가 무시되고 점점 자동으로 줄어듦.
• columns 속성을 사용하면 미디어쿼리 사용 않고도 반응형 레이아웃 가능.

 

2.

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

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

단, 구형 브라우저 경우, -webkit- -moz- 등 접두사 필요.

 

4. MDN columns 예제보기

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

 

columns 구문

 

selector {columns: auto|column-width column-count|initial|inherit;}

 

---

[속성값]

 

auto

컬럼너비와 컬럼개수를 브라우저가 자동 결정. (기본값)

 

column-width  column-count

컬럼너비 컬럼개수를 각각 띄어쓰기로 지정. (※ 둘 중 하나만 지정 가능.)

 

initial

이 속성의 기본값을 사용.

 

inherit

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