블로그 카테고리 페이지 디자인 예시 4가지와 반응형 HTML/CSS 코드 전체 통합

안녕하세요. 많은 블로거분이 고민하시는 부분 중 하나가 바로 블로그 첫인상을 결정짓는 카테고리 페이지 디자인일 텐데요. 단순히 글 목록만 나열하는 것보다 방문자의 눈길을 사로잡는 이쁜 카테고리 레이아웃은 클릭률과 체류 시간을 높이는 데 아주 큰 역할을 합니다.

이번 시간에는 지난번에 소개해 드린 4가지 반응형 디자인 스타일을 내 블로그에 실제로 어떻게 이식하는지, 특히 티스토리 치환자를 활용해 자동으로 글을 불러오는 구체적인 방법을 알려드리려 합니다. 디자인 소스만으로는 내 글이 보이지 않기 때문에, 티스토리 시스템과 소통하는 코드로 수정하는 과정이 꼭 필요하거든요.

반응형 블로그 카테고리 디자인의 핵심 요소와 구조

카테고리 페이지 최적화를 위해서는 단순히 예쁜 것을 넘어 사용자 경험(UX)을 고려해야 합니다. 독자가 원하는 정보를 한눈에 찾을 수 있도록 안내하는 네비게이션 허브로서의 기능을 충실히 수행해야 하죠. 제가 생각하는 디자인의 3대 핵심은 다음과 같습니다.

• 이미지 썸네일과 제목, 설명이 조화를 이루는 균형감 있는 배치
• PC는 물론 모바일에서도 글자가 깨지지 않는 반응형 레이아웃
• 카테고리명, 발행일 등 꼭 필요한 정보의 명확한 전달

통합 CSS 코드 (CSS 충돌 방지용 my-cat- 접두사 적용)

먼저 디자인의 뼈대가 되는 전체 CSS 코드입니다. 다른 스킨 스타일과 섞여서 디자인이 깨지는 것을 막기 위해 모든 클래스 명에 my-cat-이라는 이름을 붙여두었습니다. 이 코드를 관리자 페이지의 CSS 편집 영역 가장 아래에 붙여넣어 주세요.

/* CSS 변수 설정 */
:root {
 --my-cat-primary: #FF5E5B;
 --my-cat-secondary: #00CECB;
 --my-cat-dark: #2D3047;
 --my-cat-light: #F5F5F5;
 --my-cat-gray: #939393;
 --my-cat-white: #FFFFFF;
}
.my-cat-container { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: 'Noto Sans KR', sans-serif; }
.my-cat-item { margin-bottom: 3rem; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.4s, box-shadow 0.4s; background-color: var(--my-cat-white); }
.my-cat-item:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
.my-cat-item a { text-decoration: none; color: inherit; display: block; height: 100%; }
.my-cat-thum { overflow: hidden; }
.my-cat-thum img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform 0.5s; display: block; }
.my-cat-item:hover .my-cat-thum img { transform: scale(1.03); }
.my-cat-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.8rem; line-height: 1.3; color: var(--my-cat-dark); }
.my-cat-excerpt { font-size: 1rem; color: var(--my-cat-gray); line-height: 1.6; margin-bottom: 1.2rem; }
.my-cat-category { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; color: var(--my-cat-primary); margin-bottom: 0.5rem; text-transform: uppercase; }
.my-cat-meta { font-size: 0.9rem; color: var(--my-cat-gray); }
.my-cat-date { display: inline-block; margin-top: 5px; }

/* 스타일 1: 오버레이 전용 */
.my-cat-style-overlay { position: relative; height: 500px; overflow: hidden; }
.my-cat-overlay-text { position: absolute; bottom: 0; padding: 2.5rem; width: 100%; color: white; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 2; }
.my-cat-style-overlay .my-cat-title { color: white; font-size: 2.2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* 스타일 2: 좌우 분할 전용 */
.my-cat-style-split .my-cat-split-layout { display: flex; height: 400px; }
.my-cat-style-split .my-cat-text-box { flex: 1; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.my-cat-style-split .my-cat-thum { flex: 1; height: 100%; }

/* 반응형 설정 */
@media (max-width: 768px) {
 .my-cat-style-split .my-cat-split-layout { flex-direction: column; height: auto; }
 .my-cat-style-split .my-cat-thum { order: -1; height: 250px; }
 .my-cat-style-overlay { height: 350px; }
}

티스토리 글 목록 자동 적용을 위한 HTML 수정

이제 HTML 편집 탭으로 이동할 차례입니다. 기존의 글 목록을 감싸고 있는 s_list와 s_list_rep 태그를 찾아 아래 코드로 교체해 보세요. 가장 인기가 많은 좌우 분할 디자인(스타일 2)을 티스토리 치환자와 결합한 실전 코드입니다.

<s_list>
 <div class="my-cat-container">
  <s_list_rep>
   <article class="my-cat-item my-cat-style-split">
    <a href="[##_list_rep_link_##]">
     <div class="my-cat-split-layout">
      <div class="my-cat-text-box">
       <span class="my-cat-category">[##_list_rep_category_##]</span>
       <h2 class="my-cat-title">[##_list_rep_title_##]</h2>
       <p class="my-cat-excerpt">[##_list_rep_summary_##]</p>
       <span class="my-cat-date">[##_list_rep_regdate_##]</span>
      </div>
      <s_list_rep_thumbnail>
       <div class="my-cat-thum">
        <img src="[##_list_rep_thumbnail_url_##]" alt="[##_list_rep_title_##]"/>
       </div>
      </s_list_rep_thumbnail>
     </div>
    </a>
   </article>
  </s_list_rep>
 </div>
</s_list>