카테고리별 CSS로 블로그 디자인 다르게 설정하는 법

블로그를 운영하다 보면 단일 주제에 집중하는 경우도 있지만, 대부분은 콘텐츠 확장 과정에서 자연스럽게 여러 연관 주제를 함께 다루게 됩니다. 특히 티스토리처럼 하나의 레이아웃을 기반으로 다양한 카테고리를 운용하는 경우, 각 카테고리의 성격에 맞는 디자인을 다르게 적용하고 싶을 때가 많습니다.

이럴 때 CSS의 특수성(Specificity)을 적절히 활용하면, 공통 레이아웃을 유지하면서도 카테고리별로 고유한 스타일을 적용할 수 있어 시각적 구분이 명확해지고 사용자 경험도 향상됩니다.

카테고리마다 다른 테마 적용하는 블로그 꾸미기 방법

이번 글에서는 제가 실제로 티스토리 블로그에서 .post-item .text-box 스타일을 카테고리별로 나눠서 적용한 방법과, 그 과정에서 고려했던 디자인 포인트들을 편하게 풀어볼게요.

1. 왜 카테고리별 CSS 분리가 필요할까요?

대부분 블로그 템플릿은 공통 스타일로 기본 레이아웃을 구성합니다. 하지만 카테고리 등 각각의 주제 특성에 맞춰 디자인 톤이나 레이아웃이 다르다면, 단일 CSS로 관리하기 어렵고 스타일이 충돌하거나 엉키기 쉽습니다.

예를 들어,

정치 카테고리는 무게감 있는 어두운 그라데이션 배경과 절제된 텍스트 디자인을 원할 수 있고,
IT 카테고리는 깔끔하고 모던한 배경과 좀 더 경쾌한 레이아웃을 원할 수 있습니다.

이럴 때, 카테고리별 고유 클래스를 body에 부여한 후, CSS에서 특수성을 활용해 각 카테고리 스타일을 별도로 관리하면 훨씬 편리하고 유지보수도 용이합니다.

2. CSS 특수성으로 스타일 분리하는 기본 원리

CSS 특수성은 어떤 스타일이 우선 적용될지 결정하는 기준입니다. 선택자의 구성에 따라 특수성이 달라지며, 특수성이 높은 스타일이 낮은 스타일을 덮어씁니다.

.post-item .text-box 선택자의 특수성은 낮습니다.
body.category-political .post-item .text-box처럼 body에 특정 클래스를 포함하면 특수성이 더 높아져 우선 적용됩니다.

따라서, 기본 스타일은 .post-item .text-box에 두고, 카테고리별 변형은 body.category-카테고리명 .post-item .text-box에 작성하는 구조가 바람직합니다.

3. 실제 코드와 디자인 설명

아래는 기본 카테고리(category-political) 스타일을 적용한 예시입니다.

/* 1) 공통 기본 스타일 */
.post-item .text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 320px;
    background: rgba(10, 10, 10, 0.9);
    padding: 2.5rem;
    margin-left: -50px;
    margin-top: -30px;
    position: relative;
    border-right: 3px solid var(--pcs-text-description-secondary);
    transform: translate3d(0, 0, 0);
}

/* 2) 정치 카테고리만 적용할 별도 스타일 */
body.category-political .post-item .text-box {
    left: 0;
    right: 0;
    z-index: 2;
    height: 100%;
    position: absolute;
    bottom: 0;
    padding: 2.5rem; /* 공통과 동일 */
    width: 100%;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), #0000004f);
    
    /* 공통 스타일에서 변경된 부분 초기화 */
    margin-left: 0;
    margin-top: 0;
    border-right: none;
}

디자인 포인트

공통 스타일: 기본적인 flex 레이아웃과 적당한 패딩, 어두운 배경으로 가독성을 확보합니다.
정치 카테고리 전용 스타일에서는 텍스트 박스를 이미지 위에 겹치도록 배치하고, 배경에 그라데이션을 적용해 시각적인 강조를 더했습니다.
카테고리 전용 스타일에서는 여백, 테두리 등을 조정해 다른 스타일과 충돌하지 않도록 처리했습니다.

4. 카테고리별 클래스 자동 부여하기 (JavaScript)

