목차
column-gap 예제 - 멀티 컬럼 경우, 컬럼간 간격 지정 column-gap 정의 column-gap 구문 column-gap 예제 - display:flex 경우, 컬럼간 간격 지정 column-gap 예제 - display:grid 경우, 컬럼간 간격 지정
column-gap 예제 - 멀티 컬럼 경우, 컬럼간 간격 지정
<style>
.hz {
column-count : 3;
column-gap: 40px;
}
</style>
<div class="hz">
홈짱닷컴 (Homzzang.com)은 2012년 오픈한 코딩 매뉴얼 사이트입니다. 현재는 HTML, CSS, JavaScript, jQuery, PHP, SQL 등 그누보드 커스텀에 필요한 언어와 그외 각종 프로그래밍 언어를 제공 중입니다. 그누보드4, 그누보드5, 배추빌더, 아미나, 나리야, 영카트 등 다양한 빌더 커스텀에 필요한 매뉴얼도 제공 중입니다. 매일 오셔서 조금씩 공부하시다 보면 금방 회원 님도 코딩 고수가 되실 수 있을 겁니다. 오늘도 좋은 하루 되시길 바랍니다.
</div>
결과보기
column-gap 정의
(flex / grid / multi 컬럼 ) 레이아웃에서 컬럼간 간격의 크기 지정.
1.
column-rule 속성 지정 시, 컬럼 간 간격 중간에 효과 나타남.
2.
기본값: normal
상속여부: X
애니가능: O
CSS버전: CSS Box Alignment Module Level 3
JS구문: object .style.columnGap ="50px";
3. MDN column-gap 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
column-gap 구문
selector {column-gap: length |normal|initial|inherit;}
length
컬럼 간격을 지정 단위(예: px, em, % 등) 너비로 지정.
normal
컬럼간 기본 너비 (W3C 제안: 1em) 사용. (기본값)
initial
이 속성의 기본값으로 사용.
inherit
부모요소의 속성값을 상속.
column-gap 예제 - display:flex 경우, 컬럼간 간격 지정
<style>
#flex-box {
border: 1px solid gray;
background-color: yellow;
display: flex;
flex-wrap : wrap;
column-gap: 30px;
}
#flex-box > div {
border: 1px solid black;
width: 10%;
aspect-ratio : 2;
padding: 10px;
background-color: lightpink;
}
</style>
<div id="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
결과보기
column-gap 예제 - display:grid 경우, 컬럼간 간격 지정
<style>
#grid-box {
border: 1px solid gray;
background-color: yellow;
display: grid;
grid-template-columns : repeat(3,1fr);
column-gap: 30px;
}
#grid-box > div {
border: 1px solid black;
padding: 10px;
background-color: lightpink;
}
</style>
<div id="grid-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
결과보기
