Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
flex-col 과 space-y-6 차이
Viết
·
105
0
space-y-6과
flex-col 로 gap-6(또는 gap-y-6)을 주는 방식의 차이를 모르겠어요
둘다 같은 결과를 초래하는것 아닌가요?
이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다
react블로그next.jscursorcursorai
Câu trả lời 1
0
gymcoding
Người chia sẻ kiến thức
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을 사용하시면 됩니다.