실전 HTML/CSS로 티스토리 스킨 사용자 맞춤 디자인하기

실전 HTML / CSS로 티스토리 스킨 사용자 맞추 디자인하기

실전 HTML/CSS로 티스토리 스킨 사용자 맞춤 디자인하기

 

티스토리 스킨HTMLCSS반응형다크모드애드센스

📑 목차

• 개요: 스킨 커스터마이징의 범위
• 그리드 레이아웃(2열/1열 전환)
• 색상·타이포 스케일·다크모드
• 카드/목차/버튼 컴포넌트
• 애드센스 배치와 CLS 방지
• 이미지 슬롯·OG·ALT 규칙
• 배포 전 체크리스트
• 최종 정리

 

개요: 스킨 커스터마이징의 범위

 

티스토리는 HTML 편집과 CSS 추가로 대부분의 UI를 바꿀 수 있습니다. 핵심은 레이아웃·테마 시스템·재사용 컴포넌트를 표준화해 유지보수 비용을 줄이는 것.

 

 

핵심: “그리드 → 테마 변수 → 컴포넌트” 순으로 설계하면 확장이 쉽습니다.

데스크톱 2열 . 모바일 1열 전환의 기본 뼈대를 먼저 고정합니다

 

 

그리드 레이아웃(2열/1열 전환)

 

/* 그리드 */
.main-wrap{display:grid;grid-template-columns:1fr 300px;gap:28px}
@media (max-width:1024px){.main-wrap{grid-template-columns:1fr}}
/* 콘텐츠 폭과 글줄 길이 */
.post-content{max-width:760px}
.post-content p{max-width:68ch}

팁: 사이드바는 position:sticky; top:88px;로 고정하면 탐색성이 올라갑니다.

 

색상·타이포 스케일·다크모드

 

:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --pri:#2563eb;
  --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.06);
  --fs-1:clamp(22px,2.2vw,28px); --fs-2:18px; --fs-3:15px;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b1220; --text:#e5e7eb; --muted:#9ca3af; --pri:#60a5fa}
}
body{background:var(--bg);color:var(--text)}

 

색상/글자 크기를 변수로 관리하면 테마 전환이 쉬워집니다.

 

카드/목차/버튼 컴포넌트

 

/* 카드 */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h3{margin:0 0 8px}
/* 버튼 */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--pri);color:#fff}
.btn--ghost{background:transparent;border:1px solid var(--pri);color:var(--pri)}

팁: TOC는 링크에 aria-current를 부여해 현재 위치를 읽어주면 접근성이 좋아집니다.

 

애드센스 배치와 CLS 방지

 

광고 영역에는 고정 크기 컨테이너를 두어 레이아웃 이동(CLS)을 막습니다.

 

<div class="ad-slot" style="min-height:280px">
  <!-- adsense tag here -->
</div>

주의: 1화면 1광고 원칙, 본문 첫 600~800px 내 과도한 배치를 피하세요.

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 문구.
• 본문 이미지: WebP, width/height 지정, loading="lazy".
• ALT: 구조/의도를 설명하는 한 문장(키워드 1회, 과밀 금지).

 

데카 변수로 밝은 모드 / 어두운 모드를 쉽게 전환

 

배포 전 체크리스트

 

1. 그리드 전환(≥1024px 2열, <=1024px 1열)이 정상 동작하는가?
2. 타이포/색상 변수가 적용되고 다크모드 대비가 충분한가?
3. 광고 컨테이너에 고정 높이를 두어 CLS를 방지했는가?
4. 이미지 WebP/지연 로딩/ALT, 내부 링크 2개+를 반영했는가?
5. 접근성: Tab 포커스, 대비(AA), aria-current 점검.

 

출시 전에 구조. 테마. 광고. 접근성을 한 장으로 점검하세요

 

최종 정리

 

스킨 커스터마이징은 그리드→테마 변수→컴포넌트로 설계하면 재사용과 유지보수가 쉬워집니다. 여기에 광고 영역의 고정 높이와 이미지 최적화를 더해 성능과 수익 모두를 챙기세요. 동일 URL을 지속 업데이트하며 지표를 기반으로 색상·타이포·배치를 반복 개선하면 완성도가 빠르게 올라갑니다.