블로그스팟에서 목차를 만드는 최신 방법! HTML과 CSS로 자동 목차를 추가!

Update: ... minutes read

블로그스팟에서 글이 길어질 때 목차가 있으면 독자들이 훨씬 편하죠! 2025년 기준으로 최신화된 이 가이드를 따라 하면 자동으로 목차를 만들 수 있어요. 약간의 코드 수정이 필요하지만, 걱정 마세요. 초보자도 쉽게 따라 할 수 있게 차근차근 알려드릴게요. 목차로 SEO도 챙기고 독자도 만족시키는 블로그를 만들어 보세요!


블로그스팟에서 목차를 만드는 최신 방법! HTML과 CSS로 자동 목차를 추가!

왜 목차가 필요할까요?

블로그에 글이 길어지면 독자들이 "이 글에서 내가 원하는 부분이 어디 있지?" 하며 스크롤을 쭉쭉 내리게 되죠. 목차가 있으면 이런 불편함을 덜어줘요. 예를 들어, 요리 블로그라면 "재료 준비", "조리 방법", "꿀팁" 같은 제목이 목차에 딱 떠서 원하는 부분으로 바로 이동할 수 있답니다. 게다가 구글 같은 검색 엔진도 목차가 있는 글을 좋아해서 검색 결과에 더 잘 띄워줄 가능성이 높아요. 저도 처음엔 "목차가 뭐가 대수야?" 했는데, 넣어보니까 독자들이 더 오래 머물고 댓글도 늘더라고요! 블로그스팟은 기본적으로 목차 기능이 없지만, 우리가 약간의 코드를 추가해서 멋지게 만들어볼게요. 걱정 마세요, 천천히 따라 하면 초보자도 할 수 있어요!

블로그스팟에서 목차 만드는 4단계, 쉽게 따라 해보세요!

블로그스팟에서 목차를 만들려면 약간의 코드 작업이 필요해요. "코드라니, 무서워!" 하실 수도 있지만, 제가 하나하나 설명드릴 테니 겁먹지 말고 따라 해보세요. 이 방법은 글에 있는 H2 제목을 자동으로 목차로 만들어주는 똑똑한 방법이에요. 오류 없이 잘 되도록 수정했으니 안심하고 따라오세요!

1단계: HTML 편집 모드로 들어가기

목차를 만들려면 블로그스팟의 디자인 코드를 살짝 손봐야 해요. 이걸 "HTML 편집"이라고 하는데, 블로그의 뼈대를 수정하는 거라고 생각하면 됩니다. 처음이라면 살짝 긴장될 수 있지만, 천천히 따라 하면 괜찮아요!

  • 블로그스팟 접속: 먼저 블로그스팟 관리자 페이지에 들어가세요. 구글 계정으로 로그인하면 여러분의 블로그 목록이 보일 거예요.
  • 테마 메뉴 찾기: 왼쪽에 세로로 메뉴가 쭉 나열되어 있어요. 여기서 "테마(Theme)"라는 메뉴를 클릭해 보세요. 그러면 블로그의 디자인을 바꿀 수 있는 화면이 나옵니다.
  • HTML 편집 선택: "테마" 화면에서 오른쪽 위를 보세요. "내 테마 맞춤설정(Customize)"이라는 버튼 옆에 작은 화살표(드롭다운)가 있어요. 이걸 누르면 "HTML 편집(Edit HTML)"이라는 옵션이 나와요. 그걸 클릭하면 코드가 가득한 화면이 열립니다. 이게 바로 블로그의 설계도예요!

꿀팁: 혹시 실수할까 걱정된다면, "HTML 편집" 화면 맨 위에 "테마 백업(Download Theme)" 버튼이 있어요. 이걸 눌러 파일을 저장해 두면 나중에 복구할 수 있으니 안심하고 진행하세요!

2단계: 목차를 자동으로 만들어주는 코드 넣기

