구글 블로그(Blogger)에 책갈피(bookmark) 기능 적용하기

  포스트를 쓰다보면 내용이 길어져서 보고싶은 내용을 보려면, 주요 단어를 찾거나 마우스로 스크롤을 해서 찾아야 하는 불편함이 있습니다.

  특히 교육문서나 API와 같은 문서들은 페이지 내용도 길고, 핵심내용을 바로 찾을 수 있도록 책갈피 기능이 잘 되어 있습니다.

  하지만, 구글 블로그에서는 이런 기능이 없기 때문에, 책갈피 기능을 적용해보려고 합니다.

1. 목적
2. URL 복사하기
3. 포스트 편집하기
4. 미리보기 확인하기
5. 업데이트
6. 블로그확인




1. 목적

  작성한 포스트 중 내용이 많아서 포스트 상단부분에 어떤내용으로 구성했는지에 대해 목차형식으로 간략하게 보여줍니다.

  해당 목차를 클릭했을 때, 관련된 제목에 책갈피를 넣어 마우스 스크롤을 하지않고 곧바로 해당위치로 이동할 수 있도록 하려고합니다.

2. URL 복사하기

  책갈피 작업을 진행하기 앞서 먼저 적용할 포스트의 주소(URL)를 복사해 둡니다. 포스트 주소는 책갈피 기능을 넣을 때, 사용하려고 하기 때문에 미리 복사해 두려고 합니다.

3. 포스트 편집하기

  내 블로그 관리화면에서 [게시물] 을 클릭하여 편집할 포스트 제목을 클릭합니다.

  편집화면에서 [HTML] 버튼을 누르면 아래 그림과 같이 포스트 내용이 HTML 태그로 변환되어 보입니다. 아래 그림에서 빨간 밑줄을 보면 책갈피 링크를 적용할 제목을 찾을 수 있습니다. 

  ※ 책갈피 태그설명

  링크버튼은 <a href="URL#책갈피이름">제목<a> 라고 작성하며
  책갈피(이동해야 하는 부분)는 <a name="책갈피이름"></a> 라고 작성합니다.
  

  
  포스트 편집화면에서 링크를 연결할 제목 앞 부분에는 

<a href="http://cremazer.blogspot.kr/2013/08/mysql-rownum.html#index1" target="_self">

  라고 입력하고, 제목 뒷 부분에는 </a>를 입력합니다.

  녹색으로 표시된 URL에는 2.번에서 복사했던 포스트의 URL주소로 변경하고, 빨간색으로 표시된 책갈피 이름은 알아볼 수 있게 적당한 단어로 변경하여 입력합니다.

  링크입력이 끝나면 포스트 내용 아래쪽에 보면 책갈피(이동해야 하는 부분)을 찾을 수 있습니다. 
  
  이동하려고 하는 제목 앞 부분에 책갈피 태그 <a name="index1"></a>를 입력합니다. name에 들어갈 빨갛게 표시된 단어는 링크를 연결할 때 입력했던 책갈피 이름과 동일하게 입력하면 링크를 클릭했을 때, 이곳으로 찾아서 오게 됩니다.

4. 미리보기 확인하기

  미리보기 화면을 보면 아래의 그림처럼 포스트의 목차부분에 링크가 연결되어 있음을 눈으로 확인할 수 있습니다.

5. 업데이트

  책갈피 기능을 추가한 후, 다시 [글쓰기] 버튼을 클릭하여 포스트 내용으로 전환한 후, [업데이트] 버튼을 눌러 작성한 포스트에 반영합니다.

6. 블로그확인

  블로그에서 책갈피 기능을 넣은 포스트를 확인해보면, 아래 그림과 같이 링크가 연결되어 있습니다. 
  

  링크를 클릭하면 책갈피로 입력한 부분(index1)이 브라우저 제일 위쪽에 보이도록 이동합니다. 

다른 목차들도 마찬가지로 위와 같은 방법으로 책갈피 기능을 추가하면 긴 포스트 내용을 좀더 쉽게 확인할 수 있습니다.

여기까지 책갈피 기능에 대해 알아보았습니다.