아래 사진을 보고 따라해보세요!
서론
티스토리를 운영하다 보면, 유튜브 영상 삽입, 애드센스 광고 코드 붙이기, 버튼 만들기, 다른 웹사이트 위젯을 넣는 등 HTML 코드를 삽입해야 할 일이 자주 발생합니다. 하지만 처음 티스토리를 접한 분들에게는 "HTML 코드를 어디에 넣어야 하지?"라는 고민이 생기곤 하죠. 이번 글에서는 티스토리에서 HTML 코드를 넣는 방법을 기초부터 실전까지 상세히 알려드립니다.
티스토리 HTML 코드는 어디에 넣을 수 있을까?
티스토리는 크게 두 가지 방법으로 HTML 코드를 삽입할 수 있습니다.
✅ ① 글쓰기 에디터에서 HTML 직접 입력
- 포스트 작성 시 HTML 코드를 직접 글 안에 삽입
- 유튜브, 구글지도, 광고, 버튼 등 삽입 가능
✅ ② 스킨 편집에서 HTML 삽입
- 블로그 상단, 사이드바, 하단 등 고정 영역에 HTML 코드 삽입 가능
- 애드센스 자동 광고, 방문자 통계 코드, 카카오톡 채널 위젯 등 설치에 적합
게시글에서 HTML 코드 삽입하는 방법 (사진)
Step 1. 글쓰기 화면에서 </> HTML 편집 모드 선택
- HTML을 편집하기 위해선 관리자 모드로 실행하셔야 합니다.
- 새 글쓰기 클릭
- 우측 상단의 <기본모드>에서 HTML 탭 선택
- 위의 사진 처럼 안내 문구가 보여질땐 "예" 또는 "확인"을 눌러주세요.
- HTML 모드로 바뀌면 위 사진처럼 보여집니다.
- 빨간 화살표가 표시된 부분부터 HTML 코드 또는 글을 작성하실 수 있습니다.
- HTML 코드 삽입
- HTML 모드를 종료하고 다시 기본모드로 돌아옵니다.
- HTML이 올바르게 삽입되었는지 확인합니다.
- HTML이 올바르게 작동하는지 체크합니다.
유튜브 HTML 코드 붙여넣기
아래는 예시 코드입니다. 코드블럭을 복사하여 위의 사진처럼 html을 삽입하시면 됩니다.
"영상ID" 라고 적힌 부분을 지우고 유튜브 영상에서 고유주소를 기재하시면 됩니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>
코드를 삽입한 후에는 다시 기본 모드로 돌아가 확인하면 실제 영상이나 위젯이 보입니다.
( 아래 영상은 참고용이므로, 영상은 재생되지 않습니다. )
블로그 스킨 HTML에 코드 삽입하는 방법
스킨 HTML 편집은 디자인을 건드리는 작업이므로, 꼭 백업을 먼저 해두는 것을 추천드립니다.
1. 티스토리 관리자 → 꾸미기 → 스킨 편집
2. 스킨 편집에서 → HTML 편집 진입
3. <head>, <body> 등의 영역에 코드 삽입
구글 애널리틱스 코드등 광고나 인증을 위한 HTML 코드는 코드 삽입 위치를 살펴보시길 바랍니다.
예: <head>에 삽입, <body>에 삽입, </body> 위에 삽입 등
HTML 코드가 적용되지 않을 때 해결법
- 스크립트가 보안상 차단될 수 있음 → 티스토리에서 일부 JavaScript는 제한
- 태그가 자동 변형될 수 있음 → HTML 모드에서 작성 후 기본 모드로 돌아갈 때 일부 태그 손실
- 브라우저 캐시 문제 → 적용 후 F5 새로고침 또는 Ctrl+Shift+R 강력 새로고침 시도
자주 사용하는 HTML 코드 예시
| 목적 | HTML 코드 |
| 유튜브 영상 삽입 | <iframe src="..."></iframe> |
| 구글 지도 삽입 | <iframe src="https://maps.google.com/@"></iframe> |
| 버튼 만들기 | <a href="링크" class="btn">버튼 텍스트</a> |
| 애드센스 광고 | 구글에서 제공한 스크립트 삽입 |
| 네이버 이웃추가 버튼 | <script src="네이버에서 제공한 js 코드"></script> |
마무리하며 – HTML 코드 삽입, 어렵지 않아요!
티스토리는 블로그 중에서도 HTML 커스터마이징이 자유로운 플랫폼입니다. 오늘 알려드린 방법대로 글쓰기 화면과 스킨 편집 화면에서 HTML 코드를 적절히 삽입하면, 여러분의 블로그는 더 풍성하고 전문적으로 보일 수 있어요.
HTML이 어렵게 느껴졌던 분들도 이번 기회에 도전해보세요!
'티스토리 꾸미기' 카테고리의 다른 글
| 구글 색상 코드 2탄 / 블로그 꾸미기 등 색상 코드 활용해보자! (15) | 2025.05.04 |
|---|
