• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 정의

 

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

 


 

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

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

 


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

분류 제목
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
flex CSS - justify-content 속성(C) ★★★ - 기본축에서 아이템 정렬. (= justify-…
flex CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성… 2
flex CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉…
flex CSS - align-content 속성(C) ★★ - 줄바꿈 된 경우, 교차축 기준으로 라인 정렬. (= …
flex CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…
flex CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…
flex CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…
responsive CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge…
responsive CSS - RES Intro - (반응형 웹디자인 소개)
responsive CSS - Viewport ★ - 사용자에게 보이는 웹페이지 영역 (= 메타태그 뷰포트 ※ 반응형 필수조건 …
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
11/25
목록
찾아주셔서 감사합니다. Since 2012