컨텐츠로 건너뛰기

체크인: 3단계 - 컴포넌트

이제 웹 사이트의 전체 페이지를 생성하는 .astro.md 파일이 있으므로 Astro 컴포넌트를 사용하여 더 작은 HTML 조각을 만들고 재사용할 때입니다!

이 단계에서는 Astro 컴포넌트를 생성하여 웹사이트 전체의 공통 요소에 대한 코드를 재사용하는 방법을 알아봅니다.

다음을 빌드합니다.

  • 페이지 링크 메뉴를 표시하는 탐색 컴포넌트
  • 각 페이지 하단에 포함할 바닥글 컴포넌트
  • 프로필 페이지로 연결되는 바닥글에 사용되는 소셜 미디어 컴포넌트
  • 모바일에서 탐색을 전환하는 대화형 햄버거 컴포넌트

그 과정에서 CSS와 JavaScript를 사용하여 화면 크기와 사용자 입력에 반응하는 반응형 디자인을 구축하게 됩니다.

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티