[이모저모] 티스토리 글쓰기 에디터에서 바로 쓰는 본문 꾸미기 CSS

안녕하세요. 토요일의 21입니다.

이번 코드의 방향은 아래와 같습니다.

• 고운바탕 폰트를 사용합니다.
• body, p, span, div, a, li까지 폰트를 강제로 적용합니다.
• 카테고리, 댓글, 메뉴, 사이드바 쪽까지 최대한 폰트가 적용되도록 했습니다.
• span에 글자 색이나 배경색이 들어간 경우에도 폰트가 풀리지 않도록 강제로 유지합니다.
• PC에서는 줄 노트 배경을 유지합니다.
• 모바일에서는 줄 노트 배경을 제거하고 왼쪽 정렬로 보여줍니다.
• 형광펜 배경은 사용자가 넣은 색을 전체로 유지하고, 밑줄은 같은 계열의 진한 색으로 자동 적용됩니다.
• 글자 색은 건드리지 않고 기존 블로그 CSS 설정을 그대로 따르게 했습니다.
• 티스토리 글쓰기 에디터와 미리보기 화면의 본문 구성이 최대한 비슷하게 보이도록 정리했습니다.

<div>
<style>
@font-face {
  font-family: 'GowunBatang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   블로그 전체 폰트 강제 적용
   ========================================================= */

body,
p,
span,
div,
a,
li,
ul,
ol,
section,
article,
header,
footer,
nav,
aside,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'GowunBatang', serif !important;
}

/* 티스토리 에디터 색상/배경색 span 폰트 유지 */
span[style*="color"],
span[style*="background"] {
  font-family: 'GowunBatang', serif !important;
}

/* 글 제목 + 댓글 폰트 보강 */
.article-title,
.entry-title,
.post-title,
.title-article,
.area_view .title_post,
.area_article .title,
.inner_header .title,
#content .title,
#article .title,
.tt-comment-content,
.tt-comment-content p,
.tt-comment-cont,
.tt-comment-cont p,
.comment-content,
.comment-content p,
.comment_content,
.comment_content p,
.rp_content,
.rp_content p,
.reply_content,
.reply_content p,
.area_reply,
.area_reply p,
.area_reply .desc_reply,
.area_reply .desc_reply p,
.comment-list,
.comment-list p,
.comment-list .comment-content,
.comment-list .comment-content p,
.tt-comment-author,
.tt-comment-date,
.tt-comment-control,
.comment-author,
.comment-name,
.comment-date,
.comment-control,
.rp_name,
.rp_date,
.rp_admin,
.area_reply .tit_reply,
.area_reply .name,
.area_reply .date,
.area_reply .link_reply,
.area_reply .link_write,
.comment-list .author,
.comment-list .name,
.comment-list .date,
.comment-list .control,
.comment-list a {
  font-family: 'GowunBatang', serif !important;
}

/* 카테고리 / 메뉴 / 사이드바 보강 */
.category,
.category a,
.category_list,
.category_list a,
.area_category,
.area_category a,
.tt_category,
.tt_category a,
.link_category,
.txt_category,
.post-category,
.post-category a,
.article-category,
.article-category a,
.sidebar,
.sidebar a,
#sidebar,
#sidebar a,
.menu,
.menu a,
.nav,
.nav a,
.gnb,
.gnb a,
.lnb,
.lnb a {
  font-family: 'GowunBatang', serif !important;
}

/* =========================================================
   기본 변수
   ========================================================= */

:root {
  --paper-font-size: 19px;
  --paper-line-height: calc(var(--paper-font-size) * 2.625);
  --paper-line-color: #d6d6d6;

  --paper-side-padding-pc: 18px;
  --paper-side-padding-mobile: 12px;

  --paper-gap: 42px;
}

/* =========================================================
   전체 감싸는 박스
   ========================================================= */

.my-post-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 8px 40px;
  box-sizing: border-box;
  font-family: 'GowunBatang', serif !important;

  --paper-line-height: calc(var(--paper-font-size) * 2.625);
}

