🌐 HTML/CSS 온보딩 프로젝트: "반응형 웹 페이지 만들기"

🎯 프로젝트 목표

이 온보딩 프로젝트의 목표는 주어진 디자인 요구 사항에 따라 반응형 웹 페이지를 구현하는 것입니다. PC와 모바일 환경에서 각각 다르게 보이는 요소들을 만들고, CSS 미디어 쿼리를 활용하여 레이아웃이 변화하는 것을 경험하게 됩니다. 주된 학습 포인트는 HTML 구조, CSS 스타일링, 그리고 반응형 웹 디자인의 기초입니다.

• 참고 이미지 및 링크

📐 단계별 가이드

1️⃣ HTML 구조 만들기

• Top Navigation
  • 로고와 아이콘을 포함하는 상단 네비게이션 바를 만듭니다. 어떤 태그를 사용하면 좋을까요?
• Left Navigation & Left Section Navigation
  • 사이드바 메뉴를 만들고, 각 메뉴 항목은 **ul**과 li 태그를 사용합니다.
• Main
  • 중앙의 주요 컨텐츠 영역을 구성합니다. 이곳에는 층과 섹션을 알려주는 텍스트와 사물함을 표시하는 부분이 포함됩니다. 어떤 태그를 사용하면 좋을까요? 어떤 display 속성을 사용하면 좋을까요?
• Tapbar (모바일 전용): 모바일 화면에서 하단에 고정되는 탭바를 만듭니다.

2️⃣ CSS 스타일링

• Top Navigation 스타일링
  • 로고와 아이콘의 위치, 간격을 조정합니다.
• Left Navigation & Left Section Navigation 스타일링
  • 마우스 오버 시 스타일 변화를 추가합니다.
• Main 스타일링
  • 모든 요소가 중앙에 배치되도록 합니다.
• 반응형 디자인
  • CSS 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃이 변경되도록 합니다.

<aside> 💡 사용하는 폰트와 아이콘은 구글 폰트에서 embed 받아서 사용하세요.

</aside>

3️⃣ 반응형 디자인 구현

• PC와 모바일 레이아웃
  • PC 화면에서는 모든 네비게이션 요소가 보이며, 모바일 화면에서는 **Left Navigation**과 **Left Section Navigation**이 숨겨지고 **Tapbar**가 나타납니다.
• 모바일 최적화
  • 모바일 환경에서 사물함이 최대 4개까지 가로로 배치됩니다.

4️⃣ 최종 검토 및 피드백