CSS 갭 속성 사용 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 갭 속성 사용 방법

Christopher Nolan

Feb 08, 2025 am 08:39 AM

css

속성 : 요소 간격을 쉽게 제어 할 수 있습니다 gap

코어 포인트 How to Use the CSS gap Property

CSS 속성을 통해 개발자는 요소 간의 수평 및 수직 간격을 쉽게 제어하여 많은 레이아웃 문제를 해결하고 마진 관리를 단순화 할 수 있습니다. 그리드 레이아웃, Flexbox 레이아웃 및 다중 열 레이아웃과 호환됩니다. 속성은 두 가지 값을 수용 할 수 있습니다 : 행 간격과 열 간격. 하나의 값 만 지정되면 값은 행과 열 모두에 적용됩니다. 간격 값은 함수를 사용하여 계산 된 길이, 백분율 또는 값의 모든 단위 일 수 있습니다.

로 설정하고 gap 값을 추가하여 텍스트 요소의 간격을 설정하는 데 사용할 수 있습니다.
그리드 레이아웃의 gap 속성을 원래 라고 불렀지 만 그리드, 플렉스 박스 및 다중 열 레이아웃에 적합하기 때문에 calc()에 고수하는 것이 가장 좋습니다. 그러나 경우에 따라 및
값을 넘어서 항목이 발생할 수 있습니다. 또한 gap는 음수 값을 허용하지 않습니다. display: grid gap 이 기사는 CSS
gap 속성 사용 grid-gap 속성을 사용하면 요소간에 수평 및 수직 간격을 추가 할 수 있습니다. 물론, 우리는 항상 gap를 사용할 수 있습니다. 그러나 마지막 프로젝트에는 항상 추가 마진이 있기 때문에 justify-content를 사용하여 프로젝트 간격을 설정하는 것은 번거롭게 될 수 있습니다. align-content 다음 이미지는 간격을 설정하기 위해 왼쪽 및 오른쪽 및 하단 여백을 사용하는 4 개의 DIV를 보여줍니다. gap Codepen에서 예제를 확인하십시오 : CSS 갭 속성 : 간격 대신 여백을 사용하십시오. 컨테이너의 배경이 오른쪽과 바닥에 강조 표시되어 있습니까? gap 속성은

대신

를 사용합니다. gap Codepen의 예를 확인하십시오 : CSS 갭 속성 : 간격이있는 간격 항목

이제 우리는 오른쪽과 바닥에 추악한 추가 간격이 없습니다. 간격은 이제 프로젝트간에 만 있으며 프로젝트는 컨테이너 내에 면밀히 배열됩니다.

우리는 그리드, Flexbox 및 멀티 컬럼의 세 가지 레이아웃 모드와 함께 gap를 사용할 수 있습니다. 아래 순서대로 각 모드를 소개합니다.

특성 사용에 대한 안내서

를 사용하는 것은 만큼 쉽습니다. (우리는 위의 데모에서 이것을 수행 한 결과를 보았습니다.) 그러나 이것이 무엇을 의미하는지 보자. gap 속성은 두 가지 값을 허용 할 수 있습니다 : 행 간격 (즉, 요소 행 사이의 간격)과 열 간격 (즉, 요소 열 사이의 간격) : . gap: 10px

우리가 하나의 값 만 지정하면 모든 행 gap 및 gap: <row-gap> <column-gap></column-gap></row-gap> 열에 적용됩니다.

우리는 또한

및 How to Use the CSS gap Property 속성을 사용하여 각각 열 간격 또는 행 간격을 지정할 수 있습니다.

의 값은 길이의 모든 단위 (예 : px, em, vw), 백분율 단위 또는 함수를 사용하여 계산 된 값 일 수 있습니다. CSS 그리드에서

특성 를 사용하는 방법 그리드 레이아웃과 함께 row-gap를 사용하는 위의 예를 볼 수 있습니다. 다른 단위를 사용하여 다른 예제를 시도해 봅시다 : column-gap Codepen에서 예제를 확인하십시오 :

