flex-col 과 space-y-6 차이
118
13 asked
space-y-6과
flex-col 로 gap-6(또는 gap-y-6)을 주는 방식의 차이를 모르겠어요
둘다 같은 결과를 초래하는것 아닌가요?
이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다
Answer 1
0
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을 사용하시면 됩니다.
rehype-sanitize 설치의 필요성
0
92
2
Notion API-DB 연결이 안돼요
0
541
2
private folders 와 전역 폴더
0
70
2
퀴즈 질문 풀이 오류
0
86
2
Streaming 관련해서 문의드립니다.
0
74
2
ISR 매커니즘에 대한 궁금증
0
68
2
cursor AI 프로젝트 룰 관련 질문 드립니다.
0
344
2
params 에 Promise 객체 타입이 지정되어야 하는 이유? 최신?
0
76
1
streaming 페이지 보완 필요
1
56
2
remark-gfm
0
111
2
마크업 파트 가독성 향상 방법
0
63
2
Next.js 블로그 결과물 공유 이벤트 진행 여부
0
69
1
블로그 PostCard 이미지 상단 여백
0
70
3
컴파일 에러 및 의존성 충돌 문제
0
106
2
TypeError: Invalid URL
0
172
2
세션 6의 퀴즈 5번 정답 옵셔널 캐치올 아닌가요?
1
73
2
상세 페이지 404 에러 발생
0
113
2
스타일이 적용 안되는 문제
0
96
2
cursorAI에 rule 생성 시 rule type이 안 나오는 현상 발생
0
177
3
클라이언트 컴포넌트 사전 렌더링
0
52
2
상세페이지 구현 Author의 name 프러퍼티가 조회가 안됩니다.
1
71
2
A
0
94
2
unstable_cache 사용 시 적정 revalidate 값 문의
0
91
2
useActionState에서 반환값 필드 생략 시 조건에 따라 에러 발생 여부가 다른 이유
0
85
2