✅ 디자인 시스템이 빡센 경우. SCSS
✅ 빠른 개발. Tailwind + module.css or @layer 확장 (특히 드롭다운, 중첩 hover, 커스텀 애니메이션은 Tailwind보다 CSS가 더 명확한 영역)
✅ Flex 용어 정리
| 속성 | 주축(main axis) | 교차축(cross axis) |
| flex-direction: row | 가로(width) | 세로(height) |
| flex-direction: column | 세로(height) | 가로(width) |
🤔 요소에 height를 설정해야 하는지 헷갈림..
<div class="flex h-32">
<div class="bg-blue-500 w-10">A</div>
</div>자식이 교차축 크기를 명시하지 않는 경우? 자동으로 align-items: stretch 가 적용된 상태
<div class="flex h-32">
<div class="bg-blue-500 w-10 h-8">A</div>
</div>반대로, 교차축에 height을 명시하면? 자기 height인 2rem(콘텐츠의 크기)만큼 높이 가짐