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

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

블로그 카테고리 페이지의 심미성과 사용자 경험(UX)을 높이는 4가지 반응형 디자인 스타일을 하나의 완성된 HTML 코드로 제공합니다. 썸네일, 텍스트 배치, 반응형 레이아웃이 통합된 이 코드 템플릿은 블로그 운영자가 콘텐츠 클릭률과 체류 시간을 높이는 데 최적화되어 있습니다.

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

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

카테고리 디자인의 핵심 요소

카테고리 페이지는 독자에게 콘텐츠 흐름을 안내하는 네비게이션 허브이자, 전체 블로그 브랜딩을 완성하는 시각적 요소입니다. 핵심적인 디자인 요소는 다음과 같습니다:

• 썸네일 이미지와 텍스트의 균형감 있는 배치
• PC/모바일 모두 대응 가능한 반응형 구조
• 카테고리명, 발행일, 요약 설명 등의 정보 전달

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

아래 코드는 4가지 스타일을 모두 구현하기 위한 공통 스타일과 반응형 미디어 쿼리가 포함된 전체 CSS 코드입니다. 이 코드를 블로그 스킨의 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;
}

.my-cat-style-overlay {
 position: relative;
 height: 500px;
 overflow: hidden;
}

.my-cat-full-image {
 height: 100%;
 position: relative;
}

.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);
}

.my-cat-style-overlay .my-cat-excerpt {
 color: rgba(255,255,255,0.9);
 font-size: 1.1rem;
}

.my-cat-top-right {
 position: absolute;
 top: 1.5rem;
 right: 1.5rem;
 color: white;
 z-index: 10;
 text-align: right;
}

.my-cat-top-right .my-cat-category {
 color: white;
 background-color: rgba(255, 94, 91, 0.8);
 padding: 5px 10px;
 border-radius: 4px;
}

.my-cat-top-right .my-cat-date {
 color: rgba(255,255,255,0.9);
}

.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%;
}

.my-cat-style-split .my-cat-thum img {
 border-radius: 0 12px 12px 0;
 height: 100%;
}

.my-cat-style-rightbox {
 position: relative;
 height: 450px;
}

.my-cat-bg-image {
 height: 100%;
 position: relative;
}

.my-cat-bg-image img {
 border-radius: 12px;
 height: 100%;
}

.my-cat-box-text {
 position: absolute;
 right: 3rem;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(16, 23, 67, 0.9);
 padding: 2rem;
 width: 40%;
 color: white;
 border-radius: 8px;
 box-shadow: 0 5px 20px rgba(0,0,0,0.3);
 z-index: 10;
}

.my-cat-white-text {
 color: white;
}

.my-cat-style-grid {
 padding: 3rem;
 text-align: center;
}

.my-cat-text-center {
 text-align: center;
}

.my-cat-image-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
 margin: 2rem 0;
}

.my-cat-style-grid .my-cat-meta {
 margin-top: 1rem;
 text-align: center;
}

.my-cat-style-grid .my-cat-image-grid img {
 height: 225px;
 border-radius: 8px;
}

@media (max-width: 768px) {
 .my-cat-container {
 padding: 1rem;
 }
 
 .my-cat-item {
 margin-bottom: 2rem;
 }
 
 .my-cat-title {
 font-size: 1.5rem;
 }
 
 .my-cat-style-split .my-cat-split-layout {
 flex-direction: column;
 height: auto;
 }
 
 .my-cat-style-split .my-cat-thum {
 order: -1;
 }
 
 .my-cat-style-split .my-cat-thum img {
 border-radius: 12px 12px 0 0;
 height: 250px;
 }
 
 .my-cat-style-rightbox {
 height: auto;
 }
 
 .my-cat-bg-image img {
 height: 300px;
 }
 
 .my-cat-box-text {
 width: 90%;
 right: 5%;
 position: relative;
 top: 0;
 transform: none;
 margin: -50px auto 20px;
 background: rgba(16, 23, 67, 0.95);
 }
 
 .my-cat-image-grid {
 grid-template-columns: 1fr;
 }
 
 .my-cat-style-overlay, .my-cat-style-rightbox {
 height: 350px;
 }
 
 .my-cat-overlay-text {
 padding: 1.5rem;
 }
 
 .my-cat-style-overlay .my-cat-title {
 font-size: 1.8rem;
 }
 
 .my-cat-style-grid {
 padding: 2rem 1.5rem;
 }
}

