티스토리: 제목 (Hn 태그) 접기/펼치기로 글 읽기 편하게 만들기

 

티스토리 본문 글이 길어지다 보면 전체 구조를 파악하며 읽기가 힘들어집니다. 티스토리 편집기를 이용하면 본문 제목(제목1-제목3)은 HTML 태그(H2-H4)로 표시됩니다.

이 제목을 클릭하면 접기(Collapse)/펼치기(Expand)를 할 수 있도록 설정하여 글 읽기를 더욱 쉽게 만들어 보세요.

이 글에서는 제목 태그(Hn)에 접기/펼치기 기능을 추가하는 방법을 단계별로 안내합니다.

 

스킨 편집

먼저, 티스토리 블로그 관리에서 스킨 편집을 통해 HTML과 CSS를 수정해야 합니다. 제가 다룬 스킨은 "Odyssey 스킨"입니다.
다음 절차를 따라 주세요.

1. 티스토리 스킨 편집으로 이동

1. 티스토리 블로그 관리자 페이지로 이동합니다.
2. 꾸미기 > 스킨 편집 > HTML 편집을 클릭합니다.
3. HTML 소스와 CSS 소스를 수정하거나 추가합니다.

2. HTML 소스 추가

HTML 소스는 제목 태그(H2~H4)가 접기/펼치기 동작을 하도록 JavaScript 코드를 삽입하는 부분입니다.
아래 코드를 복사하여 HTML 편집 화면에 붙여 넣으세요.
삽입위치는 제일 끝부분에 있는 "</body>"줄 밑에 넣으면 됩니다. (사실 이 코드는 삽입 위치가 중요하지 않습니다.)

<!-- Hn 접기/펼치기
eoureo
2024-12-29 23:13:20
{ -->
<script>
(function () {
  // CSS 클래스 이름 정의
  const headingCollapseChildCN = "heading--collapse-child"; // 하위 콘텐츠를 숨길 때 사용할 클래스
  const headingCollapseCN = "heading--collapse"; // 클릭된 헤더를 표시하기 위한 클래스
  let container; // 콘텐츠 컨테이너 요소를 저장할 변수

  // 하위 요소의 표시 여부를 토글하는 함수
  function toggleVisibility(element, currentLevel, isCollapsing) {
    while (element) {
      // 요소가 헤더 태그인지 확인
      if (element.tagName && element.tagName[0] === 'H') {
        const nextLevel = parseInt(element.tagName[1], 10); // 현재 헤더의 레벨(H1~H6)을 가져옴
        if (nextLevel <= currentLevel) break; // 동일하거나 상위 레벨의 헤더를 만나면 중단

        // 숨기거나 표시할 클래스 토글
        element.classList.toggle(headingCollapseChildCN, isCollapsing);

        // 하위 요소가 접힘 상태라면 재귀적으로 처리
        if (!isCollapsing && element.classList.contains(headingCollapseCN)) {
          element = toggleVisibility(element.nextElementSibling, nextLevel, true);
          continue;
        }
      } else {
        // 일반 요소의 표시 여부를 토글
        element.classList.toggle(headingCollapseChildCN, isCollapsing);
      }

      // 다음 형제 요소로 이동
      element = element.nextElementSibling;
    }
    return element;
  }

  // 헤더 태그에 클릭 이벤트를 추가하는 초기화 함수
  function initializeHeadings() {
    if (!container) return;

    // 컨테이너 내의 모든 헤더 태그(H1~H6)를 선택
    container.querySelectorAll([1, 2, 3, 4, 5, 6].map(n => `:scope > h${n}`).join(', ')).forEach(heading => {
      heading.setAttribute('data-tag', heading.tagName); // 태그 이름을 데이터 속성으로 저장
      heading.addEventListener('click', () => {
        const currentLevel = parseInt(heading.tagName[1], 10); // 클릭된 헤더의 레벨 확인
        const isCollapsing = !heading.classList.contains(headingCollapseCN); // 현재 상태 반전
        heading.classList.toggle(headingCollapseCN); // 접힘 상태 토글
        toggleVisibility(heading.nextElementSibling, currentLevel, isCollapsing); // 하위 콘텐츠 처리
      });
    });
  }

  // 이미 접힌 상태로 지정된 헤더들을 초기화하는 함수
  function initCollapsedHeadings() {
    if (!container) return;

    // 접힌 상태로 지정된 모든 헤더를 선택(H1~H6)
    Array.from(
      container.querySelectorAll([1, 2, 3, 4, 5, 6].map(n => `:scope > h${n}.${headingCollapseCN}`).join(', '))
    )
      .reverse() // 하위 레벨부터 처리하기 위해 순서를 뒤집음
      .forEach(heading => {
        const currentLevel = parseInt(heading.tagName[1], 10); // 헤더 레벨 확인
        toggleVisibility(heading.nextElementSibling, currentLevel, true); // 하위 콘텐츠 숨김 처리
      });
  }

  // 초기화 함수: 컨테이너 설정 및 초기화 호출
  function initCollapse() {
    container = document.querySelector('#article-view > .contents_style'); // 컨테이너 요소 찾기
    initializeHeadings(); // 헤더 초기화
    initCollapsedHeadings(); // 이미 접힌 상태로 지정된 헤더 처리
  }

  // DOMContentLoaded 이벤트가 발생하면 초기화 실행
  document.addEventListener("DOMContentLoaded", initCollapse);
})();
</script>
<!-- } Hn 접기/펼치기 -->

 

