gap으로 거리두기

보통 레이아웃을 짤 때, 요소 사이들의 공간을 주기 위해 margin을 사용했었다. margin은 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 적용된다는 특징이 있다. 의도된 여백이라면 괜찮겠지만,, 그렇지 않은 경우에는 이를 해결하기 위해 불필요하게 특정 요소에는 여백이 생기지 않게 추가로 제어해주어야 하는 번거로움이 있었는데, 이를 해결할 수 있는 방법이 있다, 바로 Gap!! 갭이다!!

 

gap은 인접한 요소가 있을 때만 여백을 만든다!

 

gap은 내부 children 요소들이 일적한 간격으로 떨어져 위치하도록 사용하는 속성이다. margin과 비슷한 역할을 하는 것 같지만, gap은 엘리먼트 요소 사이에만 공간을 만든다는 차이가 있다.

 

예전에는 gap 속성을 지원하는 브라우저가 많지 않았기에 자주 사용되지 못했지만, 현재 기준으로 크롬을 비롯한 메이저 브라우저에서는 해당 속성을 지원하고 있다! 앞으로 gap을 맘껏 사용할 수 있는 브라우저가 늘어날 거라고 기대 중이다 ㅎㅎ

 

아래는 gap 속성 문법이다.

gap: [상하좌우 전체의 값];
gap: [상하 사이의값] [좌우 사이의값];

gap은 전체 값을 적용할 수도 있고, 띄어쓰기를 구분자로하여 상하, 좌우 다르게 값을 적용할 수도 있다.

 

사용 예제 살펴보기

아래 예제는 flex로 설정된 부모 요소에 gap을 사용하여 자식 요소들의 여백을 조정한 예제이다.

 

See the Pen Gap by joeunhye (@joeunhye) on CodePen.

다음은 상하 좌우 각각 다른 값을 설정한 예제이다.

 

See the Pen Gap by joeunhye (@joeunhye) on CodePen.

 

참고 사이트

https://webisfree.com/2020-12-05/[css]-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%86%8D%EC%84%B1-gap%EC%9D%84-flex%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 

[css] 스타일속성 gap을 flex에서 사용하기