[HTML/CSS 실무 팁] CSS 라이브러리 선택

✅ 디자인 시스템이 빡센 경우. 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(콘텐츠의 크기)만큼 높이 가짐