안녕하세요 :)
오늘은 HTML로 티스토리 내부링크 만드는 법에 대해 알아보겠습니다.
저는 비전공자이기 때문에 최대한 비전공자도 알기 쉽게 설명해보겠습니다.
내부링크는 포스팅을 할 때 목차를 만들고 해당 목차의 링크를 클릭하여 빠르게 이동하기 위해 사용하는데요.
특히 나무위키에서 검색을 하면 이런 내부링크를 많이 볼 수 있습니다.
티스토리 HTML로 이런 내부링크를 한번 생성해 보겠습니다.
예를들어
목차
1. 강아지
2. 송아지
3. 고양이
내용
1. 강아지
강아지는 멍멍멍 짖는다.
2. 송아지
송아지는 음메 음메 운다.
3. 고양이
고양이는 야옹야옹 운다.
이런 포스팅을 작성한다고 해보겠습니다.
우리는 '목차'의 '1. 강아지'를 클릭하면 '내용'의 '1. 강아지'로 이동하게 해야 합니다.
1. 우선 '기본모드'를 'HTML'로 바꿔줍니다.
그러면 이런 식으로 보이게 됩니다.
2. 출발지를 설정해 줍니다.
'목차'의 '1.강아지'를 클릭해야 하므로 '1.강아지'가 있는 두번째 줄을 출발지라고 말하겠습니다.
<p data-ke-size="size16">1. 강아지</p> 를
<a href="#dog" data-ke-size="size16">1. 강아지</a>로 바꿔줍니다.
이렇게 하면 '목차'의 '1. 강아지'에 링크가 생기게 됩니다.
3. 도착지를 설정해 줍니다.
이제 출발지를 설정해 줬으니 도착지도 정해줘야 겠죠?
도착지는 '내용'의 '1. 강아지'가 있는 여덟번째 줄입니다
.
<p data-ke-size="size16">1. 강아지</p> 를
<p id="dog" data-ke-size="size16">1. 강아지</p> 로 바꿔줍니다.
그래야 출발지에서 입력해줬던 #dog 값을 찾아서 도착지에 오게 됩니다.
이제 끝났습니다.
자 그러면 완성된 HTML을 바탕으로 제대로 내부링크가 만들어졌는지 확인해 보겠습니다.
목차
2. 송아지
3. 고양이
내용
1. 강아지
강아지는 멍멍멍 짖는다.
2. 송아지
송아지는 음메 음메 운다.
3. 고양이
고양이는 야옹야옹 운다.
'일상 > 꿀팁, 정보전달' 카테고리의 다른 글
| 2022년 6월부터 바뀌는 토익스피킹! (성적체계 개편, 시험 개정, 일정) (12) | 2022.06.04 |
|---|---|
| 나의 블로그는 모바일 친화적일까? 구글 모바일 친화성 테스트 (14) | 2022.05.25 |
| 종합소득세, 개인지방소득세 납부 내역 확인하는 방법 (6) | 2022.05.21 |
| 수능 필적 확인란은 어떻게 정해지는 걸까? (역대 수능 필적 확인란 문구 모음) (4) | 2022.05.17 |
| 5월은 근로장려금 신청의 달! (신청 자격, 방법) (4) | 2022.05.08 |
댓글