css를 사용하다보면 gap이라는 용어를 은근 많이 보게 될 것이다. 보통은 안쪽 요소들의 간격을 부여하는데 사용하는데 이게 그냥 그렇게만 알기에는 애매할 때가 많아서 좀 디테일하게 알아보고자 한다.
gap의 정의
행과 열 사이의 간격을 설정한다. 이는 multi-column, flex, grid에도 적용된다.
단축 속성으로는 row-gap과 column-gap이 있다. 이름 그대로 세로 요소 간격, 가로 요소 간격을 부여한다.
하나만 사용하면 row-gap과 column-gap이 둘다 적용된다.
둘 다 사용할 경우 row-gap, column-gap 순으로 적용된다.
gap의 예시
gap에는 다양한 값이 들어간다. 아래는 값의 예시이다.
단일 length 값
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;
gap: 16%;
gap: 100%;이렇게 단일 길이 값이 들어간다. px, em, vmin, cm 등 어차피 단일 단위이기에 단위의 상관을 받지는 않는다.
아래 코드와 갓이 퍼센트 값도 들어갈 수 있다. 이때, 퍼센트는 부모 컨테이너의 길이를 기준으로 한다.
이중 length 값
처음에도 이야기했듯이 row,column gap 순으로 적용된다.
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;
gap: 16% 100%;
gap: 21px 82%;즉, 첫번째 요소로 위아래가 벌려지고, 두번째 요소로 양 옆이 벌려진다.
아래 코드와 같이 퍼센트와 길이를 둘 다 사용할 수 있다.
calc() 값
calc()를 사용해서 수학적 계산을 수행하더라도 문제없이 들어간다.
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);코드에서 보면 알 수 있듯이 가로, 세로 간격을 10%에 20px을 더해서 부여한다는 뜻이다. 아래도 가로 세로를 각각 부여하겠다는 의미이다.
전역 값
CSS에서 전역 값은 특정 CSS 속성을 기본겂으로 설정하거나 부모로부터 값을 상속 받거나 초기화할 때, 사용된다.
gap: inherit;
gap: initial;
gap: unset;
gap: revert;
gap: revert-layer;
이렇게 표로 정리된다.
실무에서도 자주 사용되니 사용할 때마다 파악하고 적극적으로 사용하는 것이 좋을 것 같다.
참고 자료
