[CSS] gap

CSS의 gap 속성: Flexbox 또는 CSS Grid 등의 레이아웃 모델에서 요소 사이의 간격을 정의하는 데 사용됩니다. 기본적으로 gap 속성은 요소 간의 공간을 지정합니다.

 

.container {
  display: flex; /* 또는 display: grid; */
  gap: 20px; /* 요소 사이의 간격을 20px로 지정 */
}

 

위의 코드에서 display: flex 또는 display: grid를 사용하여 레이아웃 모델을 정의하고, gap 속성을 사용하여 요소 간의 간격을 지정합니다. 이 때, gap 속성은 row-gap과 column-gap으로도 구체적으로 지정할 수 있습니다.

 

gap 속성은 Flexbox 또는 CSS Grid 등 레이아웃 모델에서 요소를 배치할 때, 일관된 간격을 적용하고자 할 때 유용하게 사용됩니다. 이를 통해 요소의 크기와 배치를 자유롭게 조절할 수 있고, 코드의 가독성과 유지보수성을 높여줄 수 있습니다.