반응형 사이트 만들기 - 11부

이제 기본 구조의 스타일을 지정하고 작업했으므로 반응형 측면을 살펴보겠습니다.

우리는 그것을 고려하지 않았으므로 모바일 장치에서 홈페이지를 보면 어떻게 되는지 봅시다.



이미 얼마나 잘 생겼는지에 놀랐습니다.
우리가 집중해야 할 몇 가지 테이크 아웃.

헤더 간격 좌우

프로필 이미지를 해당 섹션으로 푸시

최근 게시물이 서로 아래에 표시되어야 함

나머지는 꽤 견고합니다!
시작하겠습니다.
반응하는 부분만 따라하고 싶다면 다음GitHub branch을 시작점으로 사용하세요.

반응형 홈페이지 만들기

측면에 더 많은 공간이 필요한 헤더부터 시작하겠습니다.

모바일 버전에서만 패딩을 추가하기를 원하므로 데스크톱에서 패딩을 "설정 해제"할 수 있습니다.
따라서 header.js 파일을 열고 헤더 요소 클래스 목록에 다음 클래스를 추가합니다.

<header className="px-6 md:px-0"></header>

이제 인트로 섹션으로 이동하여 소셜 이미지를 라인에 표시해 보겠습니다.
그러나 이미지가 텍스트 위에 있기를 원합니다. 다행스럽게도 flexbox에는 반전 옵션이 있습니다.

이를 위해 introHeader.js 파일을 수정하고 헤더 내부의 첫 번째 div에 다음 옵션을 추가해야 합니다.

<div className="flex-col-reverse md:flex-row"></div>

마지막으로 조정하고 싶었던 부분은 최근 게시물 섹션이었습니다. 이것은 단순히 항목을 서로 옆에 표시하는 대신 서로 아래에 표시해야 합니다.

이를 위해 그리드를 사용했기 때문에 모바일 보기에 대해 다른 그리드를 정의할 수 있습니다.
그런 다음 데스크톱에서 2열 그리드에 표시되도록 수정합니다.
recentPosts.js를 열고 기사를 래핑하는 div를 수정합니다.

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <article />
  <article />
</div>

이제 어떻게 보이는지 한 번 더 살펴보겠습니다.



그리고 가장 중요한 부분은 여기에서 변경한 사항으로 인해 다른 모든 페이지가 자동으로 모바일에서 환상적으로 보인다는 것입니다!



완성된 코드를 보려면 여기GitHub branch에서 확인하십시오.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나