카테고리별 CSS로 블로그 디자인 다르게 설정하는 법: CSS 특수성 활용

블로그의 각 카테고리 성격에 맞춰 디자인을 다르게 설정하면 사용자 경험(UX)과 콘텐츠 전달력을 획기적으로 높일 수 있습니다. 티스토리와 같이 단일 레이아웃을 사용하는 플랫폼에서 카테고리별 CSS 특수성(Specificity)을 활용해 특정 카테고리에만 고유한 스타일(다크 모드, 이미지 강조 등)을 입히는 모듈화 전략을 소개합니다. body 태그에 클래스를 자동 부여하는 스크립트와 실전 디자인 샘플을 확인해 보세요.

블로그가 성장하다 보면 IT, 맛집, 일상 등 성격이 전혀 다른 콘텐츠들이 섞이기 마련입니다. 이때 모든 글에 똑같은 디자인을 적용하기보다, 주제의 무게감에 맞춰 카테고리별 맞춤 디자인을 적용하면 방문자에게 훨씬 전문적인 인상을 줄 수 있습니다.

CSS의 특수성(우선순위) 원리를 이해하면 기존 공통 레이아웃을 건드리지 않고도 특정 페이지의 스타일만 정교하게 재정의할 수 있습니다. 시각적 구분이 명확해지면 독자의 체류 시간도 자연스럽게 늘어납니다.

카테고리별 CSS 테마 적용의 원리: CSS 분리와 특수성 활용

단일 CSS 파일 내에서 스타일이 엉키지 않게 관리하려면 ‘기본 스타일’과 ‘카테고리 전용 스타일’을 영리하게 분리해야 합니다. 실제 적용 사례를 통해 그 과정을 살펴보겠습니다.

1. 왜 디자인을 분리해야 할까요?

공통 스타일만 사용하면 모든 주제가 천편일률적으로 보입니다. 하지만 주제별로 톤앤매너를 달리하면 브랜드 아이덴티티가 강화됩니다.

주제별 몰입도 향상: IT 카테고리는 모던하고 깔끔하게, 인문학이나 정치 카테고리는 진중하고 깊이 있는 다크 테마로 구성할 수 있습니다.
유지보수의 효율성: 특정 카테고리 디자인만 수정하고 싶을 때 다른 페이지에 영향을 주지 않고 해당 클래스만 수정하면 됩니다.
시각적 위계 질서: 방문자가 현재 어떤 주제의 글을 읽고 있는지 디자인만으로도 직관적으로 인지하게 합니다.

2. CSS 특수성(Specificity)으로 스타일 제어하기

CSS는 선택자가 구체적일수록 우선순위가 높습니다. 이 원리를 이용해 body 태그에 부여된 특정 클래스를 조합하면 기본 스타일을 가볍게 덮어쓸 수 있습니다.

.post-item .text-box (일반적인 선택자: 점수 낮음)
body.category-political .post-item .text-box (body 클래스 조합: 점수 높음 → 우선 적용)

따라서 모든 페이지에 적용될 공통 CSS를 먼저 작성하고, 그 아래에 특정 카테고리용 확장 CSS를 배치하는 구조가 가장 효율적입니다.

3. 실전 코드 구현: 정치 카테고리 디자인 사례

아래는 category-political 클래스가 body에 붙었을 때만 작동하는 특수 스타일 예시입니다. 텍스트 박스를 이미지 위로 띄우고 그라데이션을 주어 강조 효과를 극대화했습니다.

/* [1] 모든 카테고리 공통 스타일 */
.post-item .text-box {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    position: relative;
}

/* [2] 정치(Political) 카테고리 전용 스타일 (특수성 활용) */
body.category-political .post-item .text-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    border: none;
}

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

티스토리 스킨은 보통 body 태그에 카테고리 이름을 넣어주지 않습니다. 이를 해결하기 위해 현재 접속한 URL 경로를 인식해 자동으로 클래스를 추가해 주는 스크립트가 필요합니다.

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