@media (max-width: 480px) {
 .my-cat-container {
 padding: 0.5rem;
 }
 
 .my-cat-style-overlay, .my-cat-style-rightbox {
 height: 300px;
 }
 
 .my-cat-style-overlay .my-cat-title {
 font-size: 1.5rem;
 }
 
 .my-cat-box-text {
 width: 95%;
 right: 2.5%;
 padding: 1.5rem;
 }
}

---

Q1: 위 HTML/CSS 코드를 티스토리 블로그에 어떻게 적용해야 하나요?

A1: CSS 코드는 스킨 편집의 'CSS' 영역 가장 하단에 추가하고, HTML 코드는 'HTML 편집' 영역 중 카테고리 목록(List Page)을 담당하는 치환자(예: 주변)를 찾아, 샘플 데이터 대신 적절한 티스토리 치환자를 다시 삽입하여 my-cat-item이 반복 출력되도록 수정해야 합니다. 티스토리 치환자를 적절히 활용하는 것이 중요합니다.

Q2: 카테고리 디자인을 수정할 때 모바일 대응(반응형)이 중요한 이유는 무엇인가요?

A2: 현재 대부분의 블로그 트래픽은 모바일 기기에서 발생합니다. 모바일 환경에서 레이아웃이 깨지면 사용자 경험(UX)이 저하되고, 이탈률 증가 및 SEO 점수 하락으로 이어집니다. 제공된 코드에는 @media (max-width: 768px) 쿼리가 포함되어 모바일 환경에 최적화되도록 구성되어 있습니다.

Q3: 썸네일 이미지의 크기와 비율을 고정하는 것이 중요한가요?

A3: 매우 중요합니다. 썸네일 크기를 고정하거나 object-fit 속성을 사용해야 이미지가 로딩될 때 주변 레이아웃이 밀리는 CLS(Cumulative Layout Shift) 현상을 방지할 수 있습니다. 이는 웹 성능 지표 개선에 필수적이며 시각적 안정성을 확보하는 데 도움을 줍니다.

적용 예졔

스타일 1: 풀 이미지 + 텍스트 오버레이 (my-cat-style-overlay)

썸네일 전체를 배경으로 사용하며, 텍스트가 하단에 오버레이 되어 몰입감을 높입니다.

여행

2024.03.15

세계에서 가장 아름다운 도시 10곳 방문기

로마, 파리, 런던 등 세계의 아름다운 도시들을 직접 방문하고 경험한 이야기를 담았습니다. 각 도시의 숨겨진 명소와 현지인만 아는 맛집까지 소개합니다.

스타일 2: 좌측 텍스트 + 우측 이미지 분할 (my-cat-style-split)

텍스트와 썸네일을 1:1 비율로 좌우 분할하여 텍스트 중심 콘텐츠의 가독성을 높입니다.

테크

2024년 웹 개발 트렌드 분석

AI 통합, 웹 컴포넌트, 성능 최적화 등 올해 주목할 웹 개발 트렌드를 심층 분석합니다. 프론트엔드와 백엔드 각 분야별 핵심 기술 변화를 살펴봅니다.

2024.03.10

스타일 3: 배경 이미지 + 우측 텍스트 박스 (my-cat-style-rightbox)

배경 이미지 위에 텍스트 박스가 떠 있는 듯한 입체적인 효과를 주어 시선을 집중시킵니다.

푸드

집에서 만드는 아트isan 커피 레시피

전문 바리스타의 비법을 배워 집에서 카페 수준의 커피를 만들어보세요. 원두 선택부터 추출 방법, 라떼 아트까지 단계별로 알려드립니다.

2024.03.05

스타일 4: 텍스트 중심 + 이미지 그리드 (my-cat-style-grid)

제목과 요약글을 중앙에 배치하고, 썸네일 이미지를 2x1 그리드 형태로 구성합니다.

사진

한국의 사계절을 담은 풍경 사진 컬렉션

봄의 벚꽃, 여름의 푸른 바다, 가을의 단풍, 겨울의 설경까지 한국의 아름다운 사계절을 다양한 각도에서 담은 사진들을 소개합니다.

2024.03.01