구글 블로그에서 모바일 화면용 링크 박스 만들기

이전 포스트

구글 블로그에서 링크를 박스 형태로 만드는 방법

구글 블로그에서 티스토리처럼 예쁜 링크 박스를 만들고 싶으신가요? HTML과 CSS 코드를 직접 추가하여 블로그에 링크 박스 기능을 구현하는 방법을 상세히 알려드립니다.

이전 포스트에서는 구글 블로그에서 링크를 박스 형태로 만드는 방법을 다뤘다.

모바일 화면 최적화는 하지 않고, 일단 데스크톱 화면에서만 예쁘게 보이도록 하고 끝냈었는데,

이번에는 모바일 화면에서도 링크 박스가 예쁘게 보이도록 수정해 보겠다.

모바일 화면에서는 엉망인 링크 박스

지난 포스트에서 적용한 코드로는 아직 링크 박스가 반응형이 아니라서 모바일 화면에서는 이런 모양이 되어버리고 만다.

일단 모바일 화면에서는 세로의 사이즈를 조금 줄이는 것이 좋을 것 같고, 이미지가 차지하는 공간보다 링크하는 웹사이트 이름이나 글 제목이 차지하는 공간을 더 크게 해야 할 것 같다.

미디어 쿼리를 사용해서 반응형으로 만들자

@media (max-width: 600px) {
  .link-box{
    height: 90px
  }
  .link-box .link-img-container{
    width: 90px
  }
  .link-box .link-content{
    left: 91px;
    padding: 15px 15px 0
  }
  .link-box .link-title{
    font-size: 16px;
    font-weight: 400
  }
  .link-description{
    display: none
  }
}

지난 포스트에서 추가했던 코드와 함께 이 코드도 템플릿에 추가해야 한다.

모바일 화면과 데스크톱 화면의 기준을 몇 픽셀(px)로 할 것인지는 자유롭게 바꿔도 상관없다.

여기서는 일단 600px 이하가 되면 모바일 화면에 맞는 링크 박스가 표시되도록 했다.

위에서 언급한 것처럼 링크 박스의 세로 길이를 줄이고, 이미지 사이즈도 줄였고, 폰트의 크기와 굵기도 변경했다.

그리고 링크에 대한 설명은 표시되지 않도록 수정했다.

지난 포스트에서 추가했던 코드에 이어서 아래쪽에 코드를 넣고 저장한다.

그리고 블로그를 확인해 보면 이렇게 모바일 화면에서는 모바일 화면에 맞게 디자인된 예쁜 링크 박스가 표시된다.

다음 포스트

구글 블로그 모바일 화면용 링크 박스 디자인 변경

구글 블로그의 모바일 링크 박스 디자인을 개선하는 방법을 소개합니다. 기존의 미니멀한 디자인을 수정하여 제목과 설명이 모두 표시되도록 CSS 코드를 변경하고, 방문자가 어떤 글인지 한눈에 파악할 수 있도록 만드세요.

모바일 화면용 링크 박스의 디자인을 더 개선했다.

자세한 내용은 링크를 확인하자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.