- 리액트에서 미디어 쿼리와 Flexbox를 활용하여 반응형 UI를 구현하는 방법을 시연합니다. 🖥️
- UI 레이아웃은 1200px, 800px, 600px 세 가지 주요 분기점에서 가로 너비에 따라 동적으로 변경됩니다. 📐
Item컴포넌트는title,styles,className을 props로 받아 재사용성을 높였습니다. 📦- CSS Modules (
.module.css)를 사용하여 컴포넌트별 스타일을 관리하고 미디어 쿼리를 적용합니다. 🎨 - 기본 레이아웃은
display: flex,justify-content: space-between,align-items: center로 가로 정렬됩니다. ↔️ - 800px 이하에서는
flex-direction: column으로 변경하여 세로 정렬하고,align-items: flex-start로 왼쪽 정렬합니다. ⬇️ - 특정 요소(
search-container)는align-self: stretch를 사용하여 부모 컨테이너의 전체 너비를 채우도록 합니다. 📏 - 600px 이하에서는
search-container도flex-direction: column으로 변경되고, 모든 아이템이flex: 1과align-items: stretch를 통해 전체 너비를 채우도록 합니다. 🔄 flex: 1속성을 통해 아이템들이 가용 공간을 균등하게 분배하도록 설정합니다. ✨- 미디어 쿼리를 리액트에서 적용할 때 CSS Modules 또는 Styled Components 사용을 권장합니다. ✅
- 다음 시간에는 컴포넌트 활용 심화 및
useState훅에 대해 다룰 예정입니다. 🚀
Recommanded Videos
