블로그스팟 목차 오류 해결: 빈 칸 삭제 및 본문 섞임 10분 컷 (HTML 가이드)

 

블로그스팟에서 글을 작성하다 보면
목차에 제목이 아닌 본문 내용이 함께 표시되는 오류가 생길 수 있습니다.

예를 들어 이런 식입니다.

• 제목만 보여야 하는데

• 본문 문장이 목차에 같이 표시됨

• 제목 아래 빈 줄이 생기면서 목차가 이상해짐

저도 같은 문제를 겪으면서 약 1시간 넘게 수정을 했습니다.
결론부터 말하면 원인은 HTML 서식 태그 때문이었습니다.

초보자도 10분 만에 해결할 수 있는 방법을 정리해보겠습니다.

---

⭐블로그스팟 제목 구조 이해하기

블로그스팟에서 목차는 제목 태그 구조를 기준으로 만들어집니다.

HTML에서는 제목을 이렇게 구분합니다.

HTML 태그	블로그 의미	HTML
h2	큰 제목 (목차에 표시되는 주제)	<h2>주제목</h2>
h3	중간 제목	<h3>제목</h3>
h4	세부 설명	<h4>부제목</h4>

이 구조가 깨지면
목차에서 본문이 제목처럼 인식되는 오류가 발생할 수 있습니다.

그래서 블로그 글을 작성할 때는

• 큰 제목 → h2

• 세부 설명 → h3

처럼 단계 구조를 유지하는 것이 중요합니다.

🎯초보자 팁

HTML 코드를 직접 수정하지 않더라도
블로그스팟 글쓰기 화면에서
'제목 / 부제목 / 단락' 메뉴를 사용하면
자동으로 h2, h3 구조가 만들어집니다.

⭐ 블로그스팟 목차 오류 해결방법

1. 왜 내 목차는 난장판이 되었을까? 

블로그스팟 목차는 내 글의 **'머리말(h2, h3)'**을 자동으로 긁어와서 만듭니다. 그런데 글을 쓰다 보면 나도 모르는 '투명 인간' 같은 코드들이 끼어듭니다.

• <span> 태그의 습격: 글자 색, 크기 등을 바꿀 때 생깁니다. 이게 <h2>와 겹치면 목차 프로그램이 "여기서부터 제목이야? 아니면 저기서부터야?"라고 헷갈려 하며 본문까지 다 끌고 옵니다.

• 유령 <h2>: 엔터를 잘못 치면 내용도 없는 <h2></h2>가 생깁니다. 이게 목차에서 알 수 없는 **빈 칸(>)**으로 나타납니다.

2. 해결 단계 : HTML에서 '범인' 검거하기

• 블로그 글 쓰기에서 제목아래 연필을 클릭해서 HTML로 변경을 합니다. 
• <span>은 일단 의심하세요: 제목(<h2>) 바로 앞뒤에 <span>이 너무 많으면 지우는 게 좋습니다. 순수한 <h2>제목</h2> 상태가 가장 안전합니다.

• 닫는 태그(</h2>)를 찾으세요: 제목이 끝났는데 </h2>가 없다면? 그 뒤에 오는 본문 전체가 제목 대우를 받으며 목차에 다 튀어나옵니다.
  
  
• 빈 태그 삭제: <h2>&nbsp;</h2>나 아무 글자 없는 <h2></h2>는 보이는 족족 지우세요. 목차의 빈 줄을 없애는 유일한 방법입니다.
  
  
• HTML에서 이런 코드가 보일 수 있습니다.
  <p>&nbsp;</p> &nbsp;
  이 코드는 빈 줄을 만드는 코드입니다.
  목차  오류를 만들 수 있기 때문에 제하는 것이 좋습니다.

수정 전

<h2>
<span>🔎 티스토리 로그인 안될 때 자주 발생하는 이유 5가지</span>
</h2>

수정 후

<h2>🔎 티스토리 로그인 안될 때 자주 발생하는 이유 5가지</h2>
 
💡줄간격 줄이는 방법

블로그스팟에서 줄바꿈은 두 가지 방식이 있습니다.

