티스토리 HTML 기본 구조 완벽 정리
티스토리 블로그에서 HTML을 수정하면 블로그 디자인과 기능을 내 입맛대로 커스터마이징할 수 있다. 하지만 HTML 구조를 제대로 이해하지 못하면, 수정을 하다가 오류가 발생할 수도 있다. 따라서, 티스토리의 기본 HTML 구조를 이해하고 안전하게 수정하는 방법을 익혀보자. 🚀
2025.02.15 - [💡블로그 운영 Tip 📌/📂 HTML & 🖋️ 폰트 설정] - 티스토리 블로그에서 원하는 폰트를 직접 추가하는 법 (사용자 지정 폰트 적용하기) 🖋️
티스토리 블로그에서 원하는 폰트를 직접 추가하는 법 (사용자 지정 폰트 적용하기) 🖋️
2025.02.12 - [💡블로그 운영 Tip 📌/📂 블로그 디자인 & 🎨 스킨 설정] - 티스토리 사이드바 100% 활용법! 방문자 경험을 높이는 구성 팁 티스토리 사이드바 100% 활용법! 방문자 경험을 높이는 구성
ieat-today.tistory.com
HTML이란? 티스토리에서 HTML의 역할
🔹 HTML이란?
HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 언어다. HTML을 사용하면 웹사이트에서 텍스트, 이미지, 링크, 버튼, 테이블, 폼 등 다양한 요소를 배치할 수 있다.
HTML은 단독으로 동작하는 언어가 아니며, 보통 CSS(스타일)과 JavaScript(기능)와 함께 사용된다.
🔹 HTML, CSS, JavaScript의 역할
| 언어 | 역할 |
| HTML | 웹페이지의 구조를 정의 (텍스트, 이미지, 레이아웃) |
| CSS | 디자인과 스타일 적용 (색상, 크기, 글꼴, 배경) |
| JavaScript | 동적인 기능 추가 (버튼 클릭, 팝업, 애니메이션) |
🔹 HTML 기본 개념
HTML은 태그(Tag)로 구성된 언어이며, 모든 요소는 <태그>와 </태그>의 형태로 감싸져 있다. 예를 들어:
<p>이것은 HTML 문장입니다.</p>
- <p>는 단락(Paragraph)을 의미하는 태그이다.
- </p>는 단락이 끝나는 것을 나타낸다.
💡 Tip: HTML 태그는 대소문자를 구별하지 않지만, 관례적으로 소문자로 작성하는 것이 좋다.
티스토리 HTML 기본 구조
🔹 HTML 기본 문서 구조
HTML 문서는 기본적으로 다음과 같은 구조를 가진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>블로그 제목</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
</head>
<body>
<header>
<h1>블로그 제목</h1>
<nav>메뉴</nav>
</header>
<main>
<article>글 내용</article>
</main>
<footer>
<p>푸터 영역</p>
</footer>
</body>
</html>
🔹 HTML 주요 태그 정리
| 태그 | 역할 |
| <head> | 메타 정보, CSS, 스크립트 포함 |
| <body> | 블로그의 실제 화면에 표시되는 부분 |
| <header> | 블로그 제목, 네비게이션 메뉴 포함 |
| <main> | 블로그 글 내용이 들어가는 부분 |
| <footer> | 블로그 하단(푸터) 영역 |
💡 Tip: <head> 부분을 수정하면 SEO 설정, 스타일 변경, 스크립트 추가를 할 수 있다.
HTML 수정이 가능한 영역 (티스토리에서 수정할 수 있는 부분)
✅ 티스토리에서 수정할 수 있는 HTML 영역
✔ 스킨 편집 → HTML 수정 가능
✔ 사이드바, 위젯, 배너 HTML 코드 추가 가능
✔ HTML 배너 출력 기능을 활용하여 커스텀 코드 추가 가능
✔ 글 작성 시 HTML 모드에서 직접 코드 편집 가능
❌ 티스토리에서 직접 수정할 수 없는 영역
❌ 서버 측 코드(PHP, 데이터베이스 등)
❌ 일부 관리자 페이지의 기본 구조
❌ 티스토리 플랫폼 자체의 시스템 파일
💡 Tip: HTML을 수정할 때, 기존 코드의 백업을 꼭 해두자! 오류 발생 시 원상복구할 수 있도록 대비하는 것이 중요하다.
HTML 편집 시 주의할 점
HTML을 직접 수정할 때는 몇 가지 주의할 사항이 있다.
⚠ HTML 수정 시 주의할 점
✔ 기존 코드 백업 필수 – 수정 전 원본 코드를 저장해두기
✔ 올바른 HTML 태그 사용 – <div>, <p>, <span> 등 태그가 제대로 닫혀 있는지 확인
✔ CSS와 연동되는 부분 체크 – 디자인이 깨지지 않도록 CSS 코드와 함께 조정
✔ JavaScript 충돌 확인 – 추가한 코드가 기존 기능과 충돌하지 않는지 테스트
✔ 적용 후 새로고침(F5) & 캐시 삭제(Ctrl + Shift + R) – 변경 사항을 즉시 확인하려면 캐시 삭제
💡 Tip: HTML 수정 후 문제가 생겼다면, 개발자 도구(F12)에서 오류 메시지를 확인해 보자!
티스토리 HTML 구조 이해하고 안전하게 수정하기
✔ 티스토리 블로그는 HTML, CSS, JavaScript로 구성되어 있으며, HTML은 블로그의 뼈대 역할을 한다.
✔ <head>, <body>, <header>, <main>, <footer> 등 기본 HTML 구조를 이해하면 블로그를 더 쉽게 수정할 수 있다.
✔ 티스토리에서 직접 수정 가능한 HTML 영역과 불가능한 영역을 구분하여 안전하게 커스터마이징해야 한다.
✔ HTML을 수정할 때는 기존 코드 백업, CSS 및 JavaScript 연동 확인, 태그 오류 체크 등을 반드시 고려해야 한다.
📌 실습해보기
1️⃣ <h1>블로그 제목</h1> 태그를 <h1>나만의 블로그</h1>로 변경해 보자.
2️⃣ <body> 안에 <p>안녕하세요!</p>를 추가해 보자.
3️⃣ 변경 후 저장하고 새로고침하여 적용된 내용을 확인하자.
지금까지 티스토리 HTML 구조에 대해 알아봤다! 🚀
다음 글에서는 CSS를 활용하여 블로그 글씨 크기 & 줄 간격을 조절하는 법에 대해 알아보자! 😊
'블로그 운영 Tip > HTML & 폰트 설정' 카테고리의 다른 글
| 티스토리 블로그 목차 만들기 : 클릭하면 이동하는 방법 (0) | 2025.03.04 |
|---|---|
| 티스토리 네비게이션 메뉴 완벽 가이드 🚀 HTML & CSS로 상단 메뉴 꾸미기 (0) | 2025.02.17 |
| 티스토리 블로그에서 원하는 폰트를 직접 추가하는 법 (사용자 지정 폰트 적용하기) 🖋️ (0) | 2025.02.15 |