반응형
1. 티스토리 관리 페이지에서 [ 서식관리 ] 로 들어갑니다.
2. 서식쓰기를 통해 서식을 등록시켜 봅시다. 글쓰기 모드가 나오면 [기본모드]를 클릭해서 [HTML]로 바꾸어 줍니다.
3. 카테고리를 나누고, 해당 카테고리로 [바로가기] 기능을 만들때 사용하는 코드를 넣어줍니다.
<a href="#title">😁 'Hell' 이 말한다!</a>
//목차앞에 href를 사용하여 이동할 [주소]를 넣어줍니다.
//이동 주소는 인터넷 주소도 되지만, 게시글 안에서 이동시엔
//id를 만들어 주고, 받는 형태를 만듭니다.
<a id="title"></a>😁 'Hell' 이 말한다!
//이동할 목차 앞에 id를 사용하여 해당 id와 #(주소)id가 일치하면 이동합니다.
4. 제 게시판 코드 소스입니다. 아주 간단한 2개의 소스인 href와 id를 이용한 이동입니다.
<blockquote data-ke-size="size16" data-ke-style="style2"><a id="home"></a><span style="color: #ef5369;"><b>아래 목차를 클릭해서 원하는 목차로 바로 가기</b></span></blockquote>
<p data-ke-size="size16"><span style="color: #333333;"><b><b><a href="#title">😁 'Hell' 이 말한다!</a></b></b></span></p>
<p data-ke-size="size16"><span style="color: #333333;"><b><a href="#score">🙄 내맘대로 'Laflix' 솔직 평점</a></b></span></p>
<p data-ke-size="size16"><span style="color: #333333;"><b><b><a href="#yes24">😍 <span style="color: #009a87;">'네이버' 평점</span></a></b></b></span></p>
<p data-ke-size="size16"><span style="color: #333333;"><b><b><a href="#story">🤯 요약 및 줄거리</a></b></b></span></p>
<p data-ke-size="size16"><span style="color: #333333;"><b><a href="#lesson">🐱‍🏍 !!!얻어가자!!!</a></b></span></p>
<p data-ke-size="size16"> </p>
<p> </p>
<p> </p>
<blockquote data-ke-style="style2"><span style="color: #ef5369;"><b>10분 Laflix, 유튜브로 즐기기</b></span></blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h3 data-ke-size="size23"><b><a id="title"></a>😁 'Hell' 이 말한다!<span style="color: #ee2323;"></span></b></h3>
<p> </p>
<blockquote data-ke-style="style3">훈련생들에게 "터틀"(거북이)이라는 이름이 붙은 것은 데니스와 에크하르트의 논쟁이 싱가포르의 거북이 농장 근처에서 시작되었기 때문이다.<br /><br />데니스는 '누구든지 공부(학습)를 통해서 유능한 트레이더가 될 수 있다'는 입장이었고, 에크하르트는 그 반대였다....(중략) <span style="color: #ee2323;"><b>교육의 결과는 실로 대단했다.</b> </span>여러 훈련생이 투자에서 큰 성공을 거두는 성과가 나타났는데, 교육 이후 4년 넘게 연간 100% 이상의 수익을 올리기도 했다고 한다.</blockquote>
<p></p>
<blockquote data-ke-style="style2">작가 차영주<br /><br />유진투자증권, 팟캐스트를 거쳐 유튜브채널 <삼프로TV>를 운영</blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: center;"><a href="#home" target="_top">HOME|처음으로 돌아가기</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" />
<p> </p>
<h3 data-ke-size="size23"> </h3>
<p> </p>
<p> </p>
<p> </p>
<h3 data-ke-size="size23"><b><a id="score"></a>🙄내맘대로 '<span style="color: #ef5369;">Laflix</span>' 솔직<span style="color: #333333;"> 평점</span></b></h3>
<p> </p>
<blockquote data-ke-style="style3">가독성 ★★★★★☆☆☆☆☆<br />흥미점 ★★★★★☆☆☆☆☆<br />배울점 ★★★★★☆☆☆☆☆</blockquote>
<p> </p>
<p> </p>
<h3 data-ke-size="size23"><b><a id="yes24"></a>😍 <span style="color: #009a87;">'네이버' 평점</span></b></h3>
<p> </p>
<blockquote data-ke-style="style3">내용&편집디자인 ★★★★★☆☆☆☆☆ | 7.7점</blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: center;"><a href="#home">HOME|처음으로 돌아가기</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h3 data-ke-size="size23"><b><a id="story"></a>🤯 요약 및 줄거리</b></h3>
<p> </p>
<blockquote data-ke-style="style3">dd<br /><br /><br /><br /><br /><br /><br /><br />dd</blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: center;"><a href="#home">HOME|처음으로 돌아가기</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h3 data-ke-size="size23"><b><a id="lesson"></a>🐱‍🏍 얻어가자</b></h3>
<blockquote data-ke-style="style3">dd<br /><br /><br /><br /><br /><br /><br />dd</blockquote>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><a href="#home">HOME|처음으로 돌아가기</a></p>
<p> </p>
<p> </p>
게시판 바로가기 기능 <조금 더 심플 소스>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" />
<p><a href="#a">1. 장군의 명령</a></p>
<p><a href="#b">2. 아이트리그의 지혜</a></p>
<p><a href="#c">3. 호드를 위하여</a></p>
<p><a href="#d">4. 바람이 전해 온 소식</a></p>
<p><a href="#e">5. 호드의 용사</a></p>
<p><a href="#f">6. 렉사르의 유언</a></p>
<p><a href="#g">7. 눈동자의 환영</a></p>
<p><a href="#h">8. 엠버스트라이프</a></p>
<p><a href="#i">9. 해골시험(3용 크로날리스/스크라이어/솜누스)</a></p>
<p><a href="#j">10. 해골시험(+1용 악트로즈)</a></p>
<p><a href="#k">11. 진급</a></p>
<p><a href="#l">12. 검은용 용사의 피</a></p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" />
<p> </p>
<p> </p>
<p><a id="a"></a>1. 장군의 명령</p>
<p><a id="b"></a>2. 아이트리그의 지혜</p>
<p><a id="c"></a>3. 호드를 위하여</p>
<p><a id="d"></a>4. 바람이 전해 온 소식</p>
<p><a id="e"></a>5. 호드의 용사</p>
<p><a id="f"></a>6. 렉사르의 유언</p>
<p><a id="g"></a>7. 눈동자의 환영</p>
<p><a id="h"></a>8. 엠버스트라이프</p>
<p><a id="i"></a>9. 해골시험(3용 크로날리스/스크라이어/솜누스)</p>
<p><a id="j"></a>10. 해골시험(+1용 악트로즈)</p>
<p><a id="k"></a>11. 진급</p>
<p><a id="l"></a>12. 검은용 용사의 피</p>
<p> </p>반응형
'HTML' 카테고리의 다른 글
| HTML 요소, 속성, 머리글, 문단 (0) | 2020.08.31 |
|---|---|
| HTML 시작하기에 앞서 (0) | 2020.08.30 |
댓글