Build and Deploy a Full-Stack Hotel Website with Astro & Sanity
- 호텔 웹사이트의 '다이닝 섹션'을 Astro와 Sanity를 활용하여 구축하는 과정 시연. 🏨
dining.astro 파일을 생성하고, 섹션별 콘텐츠를 체계적으로 구성하는 방법 소개. 📁
- Tailwind CSS를 이용해 배경색, 여백, 그리드 레이아웃 등 시각적 스타일링 적용. 🎨
- 대형 화면에서 텍스트 콘텐츠와 이미지를 2열 그리드로 배치하여 반응형 디자인 구현. ↔️
- 다이닝 옵션 목록을 체크 아이콘, 제목, 설명과 함께 구현하며 세부 UI 요소 제작. ✅
- Astro의
Image 컴포넌트를 활용하여 이미지를 효율적으로 삽입하고 크기 및 모서리 스타일링. 🖼️
- 'View Rooms' 버튼을 추가하여 사용자에게 다음 행동을 유도하는 CTA(Call to Action) 기능 구현. 🚀
- 모바일 뷰에서 콘텐츠가 올바르게 쌓이도록 반응형 동작을 확인하며 사용자 경험 고려. 📱
- 반복되는 UI 요소(LI 태그)를 컴포넌트로 분리할 수 있음을 언급하며 코드 재사용성 시사. ♻️
- 다음 레슨에서 CTA 섹션을 구축하여 랜딩 페이지를 최종 완성할 계획을 공유. ✨
데브허브 | DEVHUB | Build and Deploy a Full-Stack Hotel Website with Astro & Sanity