체크인: 3단계 - 컴포넌트
이제 웹 사이트의 전체 페이지를 생성하는 .astro 및 .md 파일이 있으므로 Astro 컴포넌트를 사용하여 더 작은 HTML 조각을 만들고 재사용할 때입니다!
학습 내용 미리보기
섹션 제목: 학습 내용 미리보기이 단계에서는 Astro 컴포넌트를 생성하여 웹사이트 전체의 공통 요소에 대한 코드를 재사용하는 방법을 알아봅니다.
다음을 빌드합니다.
- 페이지 링크 메뉴를 표시하는 탐색 컴포넌트
- 각 페이지 하단에 포함할 바닥글 컴포넌트
- 프로필 페이지로 연결되는 바닥글에 사용되는 소셜 미디어 컴포넌트
- 모바일에서 탐색을 전환하는 대화형 햄버거 컴포넌트
그 과정에서 CSS와 JavaScript를 사용하여 화면 크기와 사용자 입력에 반응하는 반응형 디자인을 구축하게 됩니다.