12 글 목록을 띄워 줄 메인 페이지 구현하기 - 메인 페이지 반응형 디자인 구현하기

source: categories/study/gatsby/gatsby_9-03.md

메인 페이지 반응형 디자인 구현하기

CSS 미디어 쿼리 사용 방법

미디어 쿼리란 단말기의 유형 또는 화면 해상도나 너비와 같은 수치에 따라 다른 스타일을 지정할 수 있도록 해주는 기능입니다.

저희는 기본적으로 너비에 따라 다른 스타일을 지정하도록 구현할텐데, 그 기준 너비는 가장 일반적으로 사용되는 태블릿 너비인 768px 입니다.

문법은 다음과 같습니다.

@media (max-width: 768px) {
  /* ... */
}

해당 부분 내부에 정의되는 스타일은 모두 너비가 768px 이하일 때 적용됩니다.

ProfileImage 컴포넌트 반응형 디자인 구현하기

기존 프로필 이미지의 가로 세로 길이는 모두 120px이었지만, 브라우저 가로 사이즈가 태블릿 기준 너비인 768px 이하인 경우에는 80px로 크기는 줄여주도록 하겠습니다.

따라서 다음과 같이 코드를 수정해주세요.

  • src/components/Main/ProfileImage.tsx
// ...

const ProfileImageWrapper = styled.img`
  width: 120px;
  height: 120px;
  margin-bottom: 30px;
  border-radius: 50%;

  @media (max-width: 768px) {
    width: 80px;
    height: 80px;
  }
`

// ...

Introduction 컴포넌트 반응형 디자인 구현하기

저희는 가로 너비가 768px 이하일 경우, Introduction 컴포넌트의 스타일을 다음과 같이 변경할 것입니다.

따라서 다음과 같이 미디어 쿼리를 추가하겠습니다.

  • src/components/Main/Introduction.tsx
// ...

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 768px;
  height: 400px;
  margin: 0 auto;

  @media (max-width: 768px) {
    width: 100%;
    height: 300px;
    padding: 0 20px;
  }
`

const SubTitle = styled.div`
  font-size: 20px;
  font-weight: 400;

  @media (max-width: 768px) {
    font-size: 15px;
  }
`

const Title = styled.div`
  margin-top: 5px;
  font-size: 35px;
  font-weight: 700;

  @media (max-width: 768px) {
    font-size: 25px;
  }
`

// ...

CategoryList 컴포넌트 반응형 디자인 구현하기

해당 부분은 기존 가로 길이가 768px로 맞춰져 있었지만, 양 옆 20px씩 여백을 남겨두고 꽉 채우도록 반응형 디자인을 구현할 것입니다.

또, 카테고리 아이템의 폰트 사이즈를 조금 줄여주겠습니다.

  • src/components/Main/CategoryList.tsx
// ...

const CategoryListWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 768px;
  margin: 100px auto 0;

  @media (max-width: 768px) {
    width: 100%;
    margin-top: 50px;
    padding: 0 20px;
  }
`

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const CategoryItem = styled(({ active, ...props }: GatsbyLinkProps) => (
  <Link {...props} />
))<CategoryItemProps>`
  margin-right: 20px;
  padding: 5px 0;
  font-size: 18px;
  font-weight: ${({ active }) => (active ? '800' : '400')};
  cursor: pointer;

  &:last-of-type {
    margin-right: 0;
  }

  @media (max-width: 768px) {
    font-size: 15px;
  }
`

// ...

PostList 컴포넌트 반응형 디자인 구현하기

이 부분도 마찬가지로 가로 길이가 768px로 고정되어 있었지만, 양 옆 20px을 여백으로 놔두로 꽉 채우도록 변경하겠습니다.

또, 이에 따라 원래 두 줄로 포스트 아이템을 띄워주던 것을 한 줄로 띄워주는 것으로 바꿔줍시다.

  • src/components/Main/PostList.tsx
// ...

const PostListWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 768px;
  margin: 0 auto;
  padding: 50px 0 100px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 50px 20px;
  }
`

// ...

마지막으로, Footer 컴포넌트에서는 폰트 사이즈만 줄여주도록 하겠습니다.

  • src/components/Common/Footer.tsx
// ...

const FooterWrapper = styled.div`
  display: grid;
  place-items: center;
  margin-top: auto;
  padding: 50px 0;
  font-size: 15px;
  text-align: center;
  line-height: 1.5;

  @media (max-width: 768px) {
    font-size: 13px;
  }
`

// ...

반응형 디자인 구현 결과

위의 사진이 반응형 디자인이 적용된 상태의 화면입니다.

크롬에서 제공하는 반응형 화면을 통해 확인한 화면으로, 너비는 360px입니다.

브라우저 화면을 직접 줄여보면서 스타일이 잘 변경되는지 확인해보세요.