Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]

TOC (table of Contents)를 멋있게.. #2 > 자유게시판

본문 바로가기
사이트 내 전체검색

자유게시판

토픽 TOC (table of Contents)를 멋있게.. #2

페이지 정보

본문

이전글 https://www.apachezone.com/free/3349  에서 2단계만 되어서...

 

마크다운의 6단계를 다 지원할려고 하니 예외적인 것을 체크해 봐야겠네요. (딱 정해진 두단계만 했는지 알겠네요. ㅎㅎ)

 

읽어오는 헤딩 값은 아래오 같습니다.

index, headingNo, Value
0 2 가이드
1 2 문법 가이드
2 3 일반 내용
3 3 멘션 사용자
4 3 이모티콘
5 4 일부 표현 예
6 3 제목 3
7 4 제목 4
8 5 제목 5
9 6 제목 6
10 3 사진
11 3 코드 블록
12 4 보통
13 4 구문 강조 지원
14 5 Go 코드 강조
15 5 Java 코드 강조
16 3 순서 없는/순서 있는 목록
17 4 순서 없는 목록
18 4 순서 있는 목록
19 4 체크 박스
20 3 테이블
21 3 세부 사항 숨기기
22 3 단락
23 3 링크 참조
24 3 수학 공식
25 3 마인드 맵
26 3 플로우 차트
27 3 타이밍 다이어그램
28 3 간트 차트
29 3 차트
30 3 악보 (abcjs)
31 3 Graphviz
32 3 멀티미디어
33 3 각주
34 2 바로 가기

 

이것을 대략 ul과 li를 사용해서 아래와 같이 변경을 해야 됩니다.

<ul>
    <li>2 가이드</li>
    <li>2 문법 가이드</li>
        <ul>
            <li>3 일반 내용</li>
            <li>3 멘션 사용자</li>
            <li>3 이모티콘</li>
                <ul>
                    <li>4 일부 표현 예</li>
                </ul>
            <li>3 제목 3</li>
                <ul>
                    <li>4 제목 4</li>
                        <ul>
                            <li>5 제목 5</li>
                                <ul>
                                    <li>6 제목 6</li>
                                </ul>
                        </ul>
                </ul>
            <li>3 사진</li>
            <li>3 코드 블록</li>
                <ul>
                    <li>4 보통</li>
                    <li>4 구문 강조 지원</li>
                        <ul>
                            <li>5 Go 코드 강조</li>
                            <li>5 Java 코드 강조</li>
                        </ul>
                </ul>
            <li>3 순서 없는/순서 있는 목록</li>
                <ul>
                    <li>4 순서 없는 목록</li>
                    <li>4 순서 있는 목록</li>
                    <li>4 체크 박스</li>
                </ul>
            <li>3 테이블</li>
            <li>3 세부 사항 숨기기</li>
            <li>3 단락</li>
            <li>3 링크 참조</li>
            <li>3 수학 공식</li>
            <li>3 마인드 맵</li>
            <li>3 플로우 차트</li>
            <li>3 타이밍 다이어그램</li>
            <li>3 간트 차트</li>
            <li>3 차트</li>
            <li>3 악보 (abcjs)</li>
            <li>3 Graphviz</li>
            <li>3 멀티미디어</li>
            <li>3 각주</li>
        </ul>
    <li>2 바로 가기</li>
</ul>

 

1. HeadingNo가 커질때에는 무리없이 집어 넣을 수 있는데.  headingNo가 작아질때,  훨씬 앞에 같은 레벨이 있는 경우 LI로 처리해야 되네요.

2. 시작은 heading2로 시작했는데,  실수로 중간에 heading1이 들어 갈 경우에는 이전에 앞에 레벨이 없으니 UL로 시작해야 될 것 같습니다.

 

얼떨결에 제대로 출력이 나온 것 같네요..

