티스토리 블로그: 페이지 내 원하는 특정 위치로 스크롤 이동 방법(책갈피 목차 하이퍼링크)

코딩을 전혀 몰라도!

정말 쉽고 간단하게!

 

티스토리 블로그에서

특정 단어, 문장, 이미지를 클릭하면

원하는 위치로 이동하는 방법을 정리해보겠습니다.

(클릭하면 아래로 이동합니다)

 

티스토리 블로그 목차 책갈피 링크(원하는 위치로 스크롤 이동)

---

❖ 티스토리 블로그 책갈피 링크 만드는 방법

1. 글 작성(목차, 목적지)

2. HTML 모드 전환

3. 목적지에 id 추가

4. 목차에 a태그 추가

---

1. 글 작성

: 평소처럼 블로그에 글을 쓰면 됩니다.

 

▶ 목차 작성

: 목차를 작성합니다.

* 1번, 2번 목차를 만들었습니다

 

 

▶ 목적지 작성

: 목차를 클릭하면 이동할 목적지를 작성합니다.

* 2번 목적지엔 '이미지'를 첨부해 넣었습니다

 

 

 

2. HTML 모드 전환

: 글쓰기 모드를 HTML모드로 바꿉니다.

* 어렵지 않으니 걱정 마세요^^

 

▶ HTML 전환

: '기본모드'를 클릭하고, 'HTML'을 선택합니다.

 

 

▶ HTML 둘러보기

: 입력한 내용들이 <p>와 </p> 태그 사이에 감싸져 있습니다. 

* 거의 다 왔습니다! 화이팅!

 

 

 

3. 목적지에 id 추가

: 이동할 대상에 각각 id를 부여합니다.(목차를 클릭하면 이 id를 보고 이동하도록 설정할 예정입니다.)

 

▶ 1번 목적지의 id 추가

: <p> 태그 안에 id="원하는 아이디" 를 입력합니다.

: 'text'라는 아이디를 넣어주면, <p id="text"> # 텍스트 </p> 가 됩니다

 

 

▶ 2번 목적지 id 추가

: 마찬가지로 <p> 태그 안에 id="원하는 아이디" 를 입력합니다.

: 'image'라는 아이디를 넣어주면 <p id="image"> ##_Image......(생략)......## </p> 가 됩니다.

* 이미지든, 텍스트든 상관없이! 원하는 목적지의 <p> 태그에 id값을 넣어주면 됩니다.

* id는 영어 알파벳+숫자로 넣어주면 됩니다.

* 혹시 <p> 태그 안에 다른게 써있어도, p 바로 옆에 한칸 띄고 id="아이디" 를 써주면 됩니다

 

 

 

4. 목차에 a태그 추가 (드디어 마지막!)

: 목차를 클릭하면, id가 설정된 목적지로 이동시키는 작업입니다.

 

▶ 1번 목차에 a태그 추가

: <p> 태그 안의 내용을 <a href="#목적지 아이디"> 와 </a> 로 감쌉니다.

: 1번 목적지의 id를 넣어주면, <p> <a href="#text">1. 텍스트</a> </p> 가 됩니다.

* id 앞에 #을 빼먹지 마세요!

 

 

▶ 2번 목차에 a태그 추가

: <p> 태그 안의 내용을 <a href="#목적지 아이디"> 와 </a> 로 감쌉니다.

: 2번 목적지의 id를 넣어주면, <p> <a href="#image">2. 이미지</a> </p> 가 됩니다.

 

 

▶ 모든 작업이 끝났습니다!!!

 

 

 

# 테스트 해보기

▶ '기본 모드' 돌아가기

: HTML 모드를 종료하고, 기본 모드로 돌아갑니다.

 

 

▶ 포스팅 완료하기

: 아래처럼 목차 1번, 2번에 밑줄이 쳐졌다면 성공입니다. 포스팅을 완료해보세요!

* 혹시 파란색 밑줄 친 글자가 싫다면, 포스팅 하단의 '꿀팁'을 참고하세요

 

 

▶ 테스트

: 목차를 누르면 목적지로 잘 이동합니다!!!

---

# 꿀팁

: 링크에 밑줄이 안 생기게 하려면 <a> 태그에 style="text-decoration:none" 를 추가하세요.

---

티스토리 블로그에서

페이지 내 원하는 위치로 스크롤 이동을 하는

목차 책갈피 기능 구현해 보았습니다.

 

도움이 되시길 바라겠습니다.

 

- 카레유 -