 |
| 버튼형 목차 만들기 |
이런 분께 추천합니다
-
티스토리나 워드프레스 블로그를 운영 중이신 분
-
본문 길이가 길어 목차를 버튼처럼 보여주고 싶은 분
-
클릭 시 해당 섹션으로 이동되는 앵커 링크 기능을 적용하고
싶은 분
-
깔끔한 디자인의 버튼 스타일로 블로그 가독성을 높이고 싶은 분
복사해서 바로 쓰는 HTML 코드
아래 코드를 블로그 글쓰기 화면 > HTML 모드에서 붙여
넣어주세요.
폰트, 색상, 정렬, 버튼 둥글기 등은 모두 기본 스타일로
세팅되어 있습니다.
목차 + 버튼형 스타일 전체 코드
아래 복사해서 사용하세요. HTML 가서 복사 넣기 하시면
됩니다.
* HTML 가면 글씨도 작고 많이 복잡하니 코드 놓는 부분에 '코드넣기'라고 표기하면 찾기 좋을겁니다.
<h3 style="margin-top: 30px;">📌 목차</h3>
<div style="display: flex; flex-direction: column; gap: 10px;
margin: 10px 0 30px 0;">
<a href="#section1" style="display: block; padding: 12px
20px; background-color: #4CAF50; color: white; border-radius: 8px;
text-decoration: none; font-weight: bold;">1. 사업 개요</a>
<a href="#section2" style="display: block; padding: 12px
20px; background-color: #2196F3; color: white; border-radius: 8px;
text-decoration: none; font-weight: bold;">2. 지원 대상</a>
<a href="#section3" style="display: block; padding: 12px
20px; background-color: #FF9800; color: white; border-radius: 8px;
text-decoration: none; font-weight: bold;">3. 신청 방법</a>
<a href="#section4" style="display: block; padding: 12px
20px; background-color: #9C27B0; color: white; border-radius: 8px;
text-decoration: none; font-weight: bold;">4. 제출 서류</a>
<a href="#section5" style="display: block; padding: 12px
20px; background-color: #E91E63; color: white; border-radius: 8px;
text-decoration: none; font-weight: bold;">5. 유의 사항</a>
</div>
위까지 복사해서 HTML로 들어가서 복사넣기 해서 사용하시면
됩니다.
빨간글씨 수정해서 사용하시면 됩니다.
-> 버튼을 클릭하면 해당 제목으로 이동하도록 연결되어야 하므로,
아래처럼 id 속성을 설정해주셔야 합니다.
1. 사업 개요(제목 수정)
정책이나 사업에 대한 개요를 작성합니다.(내용 기재)
2. 지원 대상
해당 지원을 받을 수 있는 자격요건을 설명합니다. (내용 기재)
3. 신청 방법
신청 경로, 절차, 기간 등을 안내합니다. (내용 기재)
4. 제출 서류
필요한 제출 서류 목록을 정리합니다. (내용 기재)
5. 유의 사항
중복 신청 가능 여부나 주의할 점을 안내합니다. (내용 기재)
아래 복사해서 사용하세요. HTML 가서 복사 넣기 하시면
됩니다
HTML 가면 글씨도 작고 많이 복잡하니 코드 놓는 부분에 '코드넣기'라고 표기하면 찾기 좋을겁니다.
<h2 id="section1">1. 사업 개요</h2>
<p>정책 개요에 대한 설명을 작성하세요.</p>
<h2 id="section2">2. 지원 대상</h2>
<p>지원받을 수 있는 자격 조건을 작성하세요.</p>
<h2 id="section3">3. 신청 방법</h2>
<p>신청 경로, 기간, 방법 등을 안내하세요.</p>
<h2 id="section4">4. 제출 서류</h2>
<p>필요한 서류 목록을 나열하세요.</p>
<h2 id="section5">5. 유의 사항</h2>
<p>신청 시 주의할 사항이나 예외 조항 등을
작성하세요.</p>
위까지 복사해서 HTML로 들어가서 복사넣기 해서 사용하시면
됩니다.
빨간글씨 수정해서 사용하시면 됩니다.
2. B형 타입
📌 목 차
아래 복사해서 사용하세요. HTML 가서 복사 넣기 하시면
됩니다.
* HTML 가면 글씨도 작고 많이 복잡하니 코드 놓는 부분에 '코드넣기'라고 표기하면 찾기 좋을겁니다.
<h3 style="margin-top: 30px;">📌 목차</h3>
<div style="display: flex; flex-wrap: wrap; gap: 10px;
margin: 10px 0 30px 0;">
<a href="#section1" style="display: inline-block;
padding: 10px 20px; background-color: #4CAF50; color: white;
border-radius: 8px; text-decoration: none; font-weight:
bold;">1. 사업 개요</a>
<a href="#section2" style="display: inline-block;
padding: 10px 20px; background-color: #2196F3; color: white;
border-radius: 8px; text-decoration: none; font-weight:
bold;">2. 지원 대상</a>
<a href="#section3" style="display: inline-block;
padding: 10px 20px; background-color: #FF9800; color: white;
border-radius: 8px; text-decoration: none; font-weight:
bold;">3. 신청 방법</a>
<a href="#section4" style="display: inline-block;
padding: 10px 20px; background-color: #9C27B0; color: white;
border-radius: 8px; text-decoration: none; font-weight:
bold;">4. 제출 서류</a>
<a href="#section5" style="display: inline-block;
padding: 10px 20px; background-color: #E91E63; color: white;
border-radius: 8px; text-decoration: none; font-weight:
bold;">5. 유의 사항</a>
</div>
위까지 복사해서 HTML로 들어가서 복사넣기
해서 사용하시면 됩니다.
빨간글씨 수정해서 사용하시면 됩니다.
-> 버튼을 클릭하면 해당 제목으로 이동하도록 연결되어야 하므로,
아래처럼 id 속성을 설정해주셔야 합니다.
1. 사업 개요
정책이나 사업에 대한 개요를 작성합니다.(내용 기재)
2. 지원 대상
해당 지원을 받을 수 있는 자격요건을 설명합니다.(내용 기재)
3. 신청 방법
신청 경로, 절차, 기간 등을 안내합니다.(내용 기재)
4. 제출 서류
필요한 제출 서류 목록을 정리합니다.(내용 기재)
5. 유의 사항
중복 신청 가능 여부나 주의할 점을 안내합니다.(내용 기재)
아래 복사해서 사용하세요. HTML 가서 복사 넣기 하시면
됩니다.
* HTML 가면 글씨도 작고 많이 복잡하니 코드 놓는 부분에 '코드넣기'라고 표기하면 찾기 좋을겁니다.
<h2 id="section1">1. 사업 개요</h2>
<p>정책이나 사업에 대한 개요를 작성합니다.</p>
<h2 id="section2">2. 지원 대상</h2>
<p>해당 지원을 받을 수 있는 자격요건을
설명합니다.</p>
<h2 id="section3">3. 신청 방법</h2>
<p>신청 경로, 절차, 기간 등을 안내합니다.</p>
<h2 id="section4">4. 제출 서류</h2>
<p>필요한 제출 서류 목록을 정리합니다.</p>
<h2 id="section5">5. 유의 사항</h2>
<p>중복 신청 가능 여부나 주의할 점을
안내합니다.</p>
위까지 복사해서 HTML로 들어가서 복사넣기
해서 사용하시면 됩니다.
빨간글씨 수정해서 사용하시면 됩니다.