<ul class="nav navbar-nav">
  <ul class="nav navbar-nav">
    <li><a class="nav-link" href="#가이드_0">가이드</a></li>
    <li>
      <a class="nav-link" href="#문법-가이드_3">문법 가이드</a>
      <ul class="nav navbar-nav">
        <li><a class="nav-link" href="#일반-내용_4">일반 내용</a></li>
        <li><a class="nav-link" href="#멘션-사용자_7">멘션 사용자</a></li>
        <li>
          <a class="nav-link" href="#이모티콘_10">이모티콘</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#일부-표현-예_12">일부 표현 예</a>
            </li>
          </ul>
        </li>
        <li>
          <a class="nav-link" href="#제목-3_14">제목 3</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#제목-4_17">제목 4</a>
              <ul class="nav navbar-nav">
                <li>
                  <a class="nav-link" href="#제목-5_18">제목 5</a>
                  <ul class="nav navbar-nav">
                    <li><a class="nav-link" href="#제목-6_19">제목 6</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a class="nav-link" href="#사진_20">사진</a></li>
        <li>
          <a class="nav-link" href="#코드-블록_23">코드 블록</a>
          <ul class="nav navbar-nav">
            <li><a class="nav-link" href="#보통_24">보통</a></li>
            <li>
              <a class="nav-link" href="#구문-강조-지원_26">구문 강조 지원</a>
              <ul class="nav navbar-nav">
                <li>
                  <a class="nav-link" href="#Go-코드-강조_28">Go 코드 강조</a>
                </li>
                <li>
                  <a class="nav-link" href="#Java-코드-강조_30">Java 코드 강조</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a class="nav-link" href="#순서-없는-순서-있는-목록_33">순서 없는/순서 있는 목록</a>
          <ul class="nav navbar-nav">
            <li>
              <a class="nav-link" href="#순서-없는-목록_34">순서 없는 목록</a>
            </li>
            <li>
              <a class="nav-link" href="#순서-있는-목록_36">순서 있는 목록</a>
            </li>
            <li><a class="nav-link" href="#체크-박스_38">체크 박스</a></li>
          </ul>
        </li>
        <li><a class="nav-link" href="#테이블_40">테이블</a></li>
        <li>
          <a class="nav-link" href="#세부-사항-숨기기_43">세부 사항 숨기기</a>
        </li>
        <li><a class="nav-link" href="#단락_45">단락</a></li>
        <li><a class="nav-link" href="#링크-참조_48">링크 참조</a></li>
        <li><a class="nav-link" href="#수학-공식_51">수학 공식</a></li>
        <li><a class="nav-link" href="#마인드-맵_57">마인드 맵</a></li>
        <li><a class="nav-link" href="#플로우-차트_59">플로우 차트</a></li>
        <li>
          <a class="nav-link" href="#타이밍-다이어그램_61">타이밍 다이어그램</a>
        </li>
        <li><a class="nav-link" href="#간트-차트_63">간트 차트</a></li>
        <li><a class="nav-link" href="#차트_65">차트</a></li>
        <li><a class="nav-link" href="#악보--abcjs-_67">악보 (abcjs)</a></li>
        <li><a class="nav-link" href="#Graphviz_69">Graphviz</a></li>
        <li><a class="nav-link" href="#멀티미디어_71">멀티미디어</a></li>
        <li><a class="nav-link" href="#각주_74">각주</a></li>
      </ul>
    </li>
    <li><a class="nav-link" href="#바로-가기_77">바로 가기</a></li>
  </ul>
</ul>

첫번째에 <ul class="nav navbar-nav"> 가 두번 있는 것은 시작이 heading2부터 시작하는 것이라서..

 

다음은 CSS와 Javascript네요..

추천0 비추천0

댓글목록

profile_image

imerong님의 댓글

no_profile imerong 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 kr 아이피 (218.♡.♡.244) 작성일

차근 차근 기록해서 구현하는 모습이 보기 좋습니다. 예전 현업에서 trac 많이 사용했었는데... 꿈만 같은 옛날이군요.

profile_image

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.3) 작성일

조금씩 하시다 보면 예전 실력 나옵니다.

Total 845건 36 페이지
자유게시판 목록
번호 제목 글쓴이 조회 추천 비추천 날짜
320 토픽
혹시... 댓글3
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 25114 0 0 01-23
319 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18257 0 0 01-11
318 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19380 0 0 07-16
317 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 22836 0 0 06-09
열람중 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16418 0 0 05-27
315 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17656 0 0 05-20
314 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17131 0 0 05-04
313 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15340 0 0 04-13
312 토픽 no_profile 선구자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14589 0 0 03-19
311 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18253 0 0 01-17
310 후기
댓글3
no_profile 가이더 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 0 0 0 12-25
309 토픽 무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 22694 0 0 11-29
308 토픽 아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19206 0 0 11-08
307 토픽
회식.....^^ 댓글4
웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 21084 0 0 10-10
306 토픽 no_profile 가이더 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19045 0 0 09-21

검색

회원로그인

회원가입
QnA nanoomihost. dnsever. dnszi.

사이트 정보

포인트 정책
포인트 순위
사이트명 : 아파치존
개인정보관리책임자 : JOO SUNG

접속자집계

오늘
8,326
어제
9,803
최대
176,238
전체
4,175,107
Copyright © apachezone.com. All rights reserved.