⚠️ 주의

스킨에 따라 본문을 감싸는 태그가 다를 수 있습니다.
container = document.querySelector('#article-view > .contents_style'); 부분에서 #article-view > .contents_style를 여러분의 스킨에 맞게 수정하세요.

 

3. CSS 소스 추가

CSS는 접기/펼치기 동작 시 제목과 콘텐츠의 스타일을 제어합니다.
아래 코드를 복사하여 CSS 편집 화면에 붙여 넣으세요. 제일 끝에 넣으면 됩니다.

/* Hn 접기/펼치기
eoureo
2024-12-29 23:11:08
{
*/
/* 공통 스타일 설정 - 제목 태그와 아이콘 추가 */
#article-view > .contents_style > h1, 
#article-view > .contents_style > h2, 
#article-view > .contents_style > h3, 
#article-view > .contents_style > h4, 
#article-view > .contents_style > h5, 
#article-view > .contents_style > h6 {
    position: relative;
    cursor: pointer; /* 제목을 클릭 가능하게 설정 */
}

/* 기본 아이콘 스타일 */
#article-view > .contents_style > h1::before, 
#article-view > .contents_style > h2::before, 
#article-view > .contents_style > h3::before, 
#article-view > .contents_style > h4::before, 
#article-view > .contents_style > h5::before, 
#article-view > .contents_style > h6::before {
    content: '';
    position: absolute;
    left: -1em;
    top: 0.4em;
    width: 0.6em;
    height: 0.6em;
    opacity: 0.3;
    transition: transform 0.2s, opacity 0.2s;
    transform: rotate(45deg);
    border-right: gray 1px solid;
    border-bottom: gray 1px solid;
}

/* 제목 레벨별 아이콘 크기 조정 */
#article-view > .contents_style > h1::before { border-width: 7px; }
#article-view > .contents_style > h2::before { border-width: 5px; }
#article-view > .contents_style > h3::before { border-width: 3px; }

/* 제목 태그 호버 시 아이콘 강조 */
#article-view > .contents_style > h1:hover::before,
#article-view > .contents_style > h2:hover::before,
#article-view > .contents_style > h3:hover::before,
#article-view > .contents_style > h4:hover::before,
#article-view > .contents_style > h5:hover::before,
#article-view > .contents_style > h6:hover::before {
    opacity: 1.0;
    border-right-color: orangered;
    border-bottom-color: orangered;
}

/* 접힌 상태 스타일 */
#article-view > .contents_style > h1.heading--collapse::before,
#article-view > .contents_style > h2.heading--collapse::before,
#article-view > .contents_style > h3.heading--collapse::before,
#article-view > .contents_style > h4.heading--collapse::before,
#article-view > .contents_style > h5.heading--collapse::before,
#article-view > .contents_style > h6.heading--collapse::before {
    transform: rotate(-45deg); /* 아이콘 방향 변경 */
}

/* 접힌 상태의 하위 콘텐츠 숨김 */
#article-view > .contents_style > .heading--collapse-child {
    display: none; /* 접힌 상태에서 하위 요소 숨김 */
}

/* 접힌 제목 뒤의 인접 콘텐츠 숨김 */
#article-view > .contents_style > .heading--collapse-prev + * {
    display: none;
}

/* } Hn 접기/펼치기 */

 

마치며

이제 티스토리에서 제목 태그(H2~H4)를 클릭하면 하위 콘텐츠를 접거나 펼칠 수 있습니다.
긴 글에서도 필요한 정보만 빠르게 확인할 수 있어 독자들에게 편리한 경험을 제공합니다.

 

혹시 설정 중 문제가 발생하거나, 개선이 필요한 부분이 있다면 댓글로 알려 주세요! 😊