티스토리 본문 내 링크 설정 (html 설정)

안녕하세요 :)

 

    오늘 파이썬 포스팅을 작성하면서 본문에 링크를 설정해서 이동하는 기능이 필요했는데요. 찾아보니 생각보다 간단한 방법으로 해결할 수 있어서 기록으로 남기려고 포스팅을 작성합니다. 먼저, 본문 내 링크 설정 기능이 적용된 포스팅입니다.

파이썬으로 .csv 파일 읽기

 

본문 내 링크 설정

    위 그림에서 파란색 밑줄로 표현된 "인덱스 설정"이 본문 내 링크 기능이 적용된 부분입니다. "인덱스 설정"을 누르면 동일한 본문에서 아래 부분으로 이동합니다.

본문 내 링크 연결 부분

 

반응형

 

---

 

본문 내 링크 설정 방법

    본문을 모두 작성한 후 에디터의 "기본모드"에서 "HTML" 모드로 이동합니다.

[기본모드] > [HTML] 모드

 

    Ctrl + f 를 사용해 링크를 설정할 텍스트를 찾습니다. 여기서는 "위에 인덱스 설정 부분을 참고해주세요"라는 문장 중 "인덱스 설정" 단어에 링크를 걸도록 하겠습니다. 아래 코드는 링크를 설정할 "인덱스 설정"이 포함된 문장을 화면에 나타내는 html 코드입니다.

<p data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">&nbsp; &nbsp; <span style="background-color: #f6e199;"><b>인덱스로 사용할 컬럼을 지정합니다.</b></span> 위에 인덱스 설정 부분을 참고해주세요.</span></p>

 

    "인덱스 설정" 단어에 링크를 걸기 위해서는 HTML 코드 내 "인덱스 설정"을 "<a href="#id">인덱스 설정</a>"으로 바꿔줍니다. 여기서 id는 사용자가 원하는 이름으로 지으시면 됩니다. 저는 "link1"이라고 하겠습니다. 이 때 주의할 점은 id 앞에 꼭 #을 붙여야 합니다.

<a href="#link1">인덱스 설정</a>

 

    다음 단계는 링크를 클릭하면 이동할 부분을 지정합니다. 여기서는 위의 "인덱스 설정" 링크를 클릭하면 "인덱스 설정 (index_col)" 텍스트가 있는 부분으로 이동하겠습니다. 아래 코드가 "인덱스 설정 (index_col)"을 화면에 나타내는 부분입니다. 마찬가지로 Ctrl + f 를 사용해서 찾아줍니다.

<h2 data-ke-size="size26"><b><span style="font-family: 'Nanum Gothic';">인덱스 설정 (index_col)</span></b></h2>

 

    링크를 클릭했을 때 이 부분으로 이동하기 위해서는 <h2> 안에 id="id"처럼 설정한 id를 입력해 줍니다. 저는 "link1"이라고 앞에서 설정했으므로 id="link1"으로 입력합니다. 이 때는 id 앞에 #을 붙이지 않습니다.

<h2 id="link1" data-ke-size="size26"><b><span style="font-family: 'Nanum Gothic';">인덱스 설정 (index_col)</span></b></h2>

 

 

    이제 본문 내 링크 설정을 마쳤습니다. 확인을 위해 다시 에디터의 기본모드로 이동합니다. 아래 그림과 같이 링크를 설정한 텍스트에 파란색 글씨와 밑줄로 링크가 생성된 것을 확인할 수 있습니다.

링크 설정 완료

 

---

 

    이상으로 티스토리에서 본문 내 링크를 설정하는 방법에 대해 살펴봤습니다.

감사합니다 :>