티스토리에서는 기본적으로 <body> 태그에 카테고리 정보를 포함하지 않기 때문에, 아래와 같은 스크립트를 이용해 URL 경로를 기준으로 카테고리별 클래스를 자동 추가할 수 있습니다.

설명

location.pathname은 현재 페이지의 주소 경로를 의미합니다.
startsWith("/category/IT")처럼 특정 경로로 시작하는지를 확인합니다.
👉 자신의 카테고리 URL에 맞게 수정하면 됩니다.
조건이 맞으면 <body> 태그에 category-it, category-political 같은 클래스를 자동으로 추가합니다.

/* 모든 공통 포스트 요약 스타일 */
.post-item .excerpt {
  color: gray;
}

/* 정치 카테고리에서만 적용될 스타일 */
body.category-political .post-item .excerpt {
  color: white;
  background: rgba(0,0,0,0.5);
}

<script>
  document.addEventListener("DOMContentLoaded", function () {
    if (location.pathname.startsWith("/category/Political")) {
      document.body.classList.add("category-political");
    } else if (location.pathname.startsWith("/category/IT")) {
      document.body.classList.add("category-it");
    }
  });
</script>

5. SEO 및 사용자 경험 관점에서의 효과

코드 관리 용이: 카테고리별 스타일 분리로 CSS 파일이 더 명확하고 유지보수가 쉬워집니다.
일관된 디자인 유지: 카테고리별 특성을 살리면서도 기본 디자인과 충돌하지 않아 콘텐츠 집중도를 높입니다.
빠른 렌더링과 정확한 스타일링: 특수성 원칙을 적절히 활용해 브라우저가 스타일 우선순위를 명확히 이해, 렌더링 성능에 도움 됩니다.
사용자 경험 향상: 주제별 디자인 차별화는 방문자가 콘텐츠에 몰입하는데 긍정적 영향을 줍니다.

6. 확장성과 모듈화

위 방법은 정치, IT뿐 아니라 다른 카테고리에도 동일하게 적용할 수 있으며, 필요 시 각 카테고리마다 별도의 레이아웃이나 색상 테마도 쉽게 확장 가능합니다. CSS 변수(--primary, --secondary 등)와 함께 사용하면 더욱 일관된 디자인 체계를 유지할 수 있습니다.

블로그를 보다 개성 있고 독창적인 콘텐츠 플랫폼으로 만들고 싶다면, CSS 특수성 원칙과 카테고리별 클래스를 활용해 기본 스타일과 카테고리 전용 스타일을 명확하게 분리하는 것이 중요합니다. 이렇게 하면 디자인 충돌 없이 각 주제에 맞는 고유한 스타일을 적용할 수 있습니다.

특히 티스토리 블로그에서는 카테고리별 CSS 스타일 분리 적용이 차별화 포인트가 될 수 있습니다. 티스토리만의 강점을 최대한 살려, 나만의 독특한 디자인으로 방문자의 시선을 사로잡고 콘텐츠의 가치를 높여보세요.

다양한 주제의 콘텐츠를 한 곳에 모으는 티스토리 플랫폼에서는 이러한 스타일 분리 기법이 더욱 필수적입니다.

팁 ! 다크 모드 3가지 카테고리 샘플 디자인

블로그를 모던하고 세련된 느낌으로 꾸미고 싶다면, ‘이미지 갤러리’ 스타일을 추천합니다. 아래 코드는 심플하지만 세련된 효과를 주는 모던 스타일 CSS 예제입니다. 필요한 분들은 이 코드를 다운로드 받아 자신의 블로그에 맞게 수정 후 활용하시면 됩니다.

1번 스타일: 모던 블랙(MODERN BLACK)

