티스토리 HTML 편집 가이드

코드블록·목차·스킨 충돌 해결 · 최종 수정 2026-08-12

HTML 모드로 전환하기

티스토리는 네이버와 달리 HTML 소스를 직접 편집할 수 있습니다. 이게 큰 차이입니다. 서식 붙여넣기에 의존하지 않고 원하는 마크업을 정확히 넣을 수 있습니다.

1. 티스토리 관리 화면에서 글쓰기를 엽니다.
2. 편집기 오른쪽 위의 모드 표시(기본모드)를 클릭합니다.
3. 목록에서 HTML을 선택합니다. 마크다운 모드도 있지만, 표·인용문 스타일까지 통제하려면 HTML 모드가 낫습니다.

변환 결과 붙여넣기

변환기에서 플랫폼 탭을 티스토리로 두고, HTML 코드 복사 버튼을 누릅니다. 네이버와 달리 여기서는 서식 그대로 복사가 아니라 코드 복사입니다. HTML 모드 편집창에 그대로 붙여넣으면 됩니다.

붙여넣은 뒤 다시 기본모드로 돌아가면 렌더링된 모습을 확인할 수 있습니다. 다만 기본모드로 갔다가 다시 HTML 모드로 오면 태그가 일부 재정리될 수 있으니, 세밀하게 손본 마크업이라면 왕복을 줄이고 미리보기로 확인하세요.

코드블록 문법 강조 살리기

티스토리는 코드블록에 문법 강조를 적용해 줍니다. 조건은 마크업 형태입니다.

<pre><code class="language-javascript">
const x = 1;
</code></pre>

class="language-언어명"이 <code> 태그에 붙어 있어야 합니다. 이 변환기의 티스토리 모드는 다른 태그의 class는 모두 지우면서 코드 태그의 language- 클래스만 남깁니다. 마크다운에서 ```javascript처럼 언어를 적어두면 그대로 전달됩니다.

주의할 점 두 가지입니다.

• <pre>와 <code> 사이에 줄바꿈이나 공백이 들어가면 첫 줄이 빈 줄로 보일 수 있습니다.
• 스킨에 따라 자체 코드 하이라이터가 함께 동작해 스타일이 겹칠 수 있습니다. 그럴 땐 변환기의 순수 HTML 모드로 뽑아 스킨 스타일에 맡기는 편이 깔끔합니다.

목차 앵커 링크 만들기

긴 글일수록 목차가 있으면 체류 시간이 늘어납니다. 티스토리는 id 속성을 지우지 않으므로 앵커 링크가 정상 동작합니다.

변환기의 목차 자동 생성 옵션을 켜면 h2·h3를 훑어 글 맨 위에 목차 상자를 넣고, 각 제목에 id를 부여해 클릭하면 해당 위치로 이동하게 만듭니다. 한글 제목은 자동으로 슬러그로 변환되고 중복된 제목에는 번호가 붙습니다.

<h2 id="설치-방법">설치 방법</h2>
...
<a href="#설치-방법">설치 방법</a>

스킨이 scroll-behavior: smooth를 지원하면 부드럽게 스크롤됩니다. 상단 고정 메뉴가 있는 스킨에서 제목이 메뉴에 가려진다면, 스킨 CSS에 h2, h3 { scroll-margin-top: 70px; }를 추가하면 해결됩니다.

스킨 CSS와 충돌하지 않게

티스토리는 스킨마다 본문 스타일이 다릅니다. 변환기의 티스토리 모드는 인라인 스타일을 넣기 때문에 스킨 스타일보다 우선합니다. 두 가지 선택지가 있습니다.

스킨을 나중에 바꿀 계획이 있다면 순수 HTML 모드가 유리합니다. 인라인 스타일로 박아둔 글은 스킨을 바꿔도 예전 색과 크기가 그대로 남기 때문입니다.

티스토리 검색 노출을 위한 구조

티스토리 글은 구글·다음·네이버 검색 유입이 큰 비중을 차지합니다. 마크업 구조가 검색 결과에 직접 영향을 줍니다.

• 제목 계층을 지키세요. h2 다음에 h4로 건너뛰지 말고 h2 → h3 순서로 씁니다.
• 본문 h1은 쓰지 마세요. 글 제목이 이미 h1입니다. 본문은 h2부터 시작합니다.
• 이미지 alt 속성을 채우세요. 마크다운의 ![대체 텍스트](...)가 그대로 alt가 됩니다.
• 표와 목록은 검색 결과의 리치 스니펫으로 노출될 가능성이 있습니다.
• 첫 문단 150자가 검색 결과 요약으로 잡히는 경우가 많으니, 인사말 대신 핵심 내용으로 시작하세요.

티스토리 관리 → 플러그인에서 메타 태그 등록과 사이트맵 제출을 함께 해두면 색인 속도가 눈에 띄게 빨라집니다.