CSS GAP 속성 : 그리드 LONGHAND와 함께 간격을 사용하십시오 gap calc() 이번에는 행과 열에 다른 단위를 사용했습니다.

의 추가 이점은 반응 형 레이아웃에서 완벽하게 작동한다는 것입니다. 두 항목 사이에서 간격을 설정하면 아래의 예와 같이 항목이 나란히 또는 위 또는 아래로 배열되는지 여부에 관계없이 그 간격이 적용됩니다. gap Codepen의 예를 확인하십시오 : 제목이없는

위의 코드 펜 하단에 0.5x 버튼을 누르거나 브라우저에서 코드 펜을 오픈하고 뷰포트를 넓히고 좁히려면 상자의 배열에 따라 간격 방향이 어떻게 조정되는지 확인하십시오. 여기서 우리는 gap 속성의 단일 값으로부터 혜택을받으며 행과 열에 적용 할 수 있습니다. 작은 화면에서 라인 간격을 원하지 않으면 대신

를 설정할 수 있습니다. 위의 코드펜에서 시도해보십시오.

article > div {
  margin: 0 10px 10px 0;
}

그리드 레이아웃 사용 방법에 대한 자세한 내용은 CSS 그리드 레이아웃 안내서를 확인하십시오.

flexbox에서 특성 를 사용하는 방법 Flexbox가 처음 나타 났을 때, 그것은

속성이 없었기 때문에 를 사용하는 고대의 고통스러운 방법으로 돌아 가야했습니다. 고맙게도, 현대식 브라우저에서 를 사용하는 것은 이제 주류이며 잘 지원됩니다.

우리는 그리드에서하는 것처럼 사용할 수 있습니다.

Codepen에서 예제를 확인하십시오 : CSS 갭 속성 : Flexbox와 함께 간격을 사용하십시오

gap Flex 프로젝트 반응 형 라인이 깨지는 경우,

설정은 필요에 따라 재조정되며 일반적으로 아래 예제와 같이 수직 및 수평 방향으로 정렬되지 않습니다. gap Codepen에서 예제를 확인하십시오 : CSS 갭 속성 : 반응 형 Flexbox 레이아웃과 함께 갭 사용

. 간격이 수평 및 수직으로 정렬되기를 원한다면 그리드를 사용하는 것이 가장 좋습니다.

~~와 같은 그리드, 열 또는 행 사이의 간격을 설정하려면 각각 와 를 사용할 수 있습니다.~~

다중 열 레이아웃에서

특성

를 사용하는 방법 다중 열 레이아웃은 컨텐츠를 열로 구성하지만 기본적 으로이 열에는 브라우저에서 1EM 간격이 설정됩니다. 우리는 속성을 사용하여 선호하는 간격 너비를 설정할 수 있습니다.