어두운 회색 배경(#2b2c2f)과 흰색 텍스트 조합으로 눈의 피로를 줄이고 가독성을 높였습니다.
카드는 둥근 모서리와 마우스 오버 시 부드러운 이동 및 그림자 효과로 자연스러운 인터랙션을 제공합니다.

modern.css

0.00MB

주요 디자인 포인트

눈의 피로를 줄이는 다크 테마
어두운 회색 배경과 흰색 텍스트 조합으로 가독성을 높이고, 장시간 읽기에도 부담이 적습니다.
부드러운 인터랙션 효과
카드에 둥근 모서리와 마우스 오버 시 자연스러운 반응을 제공합니다.
이미지 본연의 색감 유지
이미지를 원본 그대로 보여주며, hover 시 살짝 확대됩니다.
안정적인 텍스트 배치
넉넉한 패딩과 여백으로 글이 깔끔하게 정렬됩니다.
모바일 반응형 구조
화면이 작아지면 세로 정렬로 자동 전환됩니다.

2번 스타일: 이미지를 강조한 카테고리 디자인

이미지를 중심에 두고 높이를 600px로 크게 설정해 시각적 주목도를 높였습니다.
텍스트 영역에는 어두운 반투명 배경을 깔아 가독성을 높이고, 이미지 위에 제목과 요약을 배치해 핵심 정보를 쉽게 확인할 수 있습니다.

img.css

0.00MB

주요 디자인 포인트

이미지 중심 레이아웃
이미지 높이를 600px로 설정하여 콘텐츠의 시각적 주목도를 높입니다.
어두운 배경 + 흰색 텍스트
반투명 배경으로 가독성을 높이고 이미지와 잘 어울립니다.
이미지 위 텍스트 배치
제목과 요약이 이미지 위에 표시됩니다.
마우스 오버 효과
이미지가 약간 확대되고 카드가 부드럽게 떠오릅니다.
모바일 대응
작은 화면에서는 세로 방향으로 전환됩니다.
기본 색상과 글꼴
흰색 텍스트와 굵은 제목으로 안정적 인상을 줍니다.

3번 스타일: 현대적인 다크 갤러리

배경은 거의 검정색(#0a0a0a)으로 설정하고, 제목은 그라데이션 텍스트 효과를 적용해 시선을 끕니다. 이미지에는 독특한 클립패스와 필터 효과를 사용해 감각적인 분위기를 더했습니다.

post.css

0.00MB

디자인 주요 포인트

어두운 배경과 대비가 높은 텍스트
검정 배경과 그라데이션 제목으로 주목도 향상
이미지에 클립패스와 필터 적용
독특한 형태와 분위기를 연출
입체감 있는 카드 효과
3D 애니메이션과 그림자로 동적 느낌 제공
명확한 레이아웃 구분
충분한 여백으로 가독성을 강화
모바일 최적화
클립패스 제거 및 세로 정렬로 간소화

저작자표시 비영리 변경금지 (새창열림)

'IT > tech-resources' 카테고리의 다른 글

블로그 동영상 활용법2. 동영상과 유튜브 썸네일 이미지를 블로그에 넣는 쉽고 간단한 방법 (2)	2025.07.01
블로그 자동 생성 목차의 SEO 문제와 해결 방안,검색 노출 막는 목차 구조 (3)	2025.06.29
Gemini CLI 사용을 위한 Google API 키 무료 발급 방법 (초보자도 쉽게 따라 하기) (2)	2025.06.29
블로그 이미지 선명도 최적화, 티스토리 운영자를 위한 이미지 커스텀 리사이징 방법 (2)	2025.06.25
블로그에 감성을 더하다 – Vocaroo 자동 재생 음악 삽입하는 방법 (1)	2025.06.24
블로그 카테고리 페이지 세련된 디자인 모음: 4가지 스타일과 HTML 코드 예시 (5)	2025.06.23
티스토리 글쓰기 에디터 가로폭 조절 방법 3가지와 간단 에디터 프로그램 (2)	2025.06.22

카테고리별 CSS로 블로그 디자인 다르게 설정하는 법

카테고리마다 다른 테마 적용하는 블로그 꾸미기 방법

1. 왜 카테고리별 CSS 분리가 필요할까요?

2. CSS 특수성으로 스타일 분리하는 기본 원리

3. 실제 코드와 디자인 설명

디자인 포인트

4. 카테고리별 클래스 자동 부여하기 (JavaScript)

설명

5. SEO 및 사용자 경험 관점에서의 효과

6. 확장성과 모듈화

팁 ! 다크 모드 3가지 카테고리 샘플 디자인

1번 스타일: 모던 블랙(MODERN BLACK)

주요 디자인 포인트

2번 스타일: 이미지를 강조한 카테고리 디자인

주요 디자인 포인트

3번 스타일: 현대적인 다크 갤러리

디자인 주요 포인트

'IT > tech-resources' 카테고리의 다른 글

티스토리툴바