🎨 티스토리 스킨 편집 완전 정복! HTML과 CSS로 나만의 블로그 만들기

티스토리 블로그를 시작하면서 가장 하고 싶은 일 중 하나는 바로 스킨 꾸미기입니다.
내 블로그를 내가 원하는 디자인으로 바꾸고, 광고도 배치하며, 글을 더 돋보이게 하고 싶죠.
다행히 티스토리는 HTML, CSS 편집이 가능해서 자유도가 매우 높습니다.

하지만 처음 접하는 분이라면 "어디서부터 시작해야 하지?"라는 고민이 들 수 있습니다.
이 글에서는 티스토리 스킨 편집의 모든 것을 차근차근 설명드립니다. 초보자도 충분히 따라할 수 있어요!

---

1. 스킨 편집 메뉴로 들어가기

1. 1) 티스토리 블로그에 로그인합니다.
2. 2) 왼쪽 메뉴에서 꾸미기 → 스킨 편집을 클릭합니다.
3. 3) [HTML 편집] 버튼을 누르면 전체 코드가 열립니다.
4. 4) [CSS 편집] 버튼을 누르면 디자인 요소 수정이 가능합니다.

Tip: 스킨을 수정하기 전에는 꼭

스킨 백업

을 해두세요. 오류 발생 시 복구할 수 있습니다.

---

2. 티스토리 스킨 구조 이해하기

스킨은 웹사이트처럼 HTML, CSS, 이미지 파일로 구성되어 있습니다. 주요 구성은 아래와 같습니다.

• index.xml: 전체 블로그의 틀(HTML 구조)
• style.css: 색상, 글꼴, 여백 등을 조정하는 디자인 파일
• images 폴더: 아이콘, 배경 등 시각 자료 저장소

index.xml은 HTML과 유사하며, <data:post.body/> 같은 티스토리 전용 태그도 함께 사용됩니다.

---

3. HTML로 내 블로그에 원하는 요소 추가하기

HTML 편집은 블로그 본문에 광고를 넣거나, 메뉴를 추가하고, 위젯을 배치할 때 사용됩니다.

예: 본문 하단에 애드센스 광고 삽입

```html

HTML 코드만 잘 삽입해도 광고 수익 향상, 클릭률 증가 등의 효과를 볼 수 있습니다.
광고 외에도 SNS 공유 버튼, 카테고리 박스 등 다양한 요소를 넣을 수 있어요.

---

4. CSS로 글자 크기·색상 바꾸기

CSS는 글자의 스타일, 간격, 버튼 색상 등 블로그 전체의 ‘디자인’을 담당합니다.
style.css 파일을 수정해 원하는 스타일로 꾸밀 수 있습니다.

예시 1: 본문 글자 크기 조정

css 복사 편집 .entry-content { font-size: 18px; line-height: 1.8; color: #333; }

예시 2: 블로그 배경색 바꾸기

css 복사 편집 body { background-color: #f5f5f5; }

원하는 요소가 어떤 CSS 코드인지 모를 때는 크롬 브라우저 → 검사(Inspect) 기능을 활용하면 쉽게 찾을 수 있습니다.

---

5. 반응형(모바일 최적화) 확인하기

전체 방문자의 70% 이상이 모바일에서 접속하는 요즘, 반응형 스킨은 필수입니다.

• 스킨 설정에서 [모바일 최적화] 설정이 켜져 있는지 확인하세요.
• CSS에 @media (max-width: 768px) 구문이 있는지 확인해보세요.
• 폰트 크기, 이미지가 모바일에서도 잘 보이는지 테스트하세요.

기존 스킨이 반응형이 아니더라도, CSS에서 모바일 화면용 스타일을 추가하면 어느 정도 대응이 가능합니다.

---

6. 자주 묻는 질문

• Q. 스킨 편집 중에 화면이 깨졌어요!
  A. 스킨 백업 파일을 불러오거나, 기본 스킨으로 복원하세요.
• Q. 광고가 나오지 않아요.
  A. 애드센스 승인이 되었는지, 광고 코드 위치가 맞는지, 캐시 삭제 후 확인해보세요.
• Q. 스킨을 새로 만들고 싶어요.
  A. HTML과 CSS를 이해하면 index.xml부터 나만의 스킨 제작도 가능합니다.

---

✅ 마무리

티스토리 스킨 편집은 어렵게 느껴질 수 있지만, 한 줄씩만 바꿔보며 익숙해지면 금방 실력이 쌓입니다.
광고 수익을 높이고, 방문자에게 더 좋은 경험을 제공하는 핵심이 바로 스킨 편집입니다.

지금부터 HTML과 CSS로 내 블로그에 생명을 불어넣어 보세요!
처음엔 사소한 변화부터 시작하면 됩니다.

```