1-1 티스토리 HTML 목차 내부 링크 만들기
지금 작성하는 것은 HTML에서 사용하는 것인데 티스토리 포스팅 중에 우측 상단에 HTML 모드가 존재하기 때문에 활용을 해보고자 인터넷에서 본 것을 몇가지 씩 하나하나 끄적여 볼 예정이다. 이전 글들은 수정하기 귀찮으니 패스하고 아마 [2-4 엔티티(Entity)] 부터 목차기능을 사용하게 되었다.
우선 사용하기 앞서 HTML 기능을 활용해야 하는데 티스토리 내부에서 사용할 것이므로 티스토리를 바탕으로 해보도록 하겠다.
우선 목차는 상단에 생성되는 것이기 때문에 목차부터 설정을 한다.
목차
스프링부트
스프링부트
- 너무 어려웡
- 그래도 돈벌어야지
파이썬
- 했는데 기억안나
- 그래서 지금 다시 하는 중
HTML
- 이건 외계어야
- 분명히 외계어야
지금에야 서로 간격이 가까워서 바로바로 볼 수 있지만 포스팅을 하다보면 긴 글이 발생하기도 한다.
우측 상단을 살펴보면 기본모드는 우리가 평소 사용하는 모드이며, 선택을 하면 HTML 선택하는 부분이 나온다.
내가 쓴 글들과 실시간으로 작성되고 있는 글들 그리고 이미지는 코드명으로 변경되어 있음을 확인할 수 있다.
다른 것들은 크게 건드릴 필요 없이 아래의 HTML 코드만 집중하면 된다.
<p data-ke-size="size16">목차</p>
<p data-ke-size="size16">스프링부트</p>
<p data-ke-size="size16">파이썬</p>
<p data-ke-size="size16">HTML</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16">스프링부트</p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>너무 어려웡</li>
<li>그래도 돈벌어야지</li>
</ul>
<p data-ke-size="size16">파이썬</p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>했는데 기억안나</li>
<li>그래서 지금 다시 하는 중</li>
</ul>
<p data-ke-size="size16">HTML</p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>이건 외계어야</li>
<li>분명히 외계어야</li>
목차의 밑 부분 부터 스프링부트 / 파이썬 / HTML에 각각의 고유번호를 부여하는데 이때 사용되는 코드는
<a href="#고유번호">목차내용</a>
위 의 내용으로 바꿔주는데 data-ke-size="size16" 이라는 문구가 보일 것이다. 이는 사이즈를 말하는 것인데 기본모드에서 설정이 잡혀 있기 때문에 해당 코드 앞에 p를 제외하고 입력을 해주면 된다. 실전으로 확인해보자.
구분을 쉽게 하기 위해서 스프링부트가 아닌 HTML로 설정을 잡아보도록 하겠다.
<p data-ke-size="size16">목차</p>
<p data-ke-size="size16">스프링부트</p>
<p data-ke-size="size16">파이썬</p>
<a href="#HTML" data-ke-size="size16">HTML</a>
<...생략...>
<p data-ke-size="size16">HTML</p> 변경 전
<a href="#HTML" data-ke-size="size16">HTML</a> 변경 후
이것으로 끝이냐? 아니다. [그림 1-3]에서 보는 것처럼 파란색 표시가 나와 있지만, 아무런 반응을 하지 않을 것이다.
인공지능이 제대로 갖추어져 있다면 글씨를 보고 바로바로 진행이 되었겠지만, 아지까지 인간의 손길이 필요한 물건이다. a href는 일종의 출발지 역할을 하는 것이다. 이제 도착지를 설정해보도록 하겠다.
<...생략...>
<p data-ke-size="size16">스프링부트</a>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>너무 어려웡</li>
<li>그래도 돈벌어야지</li>
</ul>
<p data-ke-size="size16">파이썬</p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>했는데 기억안나</li>
<li>그래서 지금 다시 하는 중</li>
</ul>
<p id="HTML" data-ke-size="size16">HTML</p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>이건 외계어야</li>
<li>분명히 외계어야</li>
<p data-ke-size="size16">HTML</p> 변경 전
<p id="HTML" data-ke-size="size16">HTML</p> 변경 후
출발지에서는 고유번호를 입력할 당시 #을 활요하였는데 도착지는 #을 땐 모습을 보여주고 있다.
작성 중일때는 당장의 모습이 보이지 않으나 저장을 하고 캡처를 하고 다시 수정으로 캡처본을 올려서 확인을 해보도록 해야 하는데, 실험중일때 확인이 안된다는게 조금 아쉽다. 아무튼 직접 해보면 금방 적응하기 쉬울 것이다.
추가로 목차는 글씨 사이즈가 작은데 넘어간 부분에 제목2 사이즈로 입력을 할 경우 data-ke-size="size16"가 아닌 다른 문장이 있는데 단지 사이즈 문제기 때문에 그 앞에다 그대로 적어주면 된다.
