티스토리 블로그 글 차트 삽입 수정 방법 HTML 총정리

 티스토리 블로그 글 차트

블로그 글을 작성하다 보면, 표나 숫자 데이터를 시각적으로 보여줘야 할 때가 있습니다. 대부분 엑셀 이미지나 파워포인트 그래프를 붙여 넣는 방식으로 많이 사용하지만,이 방식은 모바일에서 글이 깨지거나 흐릿하게 보이는 문제가 자주 발생합니다.

그래서 이번 포스팅에서는 Chart.js 라이브러리를 활용해 ‘살아있는 차트’를 직접 삽입하는 방법을 정리했습니다. 이 방법은 어려워 보이지만 HTML 태그 + 스크립트 몇 줄만 알면 충분히 따라 하실 수 있습니다.

차트

우선, 차트를 사용할 수 있도록 Chart.js를 불러와야 합니다. 글 작성 화면에서 HTML 편집 모드로 이동한 뒤, 상단 부분(본문 시작 전)에 아래 코드를 넣어주세요.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

이 스크립트는 티스토리 에디터에서 회색 박스로 표시되는데, 이 부분을 삭제하면 차트가 동작하지 않으니 그대로 두시면 됩니다.

영역 

이제 차트를 넣을 위치에 표시 영역을 만들어야 합니다. 차트는 canvas 태그를 통해 출력됩니다. HTML 편집 모드에서 원하는 위치에 아래 코드를 삽입하세요.

<canvas id="myChart"></canvas>

이때 id="myChart" 라는 이름은 아래에서 차트를 스크립트로 생성할 때 사용되므로 반드시 기억하거나 동일하게 유지해야 합니다.

• 티스토리 에디터는 canvas 태그를 가끔 삭제하는 경우가 있습니다.

• 글 수정 후 차트가 사라졌다면, HTML 모드에서 다시 canvas 태그를 넣어주면 해결됩니다.

차트 스트립트

스크립트

이제 본문 가장 아래 HTML 편집 모드에서 아래 스크립트를 추가합니다.

<script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', // bar, line, pie 등 변경 가능 data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '예시 데이터', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); </script>

여기서 중요한 부분 document.getElementById('myChart')

위에서 생성한 canvas id 값과 반드시 동일해야 합니다. ID가 다르면 차트는 절대 표시되지 않습니다.

차트 수정 팁

변경 요소	수정 위치	설명
차트 종류	type:	bar / line / pie / bubble 등 변경
X축 이름	labels:	범주명 수정
데이터 값	data:	표시할 숫자 수정
색상	backgroundColor / borderColor	원하는 색으로 변경 가능

반복적으로 수정해보면 구조가 금방 이해됩니다. 위 단계 순서만 잘 지킨다면, 티스토리에서도 모바일·PC 모두 반응형으로 깔끔하게 표시되는 차트를 만들 수 있습니다. 이 방식의 장점은 다음과 같습니다.

• 화면 해상도에 자동 대응 (반응형)

• 이미지가 아니라서 흐림 현상 없음

• 데이터 변경 시 코드만 수정하면 즉시 업데이트 가능

• 콘텐츠 전문성 및 신뢰도 상승 → 체류시간↑ → SEO SEO 상향 가능

블로그에서 정보 전달력을 높이고 싶다면 차트 삽입은 분명히 좋은 선택입니다.