티스토리 뷰
html북마크 태그 활용하기
목차
- 책갈피 태그를 사용하는 이유
- id 태크와 href 태크
- 실제 적용 예시
(목차의 링크를 누르면 해당 소제목으로 넘어갑니다)
책갈피 태그를 사용하는 이유
글을 쓰다 보면 사진과 글이 길어져서 스크롤을 한 두 번 내려서 다 볼 수 없는 양의 글을 쓰게 되었을 때가 있습니다.
단일한 주제로 글 스크롤을 내리며 봐야만 하는 글이라면 상관없겠지만, 대부분은 소주제가 2~3개 있는 경우가 많습니다. 이럴 경우 상단에 목차를 만들어서 원하는 소주제로 바로 점프할 수 있는 책갈피 기능이 있으면 글이 깔끔해지고 독자들의 이용 편의성이 확 올라갑니다.
이제 어떤 태그를 사용하고 어떻게 실전에서 사용할 수 있을지 알아 보겠습니다.
id태그와 href 태그
<id 태그>
책갈피를 할 문장에 id태그로 책갈피를 설정합니다. 아래의 jump1이 '여기로 와라'라는 문장에 북마크 됩니다.
<h2 id = "jump1"> 여기로 와라 </h2>
<a href 태그>
설정해 둔 책갈피에 대한 링크를 적용합니다. ""안에 #을 추가해서 설정해 둔 책갈피를 링크합니다. 링크 문장을 누르면 id 책갈피 된 문장으로 스크롤이 넘어갑니다.
<a href="#jump1">거기로 갈게 </a>
그럼 이 글에서 목차와 소제목에 적용한 태그를 알아보겠습니다.
실제 적용 예시
티스토리 신에디터를 기준으로 얘기합니다. 신에디터의 경우 서체나 제목을 설정하면 위와 같이 문장만 나오는 게 아니라 이런저런 태그가 잔뜩 붙어 있습니다. 그리고 이 글의 경우처럼 소제목에 도형으로 모양을 넣은 경우엔 또 뭐가 잔득 붙어있죠.
[책갈피 설정하기]
아래는 현재 소제목에 붙어있는 태그들입니다. 여기에 id를 설정해야 하는데 대체 어디에 뭘 넣어야 하는지 기본 태그 활용법에는 안 나와있죠.
<h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: #cccccc; padding: 3px 5px; border-left-style: solid; border-left-color: #55555b; margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;"><span style="color: #5d5d5d;"><b>실제 적용 예시</b></span></h3>
책갈피로 사용할 단어는 본인이 헷갈리지만 않으면 길 필요는 없습니다. 1,2,3 이렇게 해도 되고, 예시의 경우엔 j2로 넣었습니다. 그런데 링크가 많을 경우에는 차라리 넘어갈 단어로 id를 설정하는 게 헷갈리지 않을 수 있습니다. 그 위치는 아래와 같이 <h> 태그 다음에 넣으면 됩니다.
<h3 id="j2" style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: #cccccc; padding: 3px 5px; border-left-style: solid; border-left-color: #55555b; margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;" data-ke-size="size23"><span style="font-family: 'Nanum Gothic';"><b><span style="color: #5d5d5d;">실제 적용 예시</span></b></span></h3>
[링크 설정하기]
점프를 시키기 위해서는 목차의 소제목에 링크를 넣어야 합니다. 아래는 이 글의 목차에서 리스트를 적용시켜서 li태그가 들어가 있는 html입니다. 여기에서 a href 태크로 링크를 만들어야 합니다.
<li style="text-align: left;" data-ke-size="size18" data-ke-style="style3"><b><span style="font-family: 'Nanum Gothic';"> 실제 적용 예시</span></b></li>
여기에 링크를 걸려면 아래와 같이 문장의 앞뒤로 걸면 됩니다. 이때 주의할 점은 책갈피 설정해서는 h태그에 붙이는 것이라 이미 </h>로 마무리가 되어 있지만, 링크 태그는 a태그를 새로 붙이는 것이기 때문에 </a>를 붙여줘야 합니다.
<li style="text-align: left;" data-ke-size="size18" data-ke-style="style3"><b><span style="font-family: 'Nanum Gothic';"><a href="#j2"> 실제 적용 예시</a></span></b></li>