인프런 커뮤니티 질문&답변

space-y-6과 flex-col gap-6은 둘 다 TailwindCSS에서 세로 간격을 만드는 클래스지만 CSS 작동 방식이 완전히 다릅니다.

둘 다 간격을 추가하는 방식이지만 동작 원리가 다릅니다.

• CSS

• TailwindCSS

관련 지식으로 space-y-6은 TailwindCSS가 CSS의 margin 속성을 이용해서 자식 요소들에게 마진을 추가하는 방식입니다. 마지막 자식을 제외한 모든 요소에 아래쪽 마진을 적용해서 간격을 만들죠. 기존 레이아웃은 그대로 유지하면서 간격만 추가하는 거예요.

반면 flex-col gap-6은 TailwindCSS가 CSS의 Flexbox와 gap 속성을 조합해서 사용하는 방식입니다. 부모 컨테이너를 display: flex; flex-direction: column으로 만들고 gap 속성으로 간격을 생성합니다. 이때 레이아웃 자체가 Flexbox로 바뀌기 때문에 정렬이나 크기 제어 같은 추가적인 Flexbox 기능들도 함께 사용할 수 있어요.

따라서 단순히 간격만 필요하다면 space-y를, 간격과 함께 레이아웃 제어도 필요하다면 flex gap을 사용하시면 됩니다.