flex
를 이용하여 카드형 리스트를 만들다보면 box
의 여백을 맞추기위해선 다양한 꼼수(?)들이 존재한다.
grid
에 대해 알아보고 적용하던 중, gap
속성을 flex
에 적용한 샘플을 우연히 보았다.
(음... 응?? 어?? 와 !!!)
이렇게 기적같은 일이 !! 바로 적용해보자 !!
우선 flex
에 적용하기 전 gap
에 관해 간단히 알아보자.
gird
속성 사용 시 자식요소의 box
의 여백(공간)을 주기 위한 속성의 값으로 gird
와 마찬가지로 ie
에서는 지원을 하지 않는다.
margin
: 엘리먼트 요소 이외외 것에도 여백이 생긴다.
gap
: 엘리먼트 요소에만(!!) 여백이 생긴다.(단, 인접요소가 없다면 적용되지 않는다.)
margin
을 이용하여 여백을 주는 방법은 아래의 코드로 확인할 수 있다.
<div class="out_box">
<div class="box">
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
</div>
</div>
.out_box{
padding: 30px;
}
.box{
display: flex;
flex-wrap: wrap;
width: 600px;
font-size: 0;
background: green;
margin: -10px
}
.in_box{
display: inline-block;
vertical-align: top;
width: calc(33.3333% - 10px);
height: 200px;
margin: 5px;
background: yellow;
}
확인하는 것과 같이 부모에 margin
값을 마이너스(-)값을 주는 꼼수로 이러한 여백을 만들 수 있다. 하지만, 이것의 단점은 부모요소가 content
영역을 벗어나는 것을 볼 수 있다.
물론 좌/하, 상/왼 만주는 방법도 있지만, 이것또한 열마다 재지정을 하는 이슈가 발생되어 css
코드가 늘어나게된다.
아래의 코드를 확인하세요.
<div class="out_box">
<div class="box">
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
<div class="in_box">
</div>
</div>
</div>
.out_box{
padding: 30px;
}
.box{
display: flex;
flex-wrap: wrap;
width: 600px;
font-size: 0;
background: green;
gap: 15px;
}
.in_box{
display: inline-block;
vertical-align: top;
width: calc(33.3333% - 10px);
height: 200px;
background: yellow;
}
gap
은 margin
처럼 부모의 margin
값을 마이너스(-)하지 않아도 자식 요소들의 여백을 줄 수 있다.
2017년 초 gird
가 브라우저에서 지원을 하였지만, ie
는 사라진 순간까지도 gird
와 gap
을 지원하지 않았다.(ie10,11
에선 -ms-
를 이용한 부분적 제한이 있었음)
그렇기 때문에 ie
까지 대응하기위해 flex
를 사용할때는 gap
을 사용할 수 없었다.
하지만, 2022년 ie
의 서비스 종료로 다시금 gap
라는 속성을 flex
에 적용한 사례가 웹페이지에서 목격이 된다.
사용방법은 gird사용과 동일하다.
p{
display: flex;
gap: 10px;
}
이와 같이 flex
를 지정한 곳에 gap
을 사용하면 된다. (아주 단순해서 기록으로 남기기도 창피하군요..하하;;)
flex
를 사용하는 이유로 가장 많은 이유는 반응형 웹을 만들기 위해서 일 것이다.
특히 flex-wrap:wrap
를 사용하여 디바이스의 크기에 따라 요소가 하단으로 떨어지는 UI가 있다면 베스트 일 것이다.
gap을 활용하지 않는다면, 하단으로 떨어지는 경우 각 요소의 margin값을 재지정을 해줘야되지만, gap을 활용시 간단하게 해결이된다.
ie
서비스 지원이 종료되면서, 퍼블리셔에겐 다양한 신규 속성을 쓸수 있는 기회가 생겼다. :where()
, :is()
등 신규 selector
들도 이제는 사용할 수 있는 기회가 점점 늘어간다.
하지만, 본인이 맡고 있는 서비스가 아직 ie사용자를 고려한 서비스라면.. 엇흠.. 항상 화이팅 하십시오 ! :)