CSS Gap이 웹 레이아웃을 향상시키기 위해 공간을 추가하는 방법

by

빠른 링크

주요 시사점

  • CSS 간격은 요소 사이의 간격을 정의하는 다목적 속성입니다.
  • gap은 두 값을 사용하여 행과 열 간격을 정의할 수 있는 바로가기 속성입니다.
  • gap은 Flexbox, Grid 및 Multi-column 레이아웃과 함께 사용할 수 있습니다.

CSS는 절대 위치 지정부터 그리드 기반 디자인까지 웹 페이지에 요소를 배치하는 다양한 방법을 제공합니다. 요소 주위와 요소 사이의 간격도 마찬가지로 중요하며, 다시 말하지만 옵션도 많습니다. 간격 속성은 공백을 도입하는 유용하고 다양한 방법이며 여러 가지 다른 레이아웃 구성표와 함께 작동합니다.

격차란 무엇인가?

CSS 간격은 디자인 레이아웃의 간격을 정의하는 데 도움이 되는 간단하면서도 필수적인 스타일 속성입니다. 요소에 공간을 제공하는 것은 즐겁고 효과적인 그래픽 디자인을 위해 적용해야 하는 구성의 황금률 중 하나입니다.

이 속성을 사용하여 세 가지 레이아웃 형식의 항목 사이 간격 크기를 지정할 수 있습니다.

모든 최신 브라우저는 여백 및 패딩과 같은 상자 모델 속성을 보완하는 간격 속성을 지원합니다.

CSS 간격 속성을 작성하는 방법

간격 속성의 기본 구문은 다음과 같습니다.

 gap: <row-gap> <column-gap>;

각 값은 길이나 백분율을 사용할 수 있으며 열 간격은 선택 사항입니다. 그렇지 않으면 단일 값이 행과 열 모두에 적용됩니다. 그래서:

 gap: 10em;

…행과 열 모두 현재 글꼴 크기의 10배만큼 간격이 있음을 의미합니다.

 gap: 20px 10%;

…20픽셀의 행 간격과 포함 요소 너비의 1/10인 열 간격을 생성합니다.

컨테이너 내의 요소가 아닌 레이아웃을 정의하는 컨테이너 요소에는 간격을 사용해야 합니다. 이 속성은 더 복잡하고 가변적인 간격보다는 항목 사이에 균일한 공간을 만드는 것을 목표로 합니다.

Flexbox에서 간격 사용

간격을 사용하여 Flex 레이아웃이 생성하는 행과 열 사이의 공간을 제어할 수 있습니다. 레이아웃에서 사용하는 플렉스 방향에 따라 행 간격 또는 열 간격이 적용되는지 여부가 결정됩니다.

기본적으로 일반 행 방향에서 Flex 컨테이너 내의 항목은 서로 옆에 표시됩니다. 따라서 이 간단한 CSS는 다음과 같습니다.

 .flex-layout {
    display: flex;
}
.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
}

다음 레이아웃을 생성합니다.

컨테이너 내의 각 항목은 간격에 패딩 및 여백과 같은 고전적인 상자 모델 속성을 사용합니다. 약간의 간격 추가:

 .flex-layout { gap: 20px; }

플렉스 아이템 사이의 공간은 늘어나지만 주변은 그렇지 않습니다.

Flex 레이아웃에서 항목을 래핑하여 열과 행 모두에 항목을 표시하는 경우 예를 들면 다음과 같습니다.

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
}

두 간격의 효과를 확인할 수 있습니다.

margin 및 justify-content와 같은 다른 속성이 항목 사이의 공간에 영향을 미칠 수 있다는 점을 항상 명심하세요. 간격에 영향을 줄 수 있는 다른 모든 속성을 명시적으로 제어하지 않는 한 간격을 최소값으로 생각하십시오.

그리드와 함께 간격 사용

그리드 레이아웃과 함께 간격을 사용할 수도 있습니다. 주요 차이점은 Grid가 2차원 레이아웃에 더 적합하기 때문에 일반적으로 행과 열 간격을 모두 지정하려고 한다는 것입니다.

Flex 레이아웃과 마찬가지로 Grid는 기본적으로 항목을 바로 옆에 표시하지만 패딩과 여백을 사용하여 각 항목 주위의 간격을 제어할 수 있습니다.

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
}

결과는 일반적인 그리드 레이아웃입니다.

간격 추가:

 ​.grid-layout {
    gap: 80px 40px;
}

각 항목 사이에 공백을 삽입합니다.

행과 열 간격의 개별 값이 여기에서 어떻게 적용되어 열 사이의 간격(40px) 크기(80px)의 두 배인 행 사이의 간격을 만드는지 확인하세요. 단일 값을 사용하면 행과 열 사이에 동일한 간격을 정의하게 된다는 점을 기억하세요.

다중 열 레이아웃에서 간격 사용

열 레이아웃에도 간격 속성을 사용할 수 있지만 이 경우에는 단일 값만 관련됩니다. 행이 없습니다. 다중 열 레이아웃에는 기본 간격이 있습니다.

 .column-layout {
    column-count: 3;
}

하지만 1em 크기로 매우 작습니다.

이는 글꼴을 변경할 때, 특히 텍스트를 정렬할 때 특히 두드러집니다.

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
}

결과 텍스트 줄은 서로 부딪혀 읽기 불편해집니다.

간격을 지정하면 열 사이의 공간을 늘려 숨쉴 수 있는 공간을 더 많이 확보할 수 있습니다.

 .column-layout {
    gap: 2em;
}

열 너비와 같은 다른 요소에 따라 2em 또는 3em이 더 읽기 쉬운 결과를 제공할 수 있습니다.

Google Chrome의 개발자 도구와 같은 브라우저 유틸리티를 사용하여 레이아웃을 확인하고 간격 및 여백과 같은 속성이 레이아웃에 어떤 영향을 미치는지 확인할 수 있습니다.

간격에 두 가지 값을 사용할 때 올바른 방향으로 사용되었는지 확인하세요. “행, 열” 순서는 직관적이지 않을 수 있지만 패딩 및 여백과 같은 다른 바로가기 속성의 순서와 일치합니다.

간격을 사용하는 정확한 방법은 간격을 적용하는 레이아웃 구성표에 따라 달라집니다. 그러나 일반적으로 항목 사이에 일정한 공간이 필요하지만 항목 주변에는 필요하지 않은 경우 간격을 확보해야 합니다.