블로그 카테고리 페이지 세련된 디자인 모음: 4가지 스타일과 HTML 코드 예시

블로그 카테고리 페이지 디자인 예시 4가지와 HTML 코드 공유

카테고리 페이지는 블로그의 첫인상을 결정짓는 핵심 요소입니다. 특히 티스토리나 워드프레스처럼 콘텐츠 중심 플랫폼에서는 카테고리의 구조와 디자인만으로도 방문자의 클릭률과 체류 시간을 좌우할 수 있습니다. 이번 포스트에서는 심미성, UX(사용자 경험), 모바일 대응성을 모두 갖춘 이쁜 4가지 스타일의 카테고리 디자인을 소개하고, 바로 활용 가능한 HTML 코드 템플릿을 함께 제공합니다.

반응형 블로그 카테고리 템플릿 코드 모음

카테고리 디자인의 요소

카테고리 페이지는 단순히 글 목록을 나열하는 공간이 아닙니다. 독자에게 콘텐츠 흐름을 안내하는 네비게이션 허브이자, 전체 블로그 브랜딩을 완성하는 시각적 요소입니다. 카테고리 페이지를 설계할 때 다음과 같은 요소들이 핵심입니다:

• 썸네일 이미지와 텍스트의 균형감 있는 배치
• PC/모바일 모두 대응 가능한 반응형 구조
• 카테고리명, 발행일, 요약 설명 등의 정보 전달
• 시각적 일관성과 다양한 콘텐츠 스타일 수용

기본 HTML 구조

아래 코드는 다양한 스타일을 적용하기 위한 기본 HTML 구조입니다.

요소	설명
썸네일	이미지로 시각적 흥미 유도
제목	한눈에 들어오는 크기와 두께로 강조
요약글	클릭 전 글 내용을 미리 전달
날짜 / 카테고리	정보 전달 및 신뢰도 강화
반응형 구조	모바일/태블릿에서도 자연스럽게 표시됨

아래 코드는 스타일별 반복 가능한 기본 구조입니다.