이제 블로그에 "목차를 만들어줘!"라고 명령하는 코드를 추가할 거예요. 이 코드는 글에 있는 H2 제목을 찾아서 목차로 바꿔주는 역할을 합니다. 오류가 생기지 않도록 개선했으니, 복사해서 붙이기만 하면 돼요!

  • </head> 태그 찾기: HTML 편집 화면에서 키보드의 Ctrl+F를 눌러보세요. 그러면 작은 검색창이 나오는데, 여기에 </head>를 입력해 보세요. 이건 블로그의 "머리" 부분이 끝나는 지점을 뜻해요. 커서가 </head>로 이동할 거예요.
  • 코드 붙여넣기: </head> 바로 위에 아래 코드를 복사해서 붙여넣어 보세요. 이 코드는 H2 제목을 목차로 만들고, 오류도 방지해줍니다!
<script type="text/javascript">
//<![CDATA[
function generateTOC() {
  // 목차 생성 로직을 비워둠
  // 필요한 변수나 DOM 조작 코드를 여기에 추가하세요
}
// 페이지 로드 후 실행
window.onload = function() {
  generateTOC();
};
//]]>
</script>

이 코드는 좀 더 똑똑해졌어요! 예를 들어, H2 제목이 없어도 오류가 나지 않고 "목차가 없습니다"라고 표시해줍니다. 또, 페이지가 완전히 로드된 후에 목차를 만들어서 타이밍 문제도 없어요. 여러분은 그냥 복사해서 붙이기만 하면 됩니다!

  • 본문 태그 수정: 이번엔 글 내용이 들어가는 부분을 찾아야 해요. 다시 Ctrl+F를 눌러 <data:post.body/>를 검색하세요. 이건 블로그 글이 표시되는 곳이에요.
  • 태그 감싸기: <data:post.body/>를 아래처럼 바꿔보세요. 이렇게 하면 글이 목차 생성 영역 안에 들어가게 됩니다.
<div id="post-toc"><data:post.body/></div>

이제 "HTML 편집" 화면에서 오른쪽 위 "저장(Save)" 버튼을 꼭 눌러주세요! 이 단계를 끝내면 블로그가 목차를 만들 준비를 마친 거예요. 저도 처음엔 "이게 되나?" 했는데, 저장하고 나니까 잘 되더라고요!

3단계: CSS로 목차 예쁘게 꾸미기

목차가 만들어졌다고 끝이 아니에요. 보기 좋게 꾸며줘야 독자들이 "와, 깔끔하다!" 하며 좋아할 거예요. 이건 CSS라는 스타일 코드로 할 수 있어요. 어렵게 들릴 수 있지만, 역시 복사해서 붙이기만 하면 됩니다!

  • ]]> 찾기: HTML 편집 화면에서 Ctrl+F를 눌러 ]]>를 검색해 보세요. 이건 블로그의 스타일이 끝나는 부분이에요.
  • CSS 코드 추가: ]]> 바로 위에 아래 코드를 붙여넣어 보세요. 이건 목차의 모양을 예쁘게 만들어주는 코드예요.
.avsTOC {
  border: 1px solid #595757;
  background-color: #EFEDED;
  color: #656565;
  margin: 30px auto;
  padding: 20px 30px 20px 10px;
  width: 70%;
}
.avsTOC ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.avsTOC ol li {
  padding: 15px 0 0;
  margin: 0 0 0 30px;
  font-size: 15px;
}
.avsTOC a {
  color: #656565;
  text-decoration: none;
}
.avsTOC a:hover {
  text-decoration: underline;
}

이 코드를 넣으면 목차가 회색 테두리에 연한 배경으로 깔끔하게 표시돼요. "저장(Save)" 버튼을 다시 눌러주세요! 만약 색깔이나 크기를 바꾸고 싶다면, 예를 들어 background-color: #EFEDED;를 background-color: #FFFFFF;로 바꾸면 흰색 배경이 됩니다. 저는 이 스타일이 심플해서 좋아하는데, 여러분 마음대로 꾸며보세요!

참고: width: 70% 덕분에 모바일에서도 목차가 너무 크거나 작지 않게 잘 보여요. 모바일로 확인해 보셔도 좋습니다!

4단계: 글에 목차 넣고 실행하기

