블로그 홈 피드 카드형으로 바꾸기 [hELLO 스킨]

갑자기 블꾸(블로그 꾸미기) 삘이 와서 예쁜 블로그들을 탐색하던 중

 

이 분 티스토리를 봤는데

https://chaeyami.tistory.com/category

이런 카드형 UI 너무 예쁘잖아요!!!

당장 내꺼에 적용해보자!!

현재 민둥,,노멋,,,(내 개인적 생각)인 내 블로그 피드

 

 

그래서!

이 분 블로그를 보면서 따라해보았다.

👇👇👇 바로 가기

[hELLO 스킨 커스텀]  홈 피드 카드형 UX 커스텀하기

[hELLO 스킨 커스텀] 홈 피드 카드형 UX 커스텀하기

 

 

일단 먼저 관리-꾸미기-스킨변경-편집에 들어가서 기본 목록스타일을 그리드로 바꾼다.

그 다음은 위에 블로그를 따라하면 된다.

html을 바꾸고, css에 css 코드를 추가하고 변경하면 된다.

 

위에 블로그를 따라하긴했지만, 조금 손 본 곳도 있어서 코드를 따로 올린다.

HTML

헤더에 제목 위에 카테고리를 보여주기 위해 `<div class="category"></div>` 부분을 제목 위로 올리고, 참고했던 블로그처럼 `header` 클래스 안에 있던 `desc` 클래스 밖으로 꺼냈다.

<s_list_rep>
  <!-- 게시글 콘텐츠 -->
  <div class="post"><a class="link" href=""></a>
    <div class="content">
      <div class="picture">
        <s_list_rep_thumbnail>
          <div class="img"><img class="thumb lazyload" data-src="" data-sizes="auto" alt=""></div>
        </s_list_rep_thumbnail>
        <div class="fallback"></div>
      </div>
      <div class="info">
        <div class="header">
          <div class="category"></div> <!-- 위치 변경 -->
          <div class="tit"></div>
          <div class="summary"></div>
        </div>
        <div class="desc">
          <time class="date"></time>
          <!--<span class="delimiter">·</span>-->
          <!--<div class="category"></div>-->
        </div>
      </div>
    </div>
  </div>
</s_list_rep>

CSS

기존의 `[data-list-style=grid] .post .content .info .summary` 부분을 변경하였다.

/* 변경 전 
[data-list-style=grid] .post .content .info .summary */

/* 변경 후 */
[data-list-style=grid] .post .content .info .summary,
[data-list-style=grid] .post .content .info .category {
  margin-top: 0.5rem;
  max-height: 3.5rem;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

그리고 제목 레이아웃을 맞추기 위해 아래 css 코드를 추가한다.

/* 홈 피드(그리드/갤러리) 카드 제목을 2줄 높이로 고정 */
[data-list-style=grid] .post .tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: calc(1.4em * 2);  /* 2줄 높이 확보 */
}

 

그 외 css는 참고했던 블로그를 따라해서 했다.

 

쨘! 피드가 멋지게 바뀌었다.

저거 저 그리드로 미리 설정해줘야하는걸 몰라서 1시간이나 헤매었다...

나 같은 사람이 없길 바라며!