Tistory 인쇄 버튼 만들기 (Tistory 글 PDF로 출력)

tistory 인쇄

티스토리 블로그에 공부 내용을 정리하다 보니 인쇄 기능이 없는 점이 조금 불편했다.

플러그인이나 부가 기능을 찾아보았지만 별도의 인쇄 버튼을 제공하는 기능은 보이지 않았다. 그래서 직접 인쇄 버튼을 하나 추가하기로 했다.

티스토리의 장점 중 하나는 스킨을 자유롭게 커스터마이징할 수 있다는 점이다.
HTML을 조금만 알면 원하는 기능을 직접 추가할 수 있다.

---

HTML / CSS 수정

먼저 관리 페이지로 들어간다.

스킨 편집

꾸미기

관리 페이지 좌측 사이드바에서 꾸미기 → 스킨 편집을 클릭한다.

---

html 수정

그 다음 우측의 스킨 편집 화면에서 HTML 편집 버튼을 눌러준다.

이제 HTML 탭에서 Ctrl + F (Mac은 Command + F) 로

<s_permalink_article_rep>
                  <div class="post-cover" <s_article_rep_thumbnail>

를 복사해서 검색한다.

post-cover 클래스 태그 내부를 보면 meta 태그가 있다.
이 meta 태그의 가장 마지막 부분에 아래 코드를 추가한다.

• !! 추가해야하는 내용을 잘 보고 복사 !!
• css에 있는 meta 내부 span에 after가 걸려있어서 button 태그 대신 span을 사용하였다.

<span class="meta">
  <!-- 실제 추가할 내용 -->
  <span role="button" class="print-btn" onclick="window.print()">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="#000000"
      height="16px"
      width="16px"
      viewBox="0 0 512 512"
    >
      <g>
        <g>
          <path
            d="M495.304,144.696h-83.478v-128C411.826,7.475,404.351,0,395.13,0H116.87
            c-9.22,0-16.696,7.475-16.696,16.696v128H16.696
            C7.475,144.696,0,152.171,0,161.391V395.13
            c0,9.22,7.475,16.696,16.696,16.696h83.478v83.478
            c0,9.22,7.475,16.696,16.696,16.696H395.13
            c9.22,0,16.696-7.475,16.696-16.696v-83.478h83.478
            c9.22,0,16.696-7.475,16.696-16.696V161.391
            C512,152.171,504.525,144.696,495.304,144.696z
            M133.565,33.391h244.87v111.304h-244.87V33.391z
            M378.435,478.609h-244.87V311.652h244.87V478.609z
            M478.609,378.435h-66.783v-83.478
            c0-9.22-7.475-16.696-16.696-16.696H116.87
            c-9.22,0-16.696,7.475-16.696,16.696v83.478H33.391
            V178.087h83.478H395.13h83.478V378.435z"
          />
        </g>
      </g>

      <g>
        <g>
          <path
            d="M329.461,346.156H184.765
            c-9.22,0-16.696,7.475-16.696,16.696
            s7.475,16.696,16.696,16.696h144.696
            c9.22,0,16.696-7.475,16.696-16.696
            S338.681,346.156,329.461,346.156z"
          />
        </g>
      </g>

      <g>
        <g>
          <path
            d="M262.678,412.939h-77.913
            c-9.22,0-16.696,7.475-16.696,16.696
            s7.475,16.696,16.696,16.696h77.913
            c9.22,0,16.696-7.475,16.696-16.696
            S271.899,412.939,262.678,412.939z"
          />
        </g>
      </g>

      <g>
        <g>
          <circle cx="362.852" cy="229.287" r="16.696" />
        </g>
      </g>

      <g>
        <g>
          <circle cx="429.635" cy="229.287" r="16.696" />
        </g>
      </g>
    </svg>
  </span>
  <!-- 실제 추가할 내용 끝 -->
  <span class="author">by curious week</span>
  <span class="date">2026. 3. 14.</span>
  
</span>

이 코드는 window.print() 함수를 이용해 브라우저의 인쇄 기능을 호출하는 버튼이다.

SVG 아이콘을 사용했기 때문에 별도의 이미지 파일 없이도 인쇄 아이콘이 표시된다.

이대로도 사용가능 하지만 메뉴, 댓글 등 전부 출력이 되기 때문에 css를 수정해야한다.

---

CSS 수정

다음으로 CSS 탭으로 이동한다.

CSS 상단의 @import 아래에 다음 코드를 추가한다.

/* print */
@media print {
  /* 전체 UI 숨기기 */
  #header,
  #aside,
  #footer,
  .btn_tool,
  .main-slider,
  .post-cover,
  .pagination,
  .comments,
  .related-articles,
  .tags,
  .tt-comments-wrap,
  .social-list,
  .social-channel,
  .profile,
  .util,
  .container_postbtn,
  .another_category,
  .print-btn,
  .post-cover,
  .menu {
    display: none !important;
  }

  /* 레이아웃 단순화 */
  #wrap,
  #container,
  .content-wrap,
  #content,
  .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 사이드 영역이 폭 제거 */
  article#content {
    float: none !important;
    width: 100% !important;
  }

  aside#aside {
    display: none !important;
  }

  @page {
    size: A4;
    margin: 15mm;
  }
}

이 CSS는 인쇄할 때 불필요한 UI 요소들을 모두 숨기고 본문만 출력되도록 만들어 준다.

즉,

• 메뉴
• 댓글
• 사이드바
• 추천 글
• 태그

같은 블로그 UI는 출력되지 않고 본문 내용만 깔끔하게 인쇄된다.

이렇게 설정하면 글 상단에 인쇄 버튼이 추가되고, 버튼을 누르면 바로 A4 레이아웃으로 정리된 인쇄 화면을 확인할 수 있다.

공부 내용을 정리하는 블로그라면 PDF로 저장하거나 출력할 때 꽤 유용한 기능이니 필요하다면 한번 적용해 보기를 추천한다.