블로그나 홈페이지를 처음 시작하시면 목차에 링크를 추가하여 이동 설정하는 것이 궁금하실 텐데요, 처음에는 HTML 설정 때문에 약간 생소하게 느껴질 수 있습니다. 하지만 기본 명령어를 익혀두면 블로그 작성이 훨씬 편리해집니다. 지금부터 간단하게 따라오시면, 금방 궁금증이 해결될 거에요!
목차
1.티스토리 목차 링크 만들기
HTML 작성
'목차로 시작위치'와 '목차에서 본문도착위치'로 구분
노란점선 참조
<li><a href="#section1">제목 1</a></li><li><a href="#section1">제목 1</a></li>
'목차로 시작위치'의 명령어 "제목 1"(콘텐츠에 맞는 이름으로 변경)
<h2 id="section1">제목 1</h2><h2 id="section1" data-ke-size="size26">제목 1</h2>
'목차에서 본문도착위치'로 이동하는 명령어(h2는 글씨크기)
티스토리에서 h1, h2, h3 태그 이해하기 마지막 확인하시면 부연설명있어요
게시된글(글쓰기완료후)에서 '목차로 시작위치'의 제목1(가제)를 클릭하면
'목차에서 본문도착위치'로 이동을 합니다
블로그 스팟 또한 html은 같아요 밑에 봐로 가기 클릭하시면
블로그 스팟그리고 목차 자동설정방법 안내되어 있어요 ⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
2. 목차 티스토리에 적용
이제 명령어에 대해 알아봤으니 티스토리에 적용시켜볼까요
명령어 다운 받기
티스토리 본문화면입니다
1.왼쪽 ①서식 관리 클릭 하시면 ②서식 쓰기 클릭 새로운 서식을만들수 있습니다
2. 글쓰기 페이지에서 왼쪽 제목위 서식 확인하시고 오른쪽 기본모드에서 HTML 선택
3. HTML모드입니다 당황하지마시고 명령어 다운받기 를 클릭하셔서
-제목에 목차5 (원하시는 이름 사용가능)
-메모장 다운받으신 명령어 복사해서 붙여 넣기 하세요 위와 같이
-그리고 오른쪽 하단에 완료 클릭
서식 작성 완료후 ' 5목차"생성된 페이지가 보일겁니다
3. 티스토리에 확인
이제 글쓰기로 들어가서 확인해볼까요
글쓰기로 들어 오셔서 ... 메뉴 클릭 하시면 "서식"이 있을겁니다
입력한 서식을 선택할수 있어요 '5목차' 를 클릭합니다(불러오기)
필요에 따라 서식을 추가 하고 싶으시면 처음과 같이 입력하면 되겠죠
서식선택후 글쓰기 창에 서식에 입력에둔 HTML 서식이 확인될겁니다
목차 에있는 메뉴(적색 점선)는 절대 기본모드에서 수정하시면 안됩니다(꼭)
목차 제목 밑에 있는 메뉴(노란 점선)은 제목1 부터는 기본모드및 HTML모드에서 수정하셔도 됩니다
*현재 보이는 파란 "제목1"을 클릭하시면 (노란 점선) 에 있는 제목으로 이동합니다
지금현재는 클릭하셔도 이동되지않아요 글쓰기 완료후 게시된 글에서 확인됩니다
이제는 목차의 제목을 수정해야겠죠
HTML모드에 들어오시면 목차 밑 노란 점선 제목 1 .2.3.4.5을 작성하려는 제목으로 변경 하세요> ..... < 화살표는 삭제하시면 안됩니다 화살표 안쪽으로 제목을 변경해서 작성하세요
그리고 목차 밑 "목차에서 본문 도착위치"(녹색 점선) 글들은 HTML을 모르시면 기본모드에서 수정하세요
예제) 노란 점선 제목 1 .2.3.4를 변경 1.2.3.4으로 수정 5번은 삭제했습니다 기본모드에서 확인해볼까요
기본모드로 들어 오시면 목차 밑 주제가 변경1.2.3.4 그리고 5번은 삭제된것이 보일겁니다
제목 1 .2.3.4를 변경 1.2.3.4로 변경된것이 보이시죠
이제는 목차 제목에 맞쳐 녹색점선안에 있는 제목과 내용에 나만의 블로그 포스팅을 하시면됩니다
지금까지 수고 많으셨어요 처음 한번 서식입력하면 글쓰기 할때마다 편하게 사용하실수 있어요
4. 응용 예제
만약 목차가 5개 이상일때는 어떻게 할까요
목차가 8개라고 가정했을때 조금만 응용하시면 됩니다
<li><a href="#section6">제목 6</a></li>
<li><a href="#section7">제목 7</a></li>
<li><a href="#section8">제목 8</a></li>목차 줄에 추가 클릭하는 시작점부분
<h2 id="section6">제목 6</h2>
<p>이곳은 제목 6의 섹션입니다.</p>
<h2 id="section7">제목 7</h2>
<p>이곳은 제목 7의 섹션입니다.</p>
<h2 id="section8">제목 8</h2>
<p>곳은 제목 8의 섹션입니다.</p>
목차8 다운받기
전문가들에게는 쉬운 것일지 모르지만 초보자에게는 너무 힘든 과정같아 포스팅을 했어요
html작성후 클릭이 안되 몇시간 고생했더니 알고 보니 게시글을 작성해야 클릭이 되네요
저같은 실수를 하지마세요
그리고 참고 글로 글씨 크기에 대해
SEO에 중요한 역할(태그 설정)
티스토리에서 h1, h2, h3 태그는 제목을 표시하는 데 사용됩니다.
이들 태그는 검색 엔진 최적화 (SEO)에 중요한 역할을 합니다.
- h1 태그: 페이지의 주요 제목을 나타냅니다.페이지당 하나의 h1 태그를 사용하는 것이 좋습니다.
h1 태그의 글자 크기는 일반 본문보다 크게 설정하는 것이 좋습니다. 보통 24px 이상의 크기를 사용합니다.
- h2 태그: 페이지 내에서 h1 태그 다음으로 중요한 제목을 나타냅니다.
h2 태그의 글자 크기는 h1 태그보다 작게 설정하는 것이 좋습니다. 보통 18px 이상의 크기를 사용합니다.
- h3 태그: h2 태그 다음으로 중요한 제목을 나타냅니다. h3 태그의 글자 크기는 h2 태그보다 작게 설정하는 것이 좋습니다. 보통 16px 이상의 크기를 사용합니다.
SEO에 맞는 글자 크기는 검색 엔진이 페이지의 구조를 이해하고 콘텐츠의 중요성을 파악하는 데 도움을 줍니다.
'IT 정보 > 블로그 기초편' 카테고리의 다른 글
| 구글 애널리틱스 .블로그 스팟에 초보자 연동: 웹사이트 트래픽과 사용자 분석을 쉽게! (0) | 2023.06.21 |
|---|---|
| 구글 서치 콘솔 색인 티스토리 ,블로그 스팟 (Blogger), 초보 따라하기 (0) | 2023.06.21 |
| 구글 블로그 Blogger의 목차에 링크 추가(완전 초보) (1) | 2023.06.11 |
| 구글 블로그 (Blogspot)카테고리추가 (0) | 2023.06.06 |
| 블로그 시작 '워드 프레스'로 시작해? 호스팅은? (0) | 2023.06.06 |