/* =========================================================
   줄노트 본문
   ========================================================= */

.lined-paper {
  margin: 0 0 var(--paper-gap) 0 !important;
  padding: 0 var(--paper-side-padding-pc) !important;

  font-size: var(--paper-font-size) !important;
  line-height: var(--paper-line-height) !important;

  text-align: justify;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-sizing: border-box;

  font-family: 'GowunBatang', serif !important;

  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--paper-line-height) - 1px),
    var(--paper-line-color) calc(var(--paper-line-height) - 1px),
    var(--paper-line-color) var(--paper-line-height)
  ) !important;

  background-size: 100% var(--paper-line-height) !important;
  background-position: 0 0 !important;
}

/* 본문 내부 요소 보정 */
.lined-paper span,
.lined-paper u,
.lined-paper ins,
.lined-paper strong,
.lined-paper b,
.lined-paper em,
.lined-paper i {
  font-family: 'GowunBatang', serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* 티스토리 색상 span 보정 */
.lined-paper span[style*="color"],
.lined-paper span[style*="background"] {
  font-family: 'GowunBatang', serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   자동 형광펜 대상
   ========================================================= */

.lined-paper span[style*="background"] {
  padding: 0 2px 2px 2px !important;
  text-decoration: none !important;
  box-shadow: none !important;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* u 태그는 수동 분홍 강조 */
.lined-paper u {
  background: #ffe3ec !important;
  background-color: #ffe3ec !important;

  padding: 0 2px 2px 2px !important;
  text-decoration: none !important;

  border-bottom: 3px solid #e64f82 !important;
  box-shadow: none !important;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 직접 쓰는 형광펜 클래스 */
.hl-yellow {
  --hl-bg: #fff0a8;
  --hl-line: #b89000;
}

.hl-pink {
  --hl-bg: #ffe3ec;
  --hl-line: #e64f82;
}

.hl-green {
  --hl-bg: #d8f3c4;
  --hl-line: #5f9c37;
}

.hl-blue {
  --hl-bg: #dceeff;
  --hl-line: #4a91d6;
}

.hl-purple {
  --hl-bg: #e5ddff;
  --hl-line: #7d62d9;
}

.hl-yellow,
.hl-pink,
.hl-green,
.hl-blue,
.hl-purple {
  background: var(--hl-bg) !important;
  background-color: var(--hl-bg) !important;

  padding: 0 2px 2px 2px !important;

  font-family: 'GowunBatang', serif !important;
  line-height: inherit !important;
  text-decoration: none !important;

  border-bottom: 3px solid var(--hl-line) !important;
  box-shadow: none !important;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   li 목록 전용
   ========================================================= */

.my-post-wrap .post-list {
  margin: 0 0 var(--paper-gap) 0 !important;
  padding: 0 var(--paper-side-padding-pc) 0 calc(var(--paper-side-padding-pc) + 24px) !important;

  font-size: var(--paper-font-size) !important;
  line-height: 2em !important;
  font-family: 'GowunBatang', serif !important;

  word-break: keep-all !important;
  overflow-wrap: anywhere !important;

  box-sizing: border-box !important;
}

.my-post-wrap .post-list li {
  margin: 0 0 0.4em 0 !important;
  padding: 0 !important;

  font-size: inherit !important;
  line-height: inherit !important;
  font-family: 'GowunBatang', serif !important;
}

.my-post-wrap .post-list li span {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: 'GowunBatang', serif !important;
}

/* =========================================================
   이미지
   코드블럭은 일부러 건드리지 않음
   ========================================================= */

.my-post-wrap figure,
.my-post-wrap .imageblock,
.my-post-wrap [class*="image"] {
  margin: var(--paper-gap) 0 !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

.my-post-wrap img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* 광고 영역 보호 */
ins.adsbygoogle,
.adsbygoogle,
.kakao_ad_area,
.adfit,
.adfit__container,
[id*="google_ads"],
[class*="google-auto-placed"],
[class*="adsbygoogle"],
[class*="kakao_ad"],
[class*="adfit"] {
  background: none !important;
  background-color: transparent !important;
  border-bottom: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   모바일
   모바일에서는 줄노트 배경 제거 + 왼쪽 정렬
   ========================================================= */

@media screen and (max-width: 768px) {
  .my-post-wrap {
    max-width: 100% !important;
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    background: none !important;
    background-image: none !important;

    margin: 0 0 var(--paper-gap) 0 !important;
    padding: 0 var(--paper-side-padding-mobile) !important;

    font-size: var(--paper-font-size) !important;
    line-height: 2em !important;

    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;

    font-family: 'GowunBatang', serif !important;
  }

  .lined-paper span,
  .lined-paper u,
  .lined-paper ins,
  .lined-paper strong,
  .lined-paper b,
  .lined-paper em,
  .lined-paper i,
  .lined-paper span[style*="color"],
  .lined-paper span[style*="background"] {
    font-family: 'GowunBatang', serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .lined-paper span[style*="background"] {
    padding: 0 2px 2px 2px !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .lined-paper u {
    background: #ffe3ec !important;
    background-color: #ffe3ec !important;

    padding: 0 2px 2px 2px !important;
    text-decoration: none !important;
    border-bottom: 3px solid #e64f82 !important;
    box-shadow: none !important;
  }

  .my-post-wrap .post-list {
    padding: 0 var(--paper-side-padding-mobile) 0 calc(var(--paper-side-padding-mobile) + 20px) !important;

    font-size: var(--paper-font-size) !important;
    line-height: 2em !important;
    text-align: left !important;

    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .my-post-wrap .post-list li {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .my-post-wrap figure,
  .my-post-wrap .imageblock,
  .my-post-wrap [class*="image"] {
    margin: var(--paper-gap) 0 !important;
  }
}

/* 아주 작은 화면 */
@media screen and (max-width: 390px) {
  .my-post-wrap {
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    background: none !important;
    background-image: none !important;

    font-size: var(--paper-font-size) !important;
    line-height: 2em !important;
    padding: 0 10px !important;

    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;

    font-family: 'GowunBatang', serif !important;
  }

  .my-post-wrap .post-list {
    padding: 0 10px 0 30px !important;
  }
}
</style>
</div>

<div class="my-post-wrap" style="--paper-font-size: 17px;">

<!-- =======================================================
     여기부터 본문을 쓰면 됩니다.
     문단은 아래 p.lined-paper 형식을 복사해서 추가하면 됩니다.
     ======================================================= -->

<p class="lined-paper" data-ke-size="size16"><span style="font-family: 'GowunBatang', serif;">여기에 첫 번째 문단을 씁니다. 티스토리 에디터에서 <span style="background-color: #ffc9af;">배경색을 넣으면</span> 그 색은 유지되고, 밑줄은 같은 계열의 진한 색으로 자동 적용됩니다.</span></p>

<p class="lined-paper" data-ke-size="size16"><span style="font-family: 'GowunBatang', serif;">여기에 두 번째 문단을 씁니다. 다른 색을 넣어도 됩니다. 예를 들어 <span style="background-color: #c1bef9;">보라색 배경</span>이나 <span style="background-color: #9feec3;">초록색 배경</span>도 자동으로 처리됩니다.</span></p>

<!-- 목록을 넣고 싶으면 아래 ul.post-list 형식을 사용하면 됩니다. -->
<ul class="post-list" style="list-style-type: disc;" data-ke-list-type="disc">
<li><span style="font-family: 'GowunBatang', serif;">목록 첫 번째 항목입니다.</span></li>
<li><span style="font-family: 'GowunBatang', serif;">목록 두 번째 항목입니다.</span></li>
<li><span style="font-family: 'GowunBatang', serif;">목록 세 번째 항목입니다.</span></li>
</ul>

<p class="lined-paper" data-ke-size="size16"><span style="font-family: 'GowunBatang', serif;">목록 뒤에 이어지는 문단은 다시 p.lined-paper로 작성하면 됩니다. PC에서는 줄노트가 유지되고, 모바일에서는 줄노트가 제거됩니다.</span></p>

<!-- =======================================================
     여기까지 본문을 쓰면 됩니다.
     ======================================================= -->

</div>

<script>
(function () {
  function parseRgb(color) {
    var match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (!match) return null;

    return {
      r: parseInt(match[1], 10),
      g: parseInt(match[2], 10),
      b: parseInt(match[3], 10)
    };
  }

  function rgbToHex(r, g, b) {
    return "#" + [r, g, b].map(function (x) {
      var hex = x.toString(16);
      return hex.length === 1 ? "0" + hex : hex;
    }).join("");
  }

  function darken(color, amount) {
    var rgb = parseRgb(color);

    if (!rgb) {
      return color;
    }

    var r = Math.round(rgb.r * (1 - amount));
    var g = Math.round(rgb.g * (1 - amount));
    var b = Math.round(rgb.b * (1 - amount));

    return rgbToHex(r, g, b);
  }

  function applyHighlightStyle() {
    document.querySelectorAll(".lined-paper span[style*='background'], .lined-paper span[style*='background-color']").forEach(function (el) {
      var originalBg = el.getAttribute("data-hl-original-bg");

      if (!originalBg) {
        originalBg = window.getComputedStyle(el).backgroundColor;
        el.setAttribute("data-hl-original-bg", originalBg);
      }

      if (!originalBg || originalBg === "rgba(0, 0, 0, 0)" || originalBg === "transparent") {
        return;
      }

      var lineColor = darken(originalBg, 0.42);

      el.style.setProperty("background", originalBg, "important");
      el.style.setProperty("background-color", originalBg, "important");

      el.style.setProperty("border-bottom", "3px solid " + lineColor, "important");
      el.style.setProperty("padding", "0 2px 2px 2px", "important");
      el.style.setProperty("text-decoration", "none", "important");
      el.style.setProperty("box-shadow", "none", "important");
      el.style.setProperty("font-family", "'GowunBatang', serif", "important");
      el.style.setProperty("font-size", "inherit", "important");
      el.style.setProperty("line-height", "inherit", "important");
    });
  }

  function runManyTimes() {
    applyHighlightStyle();
    setTimeout(applyHighlightStyle, 300);
    setTimeout(applyHighlightStyle, 800);
    setTimeout(applyHighlightStyle, 1500);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", runManyTimes);
  } else {
    runManyTimes();
  }

  window.addEventListener("load", runManyTimes);

  if (window.MutationObserver) {
    var observer = new MutationObserver(function () {
      applyHighlightStyle();
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ["style", "class"]
    });
  }
})();
</script>

<p class="lined-paper" data-ke-size="size16"><span style="font-family: 'GowunBatang', serif;">이 부분은 줄 노트 스타일에서 공통으로 사용할 기본값을 모아둔 곳입니다. 본문 글씨 크기, 줄 노트 한 줄 높이, 줄 색상, PC와 모바일 좌우 여백, 문단 사이 간격을 변수로 정리해 두었습니다. 이렇게 해두면 나중에 전체 글씨 크기나 줄 간격을 바꾸고 싶을 때 여러 곳을 수정하지 않고 이 부분만 조정하면 됩니다.</span></p>

스킨 편집이나 CSS 수정 메뉴에 들어갈 필요는 없습니다. 정리한 코드를 그대로 복사한 뒤, 티스토리 글쓰기 에디터에서 HTML 모드로 전환해 붙여 넣으면 됩니다.

티스토리 글을 꾸미다 보면 처음에는 단순한 문제처럼 보였던 것이 점점 커지는 경우가 있습니다. 처음에는 그냥 본문 폰트만 바꾸고 싶었습니다. 그다음에는 형광펜 효과가 마음에 걸렸고, 그다음에는 모바일에서 폰트가 제대로 적용되지 않는 문제가 보였습니다. 또 PC에서는 예쁘게 보이던 줄 노트 배경이 모바일에서는 오히려 답답하게 느껴지는 문제도 있었습니다. 결국 단순한 폰트 변경이 아니라, 본문 구조와 모바일 가독성, 댓글과 카테고리 영역까지 함께 고려해야 하는 문제가 되었습니다.

이번에 정리한 코드는 크게 세 가지 방향을 가지고 있습니다. 첫 번째는 블로그 전체에 고운바탕 폰트를 강하게 적용하는 것입니다. 두 번째는 PC에서는 줄 노트 스타일을 유지하되, 모바일에서는 줄 노트 배경을 제거하는 것입니다. 세 번째는 티스토리 에디터에서 넣은 배경색을 그대로 유지하면서, 밑줄만 같은 계열의 진한 색으로 정리하는 것입니다. 이렇게 정리한 이유는 간단합니다. 티스토리 에디터가 자동으로 넣는 span 스타일이 생각보다 많고, 모바일에서는 그 스타일이 꼬이거나 폰트가 풀리는 경우가 있기 때문입니다.

기존에는 본문 쪽에만 폰트를 적용하는 방식도 생각했습니다. 예를 들면 my-post-wrap 안쪽만 고운바탕으로 잡고, 본문 문단에만 스타일을 넣는 식입니다. 이 방식은 비교적 안전합니다. 블로그 전체에 영향을 덜 주기 때문입니다. 하지만 실제로 사용해 보니 모바일에서 span 안쪽 폰트가 제대로 유지되지 않는 경우가 있었습니다. 특히 티스토리 에디터에서 색상이나 배경색을 넣으면 HTML 안에 span이 많이 생기는데, 이 부분이 모바일에서 원하는 폰트로 나오지 않을 때가 있었습니다.

그래서 결국 기존에 선호하던 방식처럼 조금 더 강하게 잡는 쪽으로 방향을 바꿨습니다. 핵심은 body, p, span, div, a, li 같은 기본 요소까지 폰트를 강제로 적용하는 것입니다. 이렇게 하면 본문만이 아니라 댓글, 카테고리, 메뉴, 사이드바, 링크 텍스트까지 최대한 같은 폰트로 맞출 수 있습니다. 물론 이 방식은 강합니다. 블로그 전체의 글자 요소를 거의 다 덮는 방식이기 때문입니다. 하지만 오히려 이게 목적이라면 더 깔끔합니다. 특정 영역만 폰트가 다르게 튀어나오는 것을 막을 수 있고, 모바일에서 span 폰트가 풀리는 문제도 줄일 수 있습니다.

티스토리 에디터에서 색상이나 배경색을 넣은 span도 따로 잡았습니다. span에 color나 background-color가 들어가도 폰트를 유지하게 만든 것입니다. 이 부분이 꽤 중요했습니다. 티스토리 에디터에서 글자 색이나 배경색을 넣으면 span 태그가 생기는데, 이 span에 기존 폰트가 남거나 모바일에서 다른 폰트로 보이는 경우가 있었습니다. 그래서 색상 span과 배경색 span에도 폰트를 강제로 지정했습니다. 글자 색은 건드리지 않고, 폰트만 유지하는 방식입니다.

본문에는 줄 노트 스타일을 적용했습니다. 다만 줄 노트는 PC에서만 유지하는 쪽으로 정했습니다. PC 화면에서는 줄 노트 배경이 감성적으로 보이고, 글의 분위기도 조금 더 살아납니다. 하지만 모바일에서는 화면 폭이 좁아서 줄바꿈이 많아지고, 줄 노트 선이 오히려 글을 읽는 데 방해가 될 수 있습니다. 그래서 모바일에서는 줄 노트 배경을 제거했습니다. 이렇게 하면 PC에서는 줄 노트 스타일이 나오고, 모바일에서는 일반 본문처럼 깔끔하게 읽힙니다.

특히 모바일에서는 양쪽 정렬보다 왼쪽 정렬이 더 안정적입니다. 양쪽 정렬은 PC에서는 단정해 보일 수 있지만, 모바일에서는 단어 간격이 이상하게 벌어질 수 있습니다. 그래서 모바일에서는 왼쪽 정렬로 고정했습니다. PC는 줄 노트와 양쪽 정렬의 느낌을 살리고, 모바일은 줄 노트를 제거한 뒤 왼쪽 정렬로 가독성을 우선하는 구조입니다.

본문 글씨 크기는 글마다 바로 조절할 수 있도록 했습니다. 본문을 감싸는 div에 --paper-font-size: 17px처럼 값을 넣어두면, 그 글 안의 본문 크기가 한 번에 바뀝니다. 예를 들어 조금 작게 쓰고 싶으면 17px, 크게 쓰고 싶으면 22px처럼 조절하면 됩니다. 이 값은 PC와 모바일에 같이 적용됩니다. PC에서는 줄 노트 간격도 이 글씨 크기에 맞춰 같이 계산됩니다.

형광펜 효과도 다시 정리했습니다. 티스토리 에디터에서 배경색을 넣으면 원래는 각기 다른 색이 그대로 살아납니다. 그래서 이번에는 배경색 span을 CSS에서 정한 색으로 통일하지 않고, 사용자가 넣은 배경색을 그대로 살리는 쪽으로 바꿨습니다. 여기서 중요한 점은 글자 색은 건드리지 않았다는 것입니다. 글자 색은 이미 블로그 스킨이나 다른 CSS에서 따로 정해둔 경우가 많으므로 이 코드에서는 배경색은 그대로 두고 밑줄만 조금 더 진하게 담당하게 했습니다.

직접 형광펜 색을 쓰고 싶을 때를 위해 클래스도 따로 만들었습니다. 에디터에서 배경색을 직접 넣으면 그 색이 그대로 유지되고, 별도로 class를 지정하면 분홍, 초록, 파랑, 보라 같은 형광펜 스타일을 쓸 수 있는 구조입니다.

정리하면 이번 코드는 PC에서는 줄 노트 배경을 유지하고, 모바일에서는 줄 노트 배경을 제거하는 방식입니다. 본문, 댓글, 카테고리, 메뉴, 사이드바까지 고운바탕 폰트를 최대한 강하게 적용하고, 티스토리 에디터가 만든 span에도 폰트를 적용해 모바일에서 폰트가 풀리는 문제를 줄였습니다. 형광펜 배경은 사용자가 넣은 색을 그대로 살리고, 밑줄은 같은 계열의 진한 색으로 들어가게 했습니다. 글자 색은 건드리지 않습니다.

티스토리 꾸미기는 결국 예쁜 것과 안 깨지는 것 사이에서 타협하는 작업에 가깝습니다. PC에서 예쁜 효과가 모바일에서도 반드시 좋은 것은 아닙니다. 반대로 모바일만 생각하면 PC에서 조금 심심해 보일 수 있습니다. 그래서 이번에는 역할을 나눴습니다. PC는 감성, 모바일은 가독성. 그리고 폰트는 전체적으로 강하게 통일. 이 정도면 지금 쓰는 방식에서는 꽤 현실적인 선택이라고 생각합니다.

완벽한 코드는 없겠지만, 적어도 이번 방식은 제가 원하는 방향에는 꽤 가까웠습니다. PC에서는 글을 조금 더 꾸민 느낌으로 보여주고, 모바일에서는 읽는 데 방해되는 요소를 줄였습니다. 폰트도 본문만이 아니라 댓글과 카테고리 쪽까지 최대한 맞출 수 있게 했습니다. 티스토리에서 글을 쓰다 보면 이런 작은 CSS 하나에도 은근히 시간을 많이 쓰게 됩니다. 그런데 또 이런 부분이 맞아 들어가면 글을 쓰는 맛이 조금 살아납니다. CSS가 글을 대신 써주지는 않지만, 적어도 글을 담는 그릇은 조금 더 마음에 들게 해줍니다.