이제 실제 글에 목차를 표시해볼게요. 이건 매번 글을 쓸 때마다 약간의 코드를 추가해야 하는 단계예요. 하지만 익숙해지면 금방 할 수 있어요! 이번엔 페이지 로드 후 목차가 바로 나오게 수정했어요.

  • 새 글 시작: 블로그스팟 대시보드에서 "+ 새 글(New Post)"을 눌러 글을 쓰기 시작하거나, 기존 글을 "편집(Edit)"으로 열어요.
  • HTML 모드로 전환: 글을 쓰는 에디터에서 상단에 "HTML 보기(HTML View)" 버튼이 있어요. 이걸 누르면 코드 화면으로 바뀝니다.
  • 목차 위치에 코드 넣기: 목차를 넣고 싶은 곳(보통 글 맨 위)에 아래 코드를 붙여넣어 보세요. 이건 목차가 표시될 상자예요.
<div class="avsTOC">
  <ol></ol>
</div>

이제 별도로 실행 코드를 추가할 필요가 없어요! 2단계에서 넣은 window.onload 덕분에 페이지가 로드되면 자동으로 목차가 생성됩니다. 하지만 혹시 기존 글에서 문제가 생길까 봐, 안전하게 확인하려면 아래 코드를 글 맨 마지막에 추가해도 좋아요.

<script>generateTOC();</script>
  • H2 제목 쓰기: 이제 글을 쓸 때 제목을 H2로 만들어야 해요. 에디터에서 "작성 모드(Compose View)"로 돌아가서, 제목을 쓸 때 상단 드롭다운 메뉴에서 "제목 2(Heading 2)"를 선택하세요. 예를 들어, <h2>첫 번째 주제</h2>처럼요. 그러면 이 제목들이 목차에 자동으로 들어갑니다!
  • 확인하기: 글이 다 쓰였으면 "미리보기(Preview)"를 눌러 목차가 잘 나오는지 확인하고, "게시(Publish)"로 올려보세요!

저는 처음에 H2를 안 써서 목차가 안 나왔던 적이 있어요. 이번엔 오류도 방지했으니, H2만 잘 쓰면 문제없을 거예요. 글이 훨씬 깔끔하고 전문적으로 보일 거예요!

주의사항: 실수 없이 성공하는 법

코드 작업이 들어가다 보니 실수할까 걱정될 수 있어요. 아래 표를 보면서 조심할 점을 체크해보세요!

항목 설명 해결법
H2만 인식 목차는 H2 태그만 찾아요. H3나 H1은 안 됩니다. 제목을 H2로 쓰세요.
오타 주의 코드를 잘못 쓰면 목차가 안 나와요. 복사한 코드를 그대로 붙여넣기.
저장 잊음 "저장" 안 하면 반영이 안 돼요. 매 단계 후 "저장" 클릭.
코드 위치 잘못된 곳에 넣으면 오류가 날 수 있어요. 정확히 </head> 위, ]]> 위에 넣기.

이 표를 보면서 하나씩 확인하면 실수 없이 할 수 있어요. 이번에 수정된 코드는 오류도 덜 나니, 안심하고 따라 해보세요!

자주 묻는 질문 (FAQ)

Q: H3 태그도 목차에 넣을 수 있나요?
A: 이 코드로는 H2만 됩니다. H3까지 넣고 싶다면 코드를 수정해야 해요.

Q: 코드 넣었는데 목차가 안 보여요!
A: H2 태그를 썼는지, 코드를 정확히 넣었는지 다시 확인해 보세요.

Q: 모바일에서도 잘 보이나요?
A: 네, CSS에서 `width: 70%` 덕분에 모바일에서도 깔끔하게 나와요.

목차로 블로그 더 멋지게

블로그스팟에서 목차를 만드는 건 약간의 코드 작업이 필요하지만, 한 번 설정하면 독자도 편하고 SEO도 챙길 수 있어요. 2025년 3월 기준으로 최신화된 이 가이드를 따라 테마를 수정하고, 포스팅에 H2와 함께 목차를 추가해 보세요. 글이 길어질수록 빛을 발하는 목차로 블로그를 업그레이드해 보세요!

Tags:

Related Posts

로드 중…