키	결과
Enter	새 단락
Shift + Enter	줄바꿈

목차 오류를 줄이려면

Shift + Enter 사용이 더 안전합니다.

⭐가장 확실한 '서식 초기화' (추천)

HTML 수정이 무섭다면 이 방법이 제일 빠릅니다. 90개 넘게 글을 쓰신 분도 이번에 고생하신 이유가 코드가 겹겹이 쌓였기 때문이에요.

1. 문제가 되는 문단을 드래그합니다.

2. 상단 메뉴의 [서식 지우기(T자 빗금)] 아이콘을 누르세요.

3. 글자가 작아지고 코드가 싹 날아갑니다. (이게 '클린'한 상태입니다.)

4. 다시 부제목 지정: 깨끗해진 글자만 드래그해서 다시 **[부제목]**을 눌러주세요.

---

⭐왜 h2는 지우고 h3는 남기나요?

• 보통 블로그스팟 자동 목차 설정에서 h2는 큰 목차, h3는 작은 목차로 인식합니다.

• 아까 우리가 h2를 지웠던 건, 내용도 없이 자리만 차지하는 **'가짜 h2'**였기 때문입니다. 진짜 제목인 h3는 남겨둬야 목차가 생성됩니다.

---

⭐실제 해결 후 모습

100% 만족하지는 않지만, HTML에서 태그가 꼬일 대로 꼬였을 때 나타나는 증상인데, 하나씩 지우는 걸로는 해결이 안 될 만큼 '유령 코드'가 많은 상태라, 초기화를 할까하다가 80%의 수정을 끝냈네요. 

수정 전 화면

수정 후 화면

💡 자주 묻는 질문 FAQ

Q1. 블로그스팟 목차에 본문 내용이 같이 나오는 이유는 무엇인가요?

블로그스팟에서 목차는 <h2>, <h3> 같은 제목 태그 구조를 기준으로 생성됩니다.
하지만 글을 수정하거나 복사 붙여넣기를 하는 과정에서 <span> 태그나 빈 줄 코드( )가 들어가면 목차 생성 스크립트가 본문을 제목으로 인식하는 오류가 발생할 수 있습니다.

이 경우 HTML 보기에서 불필요한 span 태그와 빈 줄 코드를 삭제하면 대부분 해결됩니다.

Q2. HTML 코드를 직접 수정해야 하나요?

반드시 HTML을 직접 수정해야 하는 것은 아닙니다.

블로그스팟 글쓰기 화면에서

• 제목 → H2

• 부제목 → H3

• 본문 → 단락

처럼 제목 구조만 올바르게 설정해도 목차 오류가 해결되는 경우가 많습니다.

다만 문제가 계속 발생한다면 HTML 보기에서 불필요한 서식을 제거하는 방법이 가장 확실합니다.

Q3. 블로그스팟 목차 오류를 예방하는 방법은 무엇인가요?

목차 오류를 예방하려면 다음 방법을 사용하는 것이 좋습니다.

• 외부 글을 복사할 때 서식 제거 후 붙여넣기

• 제목에는 색상, 굵기, span 스타일 최소화

• 줄바꿈은 Shift + Enter 사용

• 글 구조를 h2 → h3 순서로 유지

블로그스팟 목차 오류는 생각보다 많은 사용자들이 겪는 문제입니다.
같은 문제를 겪고 있다면 위 방법을 차근차근 확인해 보세요.

⭐마무리

블로그스팟 목차 오류는
처음 겪으면 꽤 당황스러운 문제입니다.

하지만 원인은 대부분

• span 태그

• 빈 줄 코드

• 글 수정이 많을수록 

블로그스팟을 사용하면서 목차 오류나 HTML 서식 문제는 자주 발생합니다. 같은 문제를 겪는 분들에게 도움이 되길 바랍니다.

---

⭐함께 보면 좋은 글

티스토리 로그인 오류 해결 방법

네이버 2단계 인증 오류 해결 방법

미리캔버스로 만든 디자인, 동영상에서 이미지로 전환하는 방법