블로그 디자인을 카테고리별로 다르게 설정하는 구체적인 CSS 특수성 활용 방법을 안내합니다. 티스토리와 같은 단일 레이아웃 기반 플랫폼에서 각 카테고리의 성격에 맞는 고유한 스타일(다크 모드, 이미지 강조 등)을 적용하여 시각적 구분을 명확히 하고 사용자 경험을 향상시키는 CSS 모듈화 전략을 다룹니다. body 태그에카테고리별 클래스를 자동 부여하는 JavaScript 코드와 실용적인 CSS 디자인 샘플을 포함합니다.
블로그를 운영하다 보면 단일 주제에 집중하는 경우도 있지만, 대부분은 콘텐츠 확장 과정에서 자연스럽게 여러 연관 주제를 함께 다루게 됩니다. 특히 티스토리처럼 하나의 레이아웃을 기반으로 다양한 카테고리를 운용하는 경우, 각 카테고리의 성격에 맞는 디자인을 다르게 적용하고 싶을 때가 많습니다.
이럴 때 CSS의 특수성(Specificity)을 적절히 활용하면, 공통 레이아웃을 유지하면서도 카테고리별로 고유한 스타일을 적용할 수 있어 시각적 구분이 명확해지고 사용자 경험도 향상됩니다.
카테고리마다 다른 테마 적용하는 블로그 꾸미기 방법: CSS 분리의 필요성과 원리
이번 글에서는 제가 실제로 티스토리 블로그에서 .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. 실제 코드와 디자인 구현 (CSS 특수성 적용 사례)
아래는 기본 카테고리(category-political) 스타일을 적용한 예시입니다. 이 코드를 통해 CSS 특수성이 어떻게 기존 스타일을 재정의하는지 확인할 수 있습니다.
/* 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 레이아웃과 적당한 패딩, 어두운 배경으로 가독성을 확보합니다.
- 정치 카테고리 전용 스타일에서는 텍스트 박스를 이미지 위에 겹치도록 배치하고, 배경에 그라데이션을 적용해 시각적인 강조를 더했습니다.
- 카테고리 전용 스타일에서는 여백, 테두리 등을 조정해 다른 스타일과 충돌하지 않도록 처리했습니다.
- 공통 스타일
.post-item .excerpt {
color: gray;
}
- 정치 카테고리에서만 적용될 스타일
body.category-political .post-item .excerpt {
color: white;
background: rgba(0,0,0,0.5);
}
4. 카테고리별 클래스 자동 부여하기 (JavaScript 활용)
티스토리에서는 기본적으로 body 태그에 카테고리 정보를 포함하지 않기 때문에, 아래와 같은 스크립트를 이용해 URL 경로를 기준으로 카테고리별 클래스를 자동 추가할 수 있습니다. 이는 카테고리별 CSS 설정을 가능하게 하는 핵심 과정입니다.
JavaScript 코드 설명 및 구현
location.pathname은 현재 페이지의 주소 경로를 의미합니다.startsWith("/category/IT")처럼 특정 경로로 시작하는지를 확인합니다.
자신의 카테고리 URL에 맞게 수정하면 됩니다.- 조건이 맞으면
body태그에category-it,category-political같은 클래스를 자동으로 추가합니다.
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 및 사용자 경험 관점에서의 효과와 확장성
5-1. 디자인 분리의 이점 (SEO와 UX 향상)
- 코드 관리 용이: 카테고리별 스타일 분리로 CSS 파일이 더 명확하고 유지보수가 쉬워집니다.
- 일관된 디자인 유지: 카테고리별 특성을 살리면서도 기본 디자인과 충돌하지 않아 콘텐츠 집중도를 높입니다.
- 빠른 렌더링과 정확한 스타일링: 특수성 원칙을 적절히 활용해 브라우저가 스타일 우선순위를 명확히 이해, 렌더링 성능에 도움 됩니다.
- 사용자 경험 향상: 주제별 디자인 차별화는 방문자가 콘텐츠에 몰입하는데 긍정적 영향을 줍니다.
5-2. 확장성과 모듈화 (CSS 변수 활용)
위 방법은 정치, IT뿐 아니라 다른 카테고리에도 동일하게 적용할 수 있으며, 필요 시 각 카테고리마다 별도의 레이아웃이나 색상 테마도 쉽게 확장 가능합니다. CSS 변수(--primary, --secondary 등)와 함께 사용하면 더욱 일관된 디자인 체계를 유지하고 CSS 모듈화에 유리합니다.
블로그를 보다 개성 있고 독창적인 콘텐츠 플랫폼으로 만들고 싶다면, CSS 특수성 원칙과 카테고리별 클래스를 활용해 기본 스타일과 카테고리 전용 스타일을 명확하게 분리하는 것이 중요합니다. 이렇게 하면 디자인 충돌 없이 각 주제에 맞는 고유한 스타일을 적용할 수 있습니다.
특히 티스토리 블로그에서는 카테고리별 CSS 스타일 분리 적용이 차별화 포인트가 될 수 있습니다. 티스토리만의 강점을 최대한 살려, 나만의 독특한 디자인으로 방문자의 시선을 사로잡고 콘텐츠의 가치를 높여보세요.
다양한 주제의 콘텐츠를 한 곳에 모으는 티스토리 플랫폼에서는 이러한 스타일 분리 기법이 더욱 필수적입니다.
6. 팁 ! 다크 모드 3가지 카테고리 샘플 디자인 (CSS 예제)
블로그를 모던하고 세련된 느낌으로 꾸미고 싶다면, 이미지 갤러리 스타일을 추천합니다. 아래 코드는 심플하지만 세련된 효과를 주는 모던 스타일 CSS 예제입니다. 필요한 분들은 이 코드를 다운로드 받아 자신의 블로그에 맞게 수정 후 활용하시면 됩니다.
6-1. 1번 스타일: 모던 블랙(MODERN BLACK)
어두운 회색 배경(#2b2c2f)과 흰색 텍스트 조합으로 눈의 피로를 줄이고 가독성을 높였습니다.
카드는 둥근 모서리와 마우스 오버 시 부드러운 이동 및 그림자 효과로 자연스러운 인터랙션을 제공합니다.
modern.css
0.00MB
주요 디자인 포인트
- 눈의 피로를 줄이는 다크 테마
어두운 회색 배경과 흰색 텍스트 조합으로 가독성을 높이고, 장시간 읽기에도 부담이 적습니다. - 부드러운 인터랙션 효과
카드에 둥근 모서리와 마우스 오버 시 자연스러운 반응을 제공합니다. - 이미지 본연의 색감 유지
이미지를 원본 그대로 보여주며, hover 시 살짝 확대됩니다. - 안정적인 텍스트 배치
넉넉한 패딩과 여백으로 글이 깔끔하게 정렬됩니다. - 모바일 반응형 구조
화면이 작아지면 세로 정렬로 자동 전환됩니다.
6-2. 2번 스타일: 이미지를 강조한 카테고리 디자인
이미지를 중심에 두고 높이를 600px로 크게 설정해 시각적 주목도를 높였습니다.
텍스트 영역에는 어두운 반투명 배경을 깔아 가독성을 높이고, 이미지 위에 제목과 요약을 배치해 핵심 정보를 쉽게 확인할 수 있습니다.
img.css
0.00MB
주요 디자인 포인트
- 이미지 중심 레이아웃
이미지 높이를 600px로 설정하여 콘텐츠의 시각적 주목도를 높입니다. - 어두운 배경 + 흰색 텍스트
반투명 배경으로 가독성을 높이고 이미지와 잘 어울립니다. - 이미지 위 텍스트 배치
제목과 요약이 이미지 위에 표시됩니다. - 마우스 오버 효과
이미지가 약간 확대되고 카드가 부드럽게 떠오릅니다. - 모바일 대응
작은 화면에서는 세로 방향으로 전환됩니다. - 기본 색상과 글꼴
흰색 텍스트와 굵은 제목으로 안정적 인상을 줍니다.
6-3. 3번 스타일: 현대적인 다크 갤러리
배경은 거의 검정색(#0a0a0a)으로 설정하고, 제목은 그라데이션 텍스트 효과를 적용해 시선을 끕니다. 이미지에는 독특한 클립패스와 필터 효과를 사용해 감각적인 분위기를 더했습니다.
post.css
0.00MB
디자인 주요 포인트
- 어두운 배경과 대비가 높은 텍스트
검정 배경과 그라데이션 제목으로 주목도 향상 - 이미지에 클립패스와 필터 적용
독특한 형태와 분위기를 연출 - 입체감 있는 카드 효과
3D 애니메이션과 그림자로 동적 느낌 제공 - 명확한 레이아웃 구분
충분한 여백으로 가독성을 강화 - 모바일 최적화
클립패스 제거 및 세로 정렬로 간소화
Q1: 카테고리별 CSS를 적용할 때 CSS 특수성이 왜 중요한가요?
CSS 특수성은 스타일의 우선순위를 결정하는 원리입니다. 기본 템플릿의 CSS를 덮어쓰고 특정 카테고리 스타일을 적용하려면, body.category-이름처럼 기본 선택자보다 특수성이 더 높은 선택자를 사용해야 스타일 충돌 없이 원하는 디자인을 정확하게 적용할 수 있기 때문에 중요합니다.
Q2: 티스토리에서 카테고리별 클래스를 body 태그에 어떻게 자동으로 부여하나요?
티스토리는 기본적으로 카테고리 클래스를 제공하지 않으므로, JavaScript를 사용해야 합니다. 제공된 코드처럼 location.pathname.startsWith("/category/카테고리명")를 이용해 현재 URL 경로를 파악하고, 일치하는 경우 document.body.classList.add("category-클래스명") 명령으로 body 태그에 클래스를 동적으로 추가할 수 있습니다.
Q3: 카테고리별 스타일을 설정하면 블로그의 렌더링 속도에 악영향을 주진 않나요?
CSS 특수성을 활용해 스타일을 모듈화하면 오히려 렌더링 성능에 긍정적인 영향을 미칠 수 있습니다. 브라우저가 스타일 우선순위를 명확히 알 수 있기 때문입니다. 다만, 과도하게 복잡한 선택자나 불필요한 JavaScript 코드를 사용하면 성능 저하가 발생할 수 있으므로, 간결한 선택자와 최적화된 스크립트를 사용하는 것이 중요합니다.