[column] CSS - column-gap 속성 - 컬럼간의 간격 지정 (= column-gap속성 = 컬럼갭속성)

1. column-gap 예제 - 멀티 컬럼 경우, 컬럼간 간격 지정
2. column-gap 정의
3. column-gap 구문
4. column-gap 예제 - display:flex 경우, 컬럼간 간격 지정
5. 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>

 

결과보기