CSS

[grid] CSS - gap 속성(C) - (행/열) 사이의 간격 지정 (= gap속성 =갭속성) ※ (그리드/플렉스/컬럼) 간격

목차

  1. gap 예제 - grid 경우, (행/열) 사이의 간격 지정
  2. gap 정의
  3. gap 구문
  4. gap 예제 - flex 경우, (행/열) 사이의 간격 지정
  5. gap 예제 - column 경우, (열) 사이의 간격 지정

 

gap 예제 - grid 경우, (행/열) 사이의 간격 지정

 

<style> 

.grid-box {

  border: 1px solid gray;

  background-color: mintcream;

  display: grid;

  grid-template-columns: auto auto auto;

  gap: 30px;

}

.grid-box > div {

  padding: 10px 20px;

  border: 1px solid black;

  background-color: lightgreen;

  text-align:center;

}

</style>


<div class="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>

 

결과보기

 

gap 정의

 

(grid / flex) 레이아웃의 "행/열" 사이의 간격이나 (column) 시스템에서 (열) 사이의 간격을 지정.

 


 

1.


2.  
  • 기본값: normal normal
  • 상속여부: X
  • 애니가능: O
  • CSS버전: CSS Box Alignment Module Level 3
  • JS구문: object.style.gap="25px 50px"

3. 

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

 

 

gap 구문

 

selector {gap: row-gap column-gap|initial|inherit;}

 


[속성값]

 

row-gap

행간의 간격

column-gap
열간의 간격 (※ row-gap 값과 동일 시, 생략 가능.)

initial

이 속성의 기본값 사용.

inherit
부모요소의 속성값 상속

 

PS. row-gapcolumn-gap 값 동일 시, 1개만 적어됨 (예) gap: 50px;

 

gap 예제 - flex 경우, (행/열) 사이의 간격 지정

 

<style>

#flex-box {

  border: 1px solid silver;

  background-color: mintcream;

  display: flex;

  flex-wrap: wrap;

  gap: 20px 70px;

}

#flex-box > div {

  border: 1px solid black;

  width: 10%;

  aspect-ratio: 2;

  padding: 10px;

  background-color: lightgreen;

  text-align:center;

}

</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>9</div>

</div>


결과보기

 

gap 예제 - column 경우, (열) 사이의 간격 지정

 

<style>

#column-box {

  border: solid black 1px;

  background-color: mintcream;

  columns: 3;

  gap: 25px;

}

</style>


<div id="column-box">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus dui. Duis mollis dictum eros id elementum. Nunc et gravida tortor. Suspendisse ut ornare ex, quis eleifend nibh. Cras cursus ornare est, vitae imperdiet sapien tempus egestas. Maecenas vel molestie velit. Aliquam consequat, tortor eget interdum feugiat, dolor urna finibus erat, ut scelerisque nisi est ac nibh. Vestibulum convallis mauris ipsum, non suscipit purus vestibulum vitae. Suspendisse massa augue, laoreet sed euismod ac, congue eu ex. Curabitur sem erat, tempus at magna eu, vestibulum mollis purus. Integer posuere dapibus efficitur.

</div>


결과보기



분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인