[티스토리 관련 팁] 티스토리 링크걸기(글 내부에 링크걸기)

1번으로 가기, 2번으로 가기, 3번으로 가기

글은 긴데 스크롤해서 올라가자니 해당 부분을 정확하게 찾는데 불편함이 있을 것 같고

찾는 건 찾는 건데 다시 읽던 곳으로 돌아가는 것에도 불편함이 있을 것 같을 때 

글 내부에 링크를 걸어주셔서 스크롤하는데 불편함을 줄여주시면 됩니다!

 

글 내부에 링크를 거는 방법은

HTML에 a 태그를 이용해 주시면 됩니다.

 

id를 이용해 이동하고 싶은 위치를 지정하고

(id = "(사용자 지정 아이디)") - 중복금지

 

a태그를 이용해 키워드에 링크를 걸어 id가 지정된 위치로 갈 수 있게 해 줍니다

(<a href = "#(사용자 지정 아이디)">키워드</a>) - 중복가능

('#'다음에는 이동할 위치에 설정한 id와 동일하게 작성해 줘야 링크가 걸린 키워드를 클릭 했을 때 지정한 위치로 갑니다.)

 

※파란색으로 작성된 부분은 작성된 내용이 일치하기만 하면 되고 사용자가 편하게 바꿔주시면 됩니다.

+

위치를 지정하는 id는 중복되면 안 됩니다.

사용 예시 ) id = "지정" , <a href = "#지정"></a>

 

어렵지 않으니 잘 따라 하셔서 원하는 곳에 링크를 걸어보세요!!

 

아래는 자세하게 설명한 것이니 필요하신 분들만 보시면 됩니다!!

 

1. 티스토리 글쓰기 창에서 HTML모드로 바꾸기!!

처음으로 가기

2. 이동하고 싶은 위치 설정하기

이동하고 싶은 위치 '<>'(태그) 안에 id(id = "(사용자 지정 아이디)")를 입력해 줍니다.(id는 '</>' 이렇게 작성된 곳에는 작성하지 않습니다.)

작성된 글들을 HTML로 나타낸 거여서 복잡해 보이는 거지 보시면 그냥 작성된 글들입니다.

처음으로

3. a태그를 이용해 링크 걸기

작성된 글 중 링크를 걸 키워드의 앞과 뒤에 가서 <a href = "#(지정한 id)"> 키워드 </a> 이렇게 작성해 줍니다.

 

'처음으로 가기'라는 키워드 앞뒤로 a태그를 이용해 줘서 아래 사진처럼 링크가 걸린 것이고

 

'처음으로' 라는 키워드 앞뒤로 a태그를 이용하면

이렇게 '처음으로'에만 링크가 걸린걸 보실 수 있으십니다.

위로

 

<약간의 팁>

HTML창에서 ' ctrl + f ' 를 이용해 이동할 위치와 링크를 걸 키워드를 좀 더 수월하게 찾으세요!

 

중복된 단어가 많다면 좌측에 있는 숫자를 이용해 해당 키워드가 몇번째 라인인지로 기억해 주시는것도 방법입니다.

 

위 3번 사진을 보면 a태그가 달려있는 라인은 23번 입니다. 글의 내용을 크게 수정하는게 아니라면  5줄 내외로 변동성이 있을 수 있으니 23번을 기억했다가 위아래 5줄을 찾아보면 해당 키워드가 보일겁니다~

 

- 응용(해당되는 숫자로 이동하기), 추가 설명

id로 이동할 곳 지정해주기

중복금지 : 빨간색 네모 안에 작성된 id를 보시면 '1번, 2번, 3번' 으로 각기 다 다릅니다.

id 중복이 없음 원하는 위치로 이동 가능

네모 안에 작성된 id를 보시면 '2번' 으로 두개가 지정되어있습니다.

id 중복이 있음 원하는 위치로 이동하기 어려움

a태그로 링크 걸어주기

위에서 각기다른 id로 설정을 했기에 이처럼 a태그를 이용해 지정된 id를 입력해 주시면 원하는 위치로 갈 수 있는 링크가 만들어집니다.

사진에 글이 잘 보이지 않을까 글만 따로 작성했습니다. <p id="처음" style="text-align: center;" data-ke-size="size16"><a href="#1번">1번으로 가기</a>, <a href="#2번">2번으로 가기</a>, <a href="#3번">3번으로 가기</a></p>

a태그에 사용되는 id의 명칭은 중복되게 사용이 가능하다.(id는 중복금지, a태그에는 중복가능)

태그의 키워드는 다르지만 a태그에 작성된 id("#처음")는 동일하기에 어떤 키워드를 눌러도 1번 라인에 id = "처음"으로 지정된 위치에 이동하게 됩니다. 

 

 

제일 위로 가기