티스토리 날짜 형식을 바꾸기: 사용자 맞춤형 날짜 표시 설정하기

티스토리 날짜 형식 바꾸기

티스토리 블로그를 운영하면서, 날짜 형식을 사용자 맞춤형으로 변경하고 싶은 경우가 많습니다. 기본적으로 제공되는 날짜 표시 형식이 블로그의 스타일과 맞지 않거나, 보다 직관적인 날짜 표현을 원할 때 CSS와 JavaScript를 활용하여 손쉽게 변경할 수 있습니다. 이번 글에서는 글 본문과 목록에서 날짜 형식을 어떻게 변경하는지에 대해 자세히 설명하겠습니다.

날짜 표시 형식 변경의 필요성

블로그에 게시되는 날짜는 독자에게 중요한 정보입니다. 날짜 형식이 직관적이지 않거나 블로그 디자인과 어울리지 않는다면, 독자에게 혼란을 줄 수 있습니다. 따라서 날짜 형식을 변경하여 블로그의 일관성을 높이고, 사용자 경험을 개선하는 것이 중요합니다.

글 본문 날짜 형식 변경하기

1 원본 코드

우선, 기본적으로 제공되는 날짜 표시 코드는 다음과 같습니다.

<time class="header-des">[# #_article_rep_simple_date_# #]</time>

이 코드는 글 본문에 날짜를 표시하는 원본 코드입니다. 하지만 이 상태로는 원하는 날짜 형식으로 표시되지 않습니다.

2 변경 코드

날짜 형식을 변경하기 위해, JavaScript를 사용하여 월(month)을 숫자로 변환하고, 이를 기반으로 월 이름을 출력하도록 설정합니다. 아래와 같이 코드를 수정합니다

<time class="header-des">
    <script>
        const month = '[# #_article_rep_date_month_# #]' - 1;
        const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug", "Sep","Oct","Nov","Dec"];
        document.write(m[month]);
    </script>, [# #_article_rep_date_year_# #]
</time>

이 코드에서 month 변수를 설정할 때 -1을 해주는 이유는 JavaScript의 배열 인덱스가 0부터 시작하기 때문입니다. 즉, 1월은 0, 2월은 1, ... 12월은 11로 표현됩니다. 이를 통해 숫자를 월 이름으로 변환할 수 있습니다.

목록에 뜨는 날짜 형식 변경하기

리스트에서 날짜 형식을 변경하는 방법도 비슷하지만, 여러 개의 항목을 다루기 때문에 약간의 차이가 있습니다.

1 원본 코드

리스트에서의 날짜 표시 원본 코드는 다음과 같습니다.

<time class="text-h-400 text-xs block">[# #_list_rep_regdate_# #]</time>

2 변경 코드

리스트에서 날짜를 변경하기 위해, 월을 span 태그로 감싸주고, body 하단에 JavaScript 코드를 추가해야 합니다. 아래와 같이 수정합니다:

<time class="text-h-400 text-xs block list-date">
    <span>[# #_list_rep_date_month_# #]</span>, [# #_list_rep_date_year_# #]
</time>

그리고 body 하단에 아래의 JavaScript 코드를 추가합니다.

<script>
// 리스트 날짜 변경
  const months = document.querySelectorAll(".post .list-date");

  for (const month of months) {
    const monthNomber = month.firstElementChild.textContent - 1;
    const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug", "Sep","Oct","Nov","Dec"];
    month.firstElementChild.textContent = m[monthNomber];
  }
</script>

이 코드는 .list-date 클래스를 가진 모든 요소를 선택하고, 각 요소의 첫 번째 자식 요소(월)를 가져와서 월 이름으로 변경합니다. for...of 루프를 사용하여 모든 항목을 순회하며 형식 변경 스크립트를 적용합니다.

날짜 형식 변경의 효과

날짜 형식을 변경함으로써 블로그의 전반적인 디자인과 일관성을 높일 수 있습니다. 또한, 독자에게 보다 직관적인 정보를 제공하여 블로그의 신뢰성을 높이는 데 기여할 수 있습니다. 특히, 월 이름이 제공된다면 독자가 날짜를 이해하는 데 도움이 됩니다.

결론

이번 글에서는 티스토리 블로그에서 날짜 형식을 변경하는 방법에 대해 알아보았습니다. 글 본문과 목록에서 날짜 형식을 사용자 맞춤형으로 설정하는 과정은 비교적 간단하며, CSS와 JavaScript를 활용하여 원하는 형식으로 조정할 수 있습니다. 날짜 형식을 변경함으로써 블로그의 디자인 일관성을 높이고, 사용자 경험을 개선해보세요.