티스토리 목차 만들기

반응형
    반응형

    간단하게 티스토리 목차 만드는 방법입니다.
    html 조작으로 금방 할 수 있습니다.

    마크다운 내부링크와 같은 방식인데 실제로 마크다운 내부링크를 티스토리에 적용하면 아무 응답이 없습니다.

    그래서 이를 해결하려면 html을 활용하면 됩니다.
    티스토리에서 html을 쓰려면 오른쪽에서 html 모드로 변경한 후 할 수 있습니다.
    티스토리 글쓰기에 들어가 위에 창에서 기본모드-html을 선택합니다.

     

    목차 만들기

    id를 이용한 목차 만들기

    1. 목차가 될 대상을 만듭니다.
      a href = '#01' 을 작성합니다.
    <a href=“#01”>목차 만들기</a>
    1. html 안에서 '목차 만들기'가 있는 곳으로 갑니다.
    <p id ='01'>목차 만들기</p>

    위와 같이 id에 목차에서 붙였던 #01에서 # 뺀 나머지 값을 id 값으로 입력합니다.

    박스 설정

    목차 박스를 설정하시는 분도 간혹 계시는데 이도 html으로 가능합니다.

    # background-color : 배경색; padding: 박스 크기; border: 테두리 크기 solid :테두리 색상; width : 너비(width 없으면 화면끝까지 박스 만들어짐)
    
    <div style ="background-color: #EFD9F3; padding: 10px; border: 2px solid #D33EFA; width:250px">
    # 목차넣기
    <p><b> 목차 만들기</b></p>
    <p></p>
    <a href=“#01”>목차 만들기</a>
    <p></p>
    <a href='#02'>박스 설정</a>
    </div>

    div 사이에 목차를 넣으면 박스안에 목차가 들어가집니다.

    참고로 목차 사이에 간격을 조절하려면 <p></p> 로 합니다.
    html로 조작을 해서 기본모드에서 띄어쓰기 동작이 먹히지 않습니다.

     

    실제로 해 보면 다음과 같이 링크 모양으로 뜨고 링크를 누르면 해당 곳으로 이동합니다.

     

    댓글

    Designed by JB FACTORY

    ....