블로그 본문 목차 하이퍼링크 HTML 태그 책갈피 설정 방법

목차

1. 개념

2. 블로그 본문 목차 책갈피 하이퍼링크 설정 방법

3. 주의사항









1. 개념

위키 같은 사이트를 보면, 상단 목차에서 번호를 클릭했을 때 동일한 페이지의 게시물 내에서 해당 목록 섹션으로 스크롤이 자동으로 이동하는 기능이 있습니다.

이처럼 하나의 게시물 페이지 내에서 특정 위치로 이동하는 링크를 거는 방법을 책갈피 설정이라 부르며, 그 방식은 하이퍼링크입니다.

하이퍼링크라 하면 보통 현재 페이지에서 다른 페이지로 이동하는 링크를 떠올리게 되는데, 다시 말하지만 하나의 게시물 페이지 본문 내에서도 하이퍼링크로 이동할 수 있습니다.

구글 블로거(blogger.com) 운영자에게는 글쓰기와 별개로 본문에 HTML 태그 삽입이 굉장히 고된 작업이지만, 웹상에서 보여지는 유려한 결과물 그리고 블로그 방문자의 편리함을 생각한다면 게시물 본문에 목차 책갈피 하이퍼링크를 설정하는 편이 좋습니다.










2. 블로그 본문 목차 책갈피 하이퍼링크 설정 방법

HTML 태그를 삽일할 땐 구글 블로거 글쓰기 에디터에서 HTML을 선택하면 됩니다.

예를 들어 아래와 같이 목차를 구성 후 다섯 개의 항목별로 게시물 본문에 하이퍼링크 HTML 태그 책갈피를 설정하는 경우  <a href = “#이동할 위치”>표시될 내용</a>  HTML 태그를 삽입하게 되며, 이동할 위치 바로 위에는  <a name=”이동할 위치”></a>  HTML 태그를 삽입합니다.

*붉게 표시한 부분은 절대 변경할 수 없는 부분, '이동할 위치'와 '내용'은 사용자 입맛에 맞게 이름을 바꿀 수 있는 부분입니다.

  목차의 목록 :  <a href=”#이동할 위치”>표시될 내용</a> 

  이동할 위치 바로 위 : <a name="이동할 위치"></a>

예제의 HTML 태그 중 이동할 위치로 이름을 정한 concept는 작성자의 편의에 따라 다양하게 설정할 수 있습니다.

예제로 보여드린 블로그 본문 목차 하이퍼링크 HTML 태그 책갈피 설정 결과는 아래 링크에서 확인하실 수 있습니다.

https://liwiwi.blogspot.com/2019/01/blog-post_65.html










3. 주의사항

본문 목차 하이퍼링크 HTML 태그 책갈피 설정 후 구글 블로거 에디터에서 HTML이 아닌 글쓰기로 다시 변경할 경우 설정한 HTML 태그가 깨지면서 블로그 링크가 붙는 오류가 발생합니다. 따라서 HTML 태그 설정 후 글쓰기로 변경 없이 바로 게시를 클릭해서 게시물을 발행하는 것을 권장합니다.

다시 말하자면, 글쓰기와 사진 등 미디어 첨부를 모두 끝마친 후에 맨 마지막 단계에 HTML 태그를 삽입 후 바로 게시(게시물 발행)하는 것을 권장합니다.

여담인데, 제 경우 2000년 초반 나모 웹에디터를 사용한 개인 홈페이지 제작 열풍이 불면서 포털 사이트 다음 카페 ‘장미가족의 태그교실’을 찾아보면서 HTML 태그를 배웠습니다. 18년이 흐른 지금 a href 태그를 구글 블로거에 써먹게 되니까 감회가 새롭습니다.

다음 시간에는 요즘 많이 사용되는 마크다운을 구글 블로거에 적용하는 방법을 논하겠습니다.