<div class="post-item">
  <a
    href="<!-- 블로그 글 링크 [##_article_rep_link_##-1] -->"
    data-tiara-action-name="블로그글_클릭"
    data-tiara-action-kind="ClickContent"
    data-tiara-copy="<!-- 글 제목 [##_article_rep_title_text_##-1] -->"
    data-tiara-image="<!-- 썸네일 URL [##_article_rep_thumbnail_url_##-1] -->"
    data-tiara-click_url="<!-- 블로그 주소 + 글 링크 https://everydayhub.tistory.com/[##_article_rep_link_##-1] -->"
    data-tiara-name="<!-- 글 제목  -->"
    data-tiara-provider="<!-- 블로그 이름 🌿일상허브-시사.정치 .SEO -->"
    data-tiara-plink="<!-- 글 링크 /613 -->"
    data-tiara-id="<!-- 글 ID 또는 링크 [##_article_rep_li-1nk_##-1] -->">
    
    <div class="split-layout">
      <div class="text-box">
        <span class="category">DESIGN</span>
        <p class="title">글 제목 영역 (ex. [##_article_rep_title_##-1])</p>
        <p class="excerpt">글 요약 영역 (ex. [##_article_rep_summary_##-1])</p>
      </div>
      <div class="thum">
        <!-- 썸네일 이미지 -->
        <img
          loading="lazy"
          src="https://via.placeholder.com/230x129.webp?text=Thumbnail-1"
          alt="썸네일 예시">
      </div>
    </div>
    
    <div class="meta">
      <span class="date">날짜 영역 (ex. [##_article_rep_simple_date_##-1])</span>
    </div>
  </a>
</div>

위 div.post-item은 반복 구조이며, 스타일별 구분은 CSS에서 nth-child() 또는 별도 클래스(style-1, style-2 등)로 제어할 수 있습니다.

공통 CSS

더 정교한 스타일은 본문에 소개된 전체 CSS 코드를 확인하거나, 직접 커스터마이징 하시면 됩니다.

<style>
:root {
  --primary: #FF5E5B;
  --secondary: #00CECB;
  --dark: #2D3047;
  --light: #F5F5F5;
  --gray: #939393;
}

.posts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Spoqa Han Sans', sans-serif;
}

/* 공통 스타일 */
.post-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;
}

.post-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.post-item:hover .thum img {
  transform: scale(1.03);
}

.title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.excerpt {
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.category {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.meta {
  font-size: 0.9rem;
  color: var(--gray);
}
</style>

반응형 블로그 카테고리 템플릿 코드 예제

스타일 1 풀 이미지 + 텍스트 오버레이

• 설명: 썸네일 전체를 배경 삼아, 하단에 텍스트를 덧씌운 형태.
• 활용 분야: 여행, 패션, 건축 등 시각적 강점이 있는 콘텐츠에 적합.
• 주요 CSS

.post-item:nth-child(4n+1) {
  height: 500px;
}

.post-item:nth-child(4n+1) .thum {
  height: 100%;
}

.post-item:nth-child(4n+1) .text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
}

.post-item:nth-child(4n+1) .title {
  color: white;
  font-size: 2.2rem;
}

.post-item:nth-child(4n+1) .excerpt {
  color: rgba(255,255,255,0.8);
}

.post-item:nth-child(4n+1) .meta {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
}

Urban Architecture

도시 속 현대적 건축물의 아름다움을 탐구합니다

ARCHITECTURE 2025.06.23

스타일 2 – 좌측 텍스트 + 우측 이미지 분할

• 설명: flex를 활용한 2단 분할 레이아웃.
• 활용 분야: 디자인, 인터뷰, 칼럼 등 텍스트 중심 콘텐츠.
• 주요 CSS

/* 스타일 2: 좌측 텍스트 + 우측 이미지 */
.post-item:nth-child(4n+2) .split-layout {
  display: flex;
  height: 400px;
}

.post-item:nth-child(4n+2) .text-box {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-item:nth-child(4n+2) .thum {
  flex: 1;
}

.post-item:nth-child(4n+2) .category {
  margin-bottom: 1rem;
}

DESIGN

Minimalist Poster Design

최소한의 요소로 강렬한 메시지를 전달하는 방법

2025.06.22

스타일 3 – 배경 이미지 + 우측 텍스트 박스

• 설명: 이미지 위에 박스 형태 텍스트가 떠 있는 구조.
• 활용 분야: 라이프스타일, 활동 소개, 브랜드 콘텐츠 등.
• 주요 CSS

/* 스타일 3: 이미지 배경 + 우측 텍스트 */
.post-item:nth-child(4n+3) {
  height: 450px;
}

.post-item:nth-child(4n+3) .thum {
  height: 100%;
}

.post-item:nth-child(4n+3) .text-box {
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
    background: #101743;
    padding: 2.5rem;
    width: 40%;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.post-item:nth-child(4n+3) .meta {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  z-index: 2;
}

Mountain Adventure

자연과 함께하는 산악 액티비티 가이드

2025.06.21

스타일 4 – 텍스트 중심 + 이미지 그리드

• 설명: 텍스트를 중심에 배치하고, 썸네일 이미지를 그리드 형식으로 구성.
• 활용 분야: 튜토리얼, 인물사진, 포토리스트 콘텐츠.
• 주요 CSS

/* 스타일 4: 텍스트 중앙 + 이미지 그리드 */
.post-item:nth-child(4n+4) {
  padding: 3rem;
  text-align: center;
}

.post-item:nth-child(4n+4) .thum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.post-item:nth-child(4n+4) .meta {
  text-align: center;
}

PHOTOGRAPHY

Portrait Techniques

인물 사진의 감성을 살리는 10가지 기술

2025.06.20

카테고리 디자인은 단순한 '목록 보기'가 아닌, 콘텐츠에 대한 첫 신뢰를 형성하는 장치입니다. 이 포스팅에서 소개한 4가지 스타일을 적용해 블로그를 보다 세련되고 직관적으로 만들어 보세요.