Codepen에서 예제를 확인하십시오 : CSS 갭 속성 : 다중 열 레이아웃에서 간격을 사용하십시오 . ( 여기서 열만 처리하기 때문에이 값을 적용 할 수있는 행이 없기 때문에 열 간격 값 만 적용합니다. 재미를 위해, 우리는 또한이 열 사이에 수직선을 추가합니다. column-gap Codepen에서 예제를 확인하십시오 : CSS 갭 속성 : 다중 열 레이아웃에서 갭 및 칼럼 사용 row-gap는 , 및

의 약어입니다. gap

에 대한 유용한 정보는 gap입니다 그리드 레이아웃의 속성은 원래 이며 전체 형식은 및 입니다. 이러한 특성은 여전히 유효하지만 그리드, Flexbox 및 다중 열 레이아웃에 적합하기 때문에

article > div {
  margin: 0 10px 10px 0;
}

를 고수하는 것이 가장 좋습니다.

다중 열 레이아웃에는 이전 속성이 있으며, 이는 여전히 유효합니다. 그러나 다시 말하지만, 모든 경우에 를 기억하는 것이 더 쉽습니다.

간격은 백분율 값으로 설정할 수 있지만 백분율은 몇 백분율과 관련이 있습니까? 실제로 많은 요인에 달려 있으며 예측하기 어려울 수 있습니다. 사양에서 이것을 더 탐색 할 수 있습니다. 일반적으로, 자신이하고있는 일을 실제로 알지 않는 한

에서 백분율을 사용하지 않는 것이 가장 좋습니다. gap

및 와 같은 정렬 속성은 그리드 및 플렉스 박스 레이아웃에서 요소를 분리 할 수 있으며 경우에 따라

값을 넘어서 항목이 발생합니다. 그러나

값은 작은 화면의 요소간에 최소

article {
  display: grid;
  gap: 10px;
}

간격을 제공하기 때문에 여전히 유용합니다.

왜 모든 요소의 간격을 설정하기 위해

를 사용하지 않습니까? `gap` 위에서 언급 한 바와 같이 는 마진 간격과 관련된 몇 가지 성가신 문제를 해결합니다. 이러한 마진 문제는 텍스트 및 기타 컨텐츠에도 영향을 줄 수 있습니다. 예를 들어, 하단 마진을 사용하여 텍스트 요소 (단락 및 제목 등)의 간격을 설정하면 마지막 요소 후에 여분의 여백이 있거나 상단 마진을 사용하면 첫 번째 요소가 추가 상단에 나타날 수 있습니다. 여유. CSS에는이 문제를 해결하는 쉬운 방법이 몇 가지 있지만 여전히 번거롭고 일부 개발자는 대신

를 사용하기로 결정했습니다.

gap gap를 사용하려면 텍스트 요소의 간격을 설정하려면 텍스트 컨테이너를 로 설정하고 .

, , 및 요소는 이제 그리드 항목입니다. Codepen의 예제를 확인하십시오 :

CSS 갭 속성 : 간격으로 텍스트 내용을 간격 gap display: grid. 그러나 우리는 이것을해야합니까? 한 가지 단점은 모든 요소가 동일하게 간격을두고, 특히 제목 주위의 요소 간 간격을 변경하는 것이 시각적으로 더 매력적 일 수 있다는 것입니다. 그러나 gap를 사용하는 것은 여전히 흥미로운 아이디어입니다. 더 자세히 살펴보면 를 사용하여 텍스트 간격을 설정하는 것에 대한 Kevin Powell의 매우 흥미로운 비디오를 확인하십시오.

article > div {
  margin: 0 10px 10px 0;
}

요약 속성은 그리드, Flexbox 및 다중 열 레이아웃을 사용할 때 프로젝트 간격을 설정하기위한 편리한 도구입니다. 더 이상 오래된 지저분한

메소드를 사용할 필요가 없습니다. 디자인의 창의적인 방식으로 사용할 수 있지만 과도하게 사용하지 마십시오! <p></p> <h1></h1> 추가 읽기 <h2></h2> CSS 그리드 레이아웃에 대해 자세히 알아보십시오 Flexbox 레이아웃에 대해 자세히 알아보십시오 CSS 멀티 컬럼 레이아웃

에 대해 자세히 알아보십시오 CSS Box Alignment Module 레벨 3 사양에 대한 정보 또는 속성 에 대한 MDN에 대한 정보를 읽으십시오. css

속성 faq

~~CSS gap 속성이란 무엇입니까? gap CSS~~

속성은 및

에 대한 속성으로 약어입니다. 그리드, 플렉스 또는 다중 열 레이아웃에서 행과 열 사이의 간격 크기를 지정합니다. 이 속성은 시각적으로 매력적이고 잘 구조화 된 CSS 레이아웃을 만드는 데 특히 유용합니다. 설계 요소의 일관된 간격 및 정렬을 유지하는 데 도움이됩니다.

CSS

속성은 어떻게 작동합니까? gap CSS margin 속성은 행과 열 사이의 간격 (공간) 크기를 설정하여 작동합니다. 당신이 제공하는 첫 번째 값은 행 간격을 설정하고 두 번째 값은 열 간격을 설정합니다. 하나의 값 만 제공하면 해당 값으로 행과 열 간격을 모두 설정합니다. 예를 들어,

는 행 간격을 10px로 설정하고 열 간격을 20px로 설정합니다.