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

오늘의 글은 굉장히 짧게 끝내겠다.

한 달 + 보름 전에 '구글 블로그에서 링크를 박스 형태로 예쁘게 만드는 방법'을 포스팅했었고, 바로 이어서 '모바일 화면용 링크 박스를 만드는 방법'도 포스팅했었다.

이전 포스트

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

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

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

모바일 사용자에게 더 나은 경험을 제공하세요. 지난번에 만든 구글 블로그 링크 박스를 모바일 화면에 맞게 크기와 디자인을 조절하는 CSS 코드를 소개합니다.

그런데 여기서 만들었던 CSS 코드를 완전히 뜯어 고치려고 한다.

그 이유는 기존의 모바일 화면에서의 링크 박스 디자인이 너무 미니멀한 나머지 많은 것이 생략되었다.

미니멀한 것을 추구해서 모바일 환경에서는 디스크립션을 보이지 않도록 했는데, 제목도 너무 짧게 표시되어서 이게 무엇에 대한 글인지 알 수가 없다.

이대로라면 방문자가 모바일 화면에서는 이런 링크를 클릭하지 않을 확률이 높아 보인다.

.link-box{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 8px;
  height: 150px;
  border: 1px solid #e7e7e7;
  border-radius: 3px
}
.link-box .link-img-container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 185px;
  border-right: 1px solid #e7e7e7;
  background-size: cover;
  background-position: center
}
.link-box .link-content{
  position: absolute;
  left: 186px;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 15px 25px 0
}
.link-box .link-img{
  float: left;
  width: 100%;
  height: 100%;
  background-position: left top; /* 취향에 따라 center로 변경해도 됨 */
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden
}
.link-box .link-title{
  display: block;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: $(dark.color);
  margin: 0 0 12px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.link-box:hover > .link-content > .link-title{
  color: $(main.color)
}
.link-description{
  overflow: hidden
}
.link-description span{
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: $(posts.text.color);
  font-weight: 400;
  line-height: 1.6em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 39px
}
.link-host{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 15px;
  font-size: small;
  color: #909090;
}
@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
  }
}

이건 그전에 알려줬던 기존의 코드들이다.

이 코드를 아래의 코드로 수정할 거다.

.link-box{
  display: flex; /* Flexbox 컨테이너로 설정 */
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  border: 1px solid #bdbdbd; /* 테두리 색상 변경 */
  border-radius: 3px;
  height: 150px;
  overflow: hidden
}
.link-box .link-img-container{
  flex-shrink: 0; /* 공간이 부족해도 이미지 크기 축소 방지 */
  width: 185px;
  height: 100%;
  border-right: 1px solid #bdbdbd;
  background-size: cover;
  background-position: center
}
.link-box .link-img{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden
}
.link-box .link-content{
  min-width: 0;
  box-sizing: border-box;
  padding: 15px 25px;
  display: flex; /* Flexbox 컨테이너로 설정 */
  flex-direction: column; /* 자식 요소들을 세로로 정렬 */
  justify-content: space-between; /* 요소들 사이에 균등한 간격 부여 */
  height: 100%; /* 부모 요소의 높이를 상속 */
}
.link-box .link-title{
  display: block;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: $(dark.color);
  margin: 0 0 12px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.link-box:hover > .link-content > .link-title{
  color: $(main.color)
}
.link-description{
  overflow: hidden
}
.link-description span{
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: $(posts.text.color);
  font-weight: 400;
  line-height: 1.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 39px
}
.link-host{
  font-size: small;
  color: #909090;
  margin-top: auto; /* 상단 마진을 자동으로 설정하여 아래로 밀착 */
}
@media (max-width: 600px) {
  .link-box{
    flex-direction: column; /* 세로 방향으로 정렬 */
    height: auto
  }
  .link-box .link-img-container{
    width: 100%;
    height: 150px;
    border-right: none;
    border-bottom: 1px solid #bdbdbd
  }
  .link-box .link-content{
    padding: 15px
  }
  .link-box .link-title{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
  }
  .link-description{
    display: block;
    margin-bottom: 12px
  }
  .link-description span{
    height: auto
  }
}

이렇게 수정하자.

모바일 화면에서의 CSS만 수정하려다가 데스크톱 화면의 CSS도 함께 수정했다.

CSS 코드는 수정했지만 테스크톱 화면에서의 링크 박스 디자인은 바뀌지 않는다.

이전과 완벽하게 똑같다.

기존의 position: absolute 대신 .link-box에 display: flex를 적용해서 Flexbox로 레이아웃으로 재구성한 것이다.

썸네일 이미지 자체에 검정 테두리 선이 있어서 뭔가 좌우가 굵어 보이지만, 어쨌든 이렇게 완성했다.

제목도 2줄 이상으로 표시되고, 디스크립션도 표시가 되면서 방문자가 이 링크가 어떤 글의 링크인지 알기 쉽게 됐다.

이렇게 또 하나의 문제를 해결했다 😊

구글 블로그 링크 박스 메이커

구글 블로그 링크 박스 메이커를 소개합니다. URL만 입력하면 예쁜 링크 박스 코드를 자동으로 생성해 드립니다. 이것으로 구글 블로그에 링크를 더욱 쉽게 추가할 수 있습니다.

링크 박스 메이커를 만들었다.

이 링크로 들어가도 되고, 블로그 하단의 푸터 영역에서 LinkBox Maker 메뉴를 클릭해도 된다.

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

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