데브허브 | DEVHUB | Build and Deploy a Full-Stack Hotel Website with Astro & SanityBuild and Deploy a Full-Stack Hotel Website with Astro & Sanity
- 각 비디오는 웹사이트의 개별 섹션 구축에 집중하여 코스처럼 진행됩니다. 📚
- 현재 에피소드에서는 호텔 웹사이트의 '카테고리 섹션'을 구축하는 데 중점을 둡니다. 🏨
CategoryCard.astro 컴포넌트를 생성하여 이미지, 이름, URL을 props로 전달함으로써 코드 재사용성을 높였습니다. 🧩
- Tailwind CSS를 사용하여 모바일(1열), 태블릿(2열), 데스크톱(3열)에 최적화된 반응형 그리드 레이아웃을 구현했습니다. 📱
- 카드에 마우스를 올렸을 때 오버레이 투명도 변경, 이미지 확대, 텍스트 위치 전환과 같은 동적인 호버 효과를 추가했습니다. ✨
astro:assets에서 Image 컴포넌트를 가져와 이미지를 효율적으로 관리하고 최적화했습니다. 🖼️
- Tailwind CSS 클래스를 활용하여 패딩, 마진, 텍스트 정렬, 폰트 크기, 색상 등 다양한 스타일을 적용했습니다. 🎨
- 다음 에피소드에서는 '편의 시설 섹션'을 구축할 예정이며, 현재는 존재하지 않는 룸 페이지들을 곧 생성할 것임을 암시합니다. ➡️