728x90
반응형
슬커생로스터 ♥ 입니다.
구글 SEO를 위해서는 목차를 만들면 도움이 된다는 말을 듣고 열심히 목차만들기 공부를 했는데 생각보다 쉽지가 않았어요. 가장 편한 자동목차 만들기를 해 보고 싶었으나 미넴스킨의 제작하신 분의 상세한 설명으로 10여 회 따라해 보다가 안되어서 포기하고 좀 더 손이 가지만 초보자가 사용하기 쉬운 모델을 사용했어요. 초보자도 쉽게 따라하시면 될 것 같아요.
HTML 용어 설명
제가 전해서 알고 있는 것들만 우선 정리했어요. 시간이 되면 짝꿍이 정리를 해 본다고는 하지만 언제 될 지는 잘 모르겠어요. 목차만들기에 있는 몇 가지만 알면 티스토리 목차도 만들고 소제목을 꾸밀수 있어요.
- [a] 태그 : 목차로 바로가기 명령을 위한 태그에요
닻이라는 anchor 에서 유래되었다고 해요. 배가 정박url을 실행시키기 위한 닻의 역할을 한다고 해요. 즉, 어떤 URL로 가라는 명령어인 셈이에요. - [href] : hypertext reference의 줄임말
- 하이퍼 텍스트 참고라는 기능인데요
- 내부링크로 보낼 링크를 설정하는 거예요
- < a href="#A1"> A1 링크로 가세요. 라는 거처럼요
- [p id] : 목차를 보낼 목적지
- <p> 는 문단 단락의 표현인데요
- <p id= "A1 ">라는 것은 A1 문단이라는 예를 들면 책갈피 같은 기능이에요
- [blockquote] : 인용구를 쓸 때 사용해요.
- 사실 요건 박스나 강조하기 위해서 제가 자주 쓰는 기능이에요.
- SEO에 영향을 끼치는지는 잘 모르지만 혹시 아는 분이 계시면 이야기 부탁드려요.
목차 만들기 HTML코드
목차를 넣을 코드예요. 아직은 HTML에 익숙하지 않아 미넴스킨의 제작자분처럼 까맣게 하고 싶은데 좀 더 공부를 해 봐야겠어요. 일단, 숨은 글로 사진도 올려 놓았으니 필요하신 분은 보시길 바라요. 제가 사용하는 목차만들기를 텍스트로 첨부하였으니 적절히 변형해서 사용해 보세요.
분명히 코드블럭 삽입을 이렇게 하는데 글을 올리면 검은 색으로 나오네요. 역시나 멀고도 먼 HTML의 길인가 봐요. 일단은 이렇게 된 내용이라는 건 HTML보기에서 복사해서 붙여넣기 하면 이렇게 나와요.
<blockquote data-ke-style="style3">
<h4 data-ke-size="size20"><b>◆ 목차</b></h4>
<p data-ke-size="size16">
<b> [1] <span style="letter-spacing: 0px;"></span><a style="letter-spacing: 0px;" href="#A1">이 </a></b><br />
<b> [2] <span style="letter-spacing: 0px;"></span><a style="letter-spacing: 0px;" href="#A2">이 </a></b><br />
<b> [3] <span style="letter-spacing: 0px;"></span><a style="letter-spacing: 0px;" href="#A3">이 </a></b><br />
<b> [4] <span style="letter-spacing: 0px;"></span><a style="letter-spacing: 0px;" href="#A4">이 </a></b><br /><b>
<b> [5] <span style="letter-spacing: 0px;"><a style="letter-spacing: 0px;" href="#A5">이 </a> </b> <br />
<b> [6] <span style="letter-spacing: 0px;"></span><a style="letter-spacing: 0px;" href="#A6">이 </a> </b></p>
</blockquote>
이런 서식 입력이 가능해요
내용 부분
<h4 style="text-align: center;" data-ke-size="size20"> </h4>
<h4 id="A1" style="text-align: center;" data-ke-size="size20"> </h4>
<p data-ke-size="size16"> </p>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="font-size: 14pt;"><span style="font-size: 14pt;"><span style="font-size: 14pt; font-family: '맑은 고딕', sans-serif;"> </span></span></span></b><b>[1] 가나다</b></span></h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 id="A2" data-ke-size="size20"> </h4>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="color: #f89009;"><span style="font-size: 18.6667px;"> </span></span>[2] 두 번째</b></span></h3>
<h4 data-ke-size="size20"> </h4>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"></p>
<p data-ke-size="size16"> </p>
<h4 id="A3" data-ke-size="size20"> </h4>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="font-size: 14pt;"><span style="font-size: 14pt;"><span style="font-size: 14pt; font-family: '맑은 고딕', sans-serif;"> </span></span></span></b><b>[3] 세번째 내용</b></span></h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"></p>
<h4 id="A4" data-ke-size="size20"> </h4>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="font-size: 14pt;"><span style="font-size: 14pt;"><span style="font-size: 14pt; font-family: '맑은 고딕', sans-serif;"> </span></span></span></b><b>[4] 네 번째 내용</b></span></h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 id="A5" data-ke-size="size20"> </h4>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="font-size: 14pt;"><span style="font-size: 14pt;"><span style="font-size: 14pt; font-family: '맑은 고딕', sans-serif;"> </span></span></span></b><b>[5] 다섯번째</b></span></h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 id="A6" data-ke-size="size20"> </h4>
<h3 style="box-sizing: border-box; margin-bottom: 5px; border-width: 0px 0px 2px 12px; word-spacing: 3px; margin-top: 5px; border-bottom-style: solid; border-bottom-color: #8a3db6; text-align: left; border-left-style: solid; border-left-color: #8a3db6; letter-spacing: 1px; line-height: 1.5; margin-right: 0px; border-image: initial; padding: 3px 5px;" data-ke-size="size23"><span style="color: #8a3db6;"><b><span style="font-size: 14pt;"><span style="font-size: 14pt;"><span style="font-size: 14pt; font-family: '맑은 고딕', sans-serif;"> </span></span></span></b><b>[6] 여섯번째</b></span></h3>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
저는 주로 서식에 추가해서 조금씩 고쳐서 썼어요. 다음 포스팅에서는 서식에서 추가해서 목차를 사용하는 것을 포스팅 해볼게요.
728x90
반응형
그리드형(광고전용)
