위 움짤을 주목해주세요.
'여기'를 클릭했더니 본문 내 다른 위치로 빠르게 화면이 이동하는 것을 볼 수 있습니다.
오늘은 이와 같이, 티스토리 본문에 링크를 걸어서 본문 내 특정 위치로 빠르게 이동하는 방법을 소개합니다. 본문 내용이 길어지거나 목차를 구성해서 체계적으로 글을 작성할 때 활용하기 좋은 방법입니다.
이동하고자 하는 위치에 '구분선'을 생성합니다.
링크를 클릭하면 이 위치로 화면이 이동하게 됩니다.
링크를 생성할 위치를 결정합니다. 위 이미지에서 '여기' 에 링크를 걸어보겠습니다.
기본모드 - HTML 클릭
HTML 편집 화면이 열렸습니다.
Ctrl + F 눌러서 'hr' 입력.
*hr은 '구분선'의 태그 이름입니다.
앞서 생성한 구분선을 찾습니다.
<hr contenteditable="fasle" ..........
이런 식으로 적혀있을 텐데요..
<hr id="아이디" contenteditable="fasle" ..........
id="아이디" 부분을 새로 작성해줍니다.
아이디는 본인이 원하는 문자 조합으로 자유롭게 만들어도 됩니다. 복사해서 따로 메모해 두세요.
링크를 생성해보겠습니다.
링크를 생성할 곳을 찾습니다. 제 경우에는 '여기'를 찾으면 됩니다. 다음과 같이 코드를 작성해주세요.
<a href="#아이디"> '여기' </a>
링크를 생성할 문자의 앞 뒤를 <a> 태그로 감싸주면 됩니다.
앞서 <hr> 태그에 부여한 아이디를 똑같이 입력하고, 아이디 앞에 #을 꼭 붙여주세요.
다 됐습니다. 기본모드를 눌러서 HTML 편집기를 빠져나갑니다.
링크를 생성한 곳에 밑줄이 생기면서 파란색으로 변했습니다. 제대로 링크를 걸었다는 뜻이죠.
우측 하단 '완료' 버튼을 눌러서 게시글을 발행하면 링크가 정상 작동합니다.
* 확인해보니 '미리보기' 상태에서는 링크가 작동하지 않더라고요..
이상으로, 티스토리 본문에 링크를 걸어서 빠르게 이동하는 방법을 소개해드렸습니다. 티스토리 유저분들께 도움이 됐길 바랍니다. 감사합니다.
'블로그 운영 > 티스토리 블로그' 카테고리의 다른 글
티스토리 일부 게시글에서 인용구 글자 크기 줄이기 (0) | 2021.09.27 |
---|---|
티스토리 블로그 '인용구' 글자 크기 키우기 | 티스토리 css 스킨편집 (1) | 2021.09.19 |
티스토리 블로그 이미지에 외곽선 넣기 | 티스토리 css 스킨편집 (1) | 2021.09.18 |
티스토리 블로그 '구글 서치콘솔' 색인생성 요청 방법 (4) | 2021.09.17 |
구글 서치콘솔에 티스토리 사이트맵, RSS 제출하기 (0) | 2021.08.07 |