티스토리 스킨 HTML 수정 기본 가이드 (광고·디자인 커스터마이징 기초)

티스토리 HTML 스킨 수정 방법부터 코드 위치까지 기초 가이드

티스토리 스킨 HTML 수정 기본 가이드 (광고·디자인 커스터마이징 기초)

블로그 디자인을 내 마음대로 바꾸고 싶다면, 티스토리 스킨 HTML 수정을 꼭 알아야 합니다. 기초 구조부터 광고 삽입, 메뉴 수정, CSS 조절까지 처음 수정하는 분도 따라 할 수 있도록 정리했습니다.

📌 티스토리 스킨 구조 요약

구성 파일	설명
index.xml	전체 HTML 틀, 광고 삽입 시 주로 수정
style.css	색상, 폰트, 크기 등 디자인 설정
skin.html	메인 구성, 포스트/목록 표시 담당
widget.html	사이드바 구성 관련

🛠 HTML 수정 방법 (기초)

1. 티스토리 관리자 접속 → [꾸미기 → 스킨편집]
2. HTML 편집 클릭 → skin.html 열기
3. 원하는 위치에 코드 삽입 (예: 광고, 텍스트, 이미지)
4. 수정 후 저장 → 반영 클릭

📎 예시: 광고 삽입 위치

• 본문 상단 광고: <!-- article_content_top --> 근처
• 사이드바 광고: widget.html 내 HTML 배너 삽입
• 글 하단 광고: </article> 직전

💡 CSS 간단 수정 예시

/* 본문 글자 크기 조정 */
.post-content {
  font-size: 16px;
  line-height: 1.7;
}

⚠️ 유의사항

• 백업 없이 수정 시 복구 어려움 → 꼭 백업 후 작업
• 수정 후 반드시 크롬 시크릿 모드로 테스트
• PC/모바일 구조가 다를 수 있음 (반응형 확인 필수)

👉 티스토리 스킨 수정용 필수템 보러가기