티스토리 블로그를 더 멋지게 만들고 싶어 "스킨 편집"을 열었는데, 갑자기 복잡한 코드의 세계가 펼쳐지죠? AI에게 글 작성 요청 시 "주석(설명) 전부 다 넣어줘" 이거 하나면 조금 덜 힘드실 거예요 html모드가시면 아하! 하실 겁니다(매우 중요)
🌟 16️⃣ 주석(Comment)의 진짜 역할 (초보자 필수!)
1️⃣ 스킨 편집이 뭐예요?
티스토리 블로그는 기본 스킨만으로도 충분히 예쁘지만, 더 개성 있게 바꾸고 싶을 땐 스킨 편집을 사용해야 합니다.
쉽게 말하면, 스킨 편집은 블로그의 옷을 직접 고치는 것이에요. 글씨 크기, 색상, 배치, 메뉴 위치 등 내 입맛에 맞게 고칠 수 있죠.
예를 들어, “목차를 카드 형태로 넣고 싶다”거나 “글 제목을 더 크게 보이고 싶다”는 것도 스킨 편집에서 할 수 있어요.
✔ 초보자 팁: 처음엔 무조건 어렵게 느껴지지만, 하나씩 해보면 퍼즐 맞추듯 재미있어집니다.
2️⃣ HTML과 CSS는 무슨 차이?
HTML은 뼈대, CSS는 옷이라고 생각하면 쉬워요.
| 구분 | 설명 | 예시 |
|---|---|---|
| HTML | 구조를 만드는 언어 | <p>안녕하세요</p> |
| CSS | 디자인을 입히는 언어 | p { color: red; } |
예를 들어, 글자를 띄우고 싶을 땐 HTML로 문단을 만들고, 그 문단의 글자 색깔이나 간격은 CSS로 조절하는 식입니다.
✔ 초보자 팁: HTML은 블로그 내용에 직접 들어가는 부분, CSS는 그 내용을 어떻게 보일지 정하는 역할이에요.
3️⃣ 코드 편집창 처음 열면 나오는 화면
스킨 편집에 들어가면 보통 이런 식으로 화면이 구성돼 있어요:
- HTML 편집 – layout.html
- CSS 편집 – style.css 또는 style.css.html
맨 처음엔 검정 배경에 영어와 태그 투성이의 코드가 쭉 펼쳐지죠. 당황하지 마세요. 대부분의 초보자가 처음엔 여기서 ‘뒤로 가기’를 누릅니다 😅
✔ 초보자 팁: layout.html은 블로그 전체 구조, style.css는 그 구조의 디자인 담당입니다.
4️⃣ 어디에 코드를 넣어야 하나요?
이게 정말 헷갈리죠! 사실 코드는 아무 데나 넣으면 안 돼요. 적절한 위치에 넣어야 제대로 적용됩니다.
예시 1: 글 상단에 안내 문구를 넣고 싶다면?
<div class="notice-box">이 글은 협찬이 포함되어 있습니다.</div>▶ 이 코드는 layout.html 안의 <article> 태그 안에 넣는 것이 일반적입니다.
예시 2: 글 본문 스타일을 바꾸고 싶다면?
p { line-height: 1.8; }▶ 이건 style.css 안에 넣는 코드예요. 본문 문단 간격을 넓혀주는 역할을 합니다.
5️⃣ 잘못 넣으면 어떻게 되죠?
잘못된 위치에 코드를 넣으면 블로그가 깨지거나, 아무 효과도 안 나옵니다.
예를 들어, CSS 코드를 HTML에 넣으면 아무 반응이 없고, 반대로 HTML 태그를 CSS에 넣으면 에러가 나거나 화면이 이상해질 수 있어요.
가장 흔한 실수 예시:
<div style="color:red">문구</div> ← O (HTML 안에 스타일 속성은 OK)
p {
color: red;
} ← O (CSS 파일 안에만 사용해야 함)
<style>div{color:red}</style> ← X (이건 CSS에만 써야 함)✔ 초보자 팁: 무언가 이상하면 일단 넣은 코드를 하나씩 지우며 실험해 보세요. 겁먹을 필요 없어요.
6️⃣ HTML 넣는 위치 실전 예시
“이 코드를 대체 어디에 넣어야 하죠?” 초보자 분들이 제일 많이 물어보는 부분입니다. 아래 실전 예시를 보면 감이 올 거예요!
예시 1: 공지 문구를 글 위에 띄우고 싶어요
사용 코드:
<div class="custom-notice">⚠ 이 글은 협찬이 포함되어 있습니다</div>▶ 넣는 위치: layout.html 안에서 <article> 태그 바로 위쪽.
예시 2: 글 아래에 저작권 문구를 자동으로 붙이고 싶어요
<div class="copyright-info">© 2025 나의 블로그. 무단 복제 금지.</div>▶ 넣는 위치: layout.html 파일 안에서 </article> 태그 직전에 넣습니다.
✔ 꿀팁: HTML은 구조이기 때문에 삽입 위치가 굉장히 중요합니다. 어떤 코드든 해당 부분이 화면에 나올 때 출력되는 위치에 붙여야 해요.
7️⃣ CSS는 어디다 붙여야 할까?
CSS는 보통 style.css 파일 안에 넣습니다. 하지만 초보자들은 "그 파일은 어디 있나요?"라는 질문도 많이 하시죠.
✔ 경로: 스킨 편집 → 왼쪽 파일 목록에서 'style.css' 클릭하면 열립니다.
예시: 본문 글자 크기 키우기
.article-view p {
font-size: 18px;
}▶ 이렇게 작성한 CSS는 style.css 맨 아래에 붙여 넣어도 됩니다. 이미 같은 속성이 있다면, 새로 넣은 게 적용돼요.
✔ 팁: CSS는 겹치는 경우 가장 나중에 선언된 게 우선되므로, 되도록 맨 아래에 정리해서 넣는 습관을 들이세요.
8️⃣ HTML 실수 예시 vs 정답 비교
| 상황 | 잘못된 예시 | 올바른 예시 |
|---|---|---|
| 문구 강조 | <p style="bold">중요</p> | <p style="font-weight:bold;">중요</p> |
| 링크 삽입 | <a>블로그</a> | <a href="https://blog.tistory.com">블로그</a> |
| 줄 나누기 | <p>줄1 <p>줄2 | <p>줄1</p> <p>줄2</p> |
✔ 꿀팁: HTML 태그는 열고 닫는 쌍이 꼭 필요해요. <div> 열었으면 </div>도 닫아줘야 해요!
9️⃣ 수정 전 꼭 백업하세요!
스킨 편집하기 전에 백업은 필수입니다! 정말 자주 실수하는 부분인데, 수정하다가 블로그가 엉망이 되면 되돌리기 어렵거든요.
✔ 방법:
- 스킨 편집 화면 오른쪽 위의 ‘백업’ 클릭
- 파일 저장 (자동으로. zip 파일로 저장됨)
- 문제가 생기면 이 파일로 ‘복원’ 가능
백업만 잘해도 무한 실험이 가능해집니다. 겁먹지 마세요 😊
🔟 복사해 붙여 넣기, 왜 안 될까요?
인터넷에 떠도는 코드나 GPT가 알려준 코드를 붙여 넣었는데 블로그에 아무 변화도 없을 때, 좌절감 들죠?
그럴 땐 아래 3가지를 꼭 확인해 보세요!
- 위치가 잘못되었는지? (html인지 css인지 확인)
- 태그가 다 열리고 닫혔는지?
- 다른 코드와 충돌 나지 않았는지? (같은 class명이 이미 있다면 덮어씌워질 수도 있어요)
✔ 꿀팁: 안 될 땐 전체 화면 새로고침(F5 또는 Ctrl+F5)하고 다시 확인해 보세요. 캐시 때문에 안 보이는 경우도 있어요.
11️⃣ 코드 오류 났을 때 대처법
“코드를 붙였는데 화면이 이상해졌어요!” 정말 흔한 상황이죠. 너무 걱정 마세요. 대부분은 간단한 실수에서 비롯됩니다.
✔ 이렇게 대처해 보세요:
- 1. 방금 넣은 코드만 지워보세요. 화면이 정상으로 돌아오면 문제 원인을 찾은 거예요!
- 2. HTML 태그가 다 닫혔는지 확인 – <div>를 열었으면 반드시 </div>로 닫아야 해요.
- 3. CSS를 HTML에 잘못 붙이지 않았는지 – CSS는 반드시 style.css에 붙여야 작동해요.
✔ 팁: 그래도 원인이 안 보인다면 백업한 파일로 복원하는 것이 가장 빠른 방법입니다!
12️⃣ 수정한 코드 되돌리는 방법
수정했는데 마음에 안 들거나 오류가 생겼다면 되돌리는 방법을 알아두는 것이 중요해요.
- 스킨 편집 → 오른쪽 위 ‘복원’ 버튼 클릭
- 저장해 뒀던 백업 파일(. zip)을 업로드
- 기존 코드로 돌아갑니다 (딱 수정 전 상태로!)
✔ 복원은 언제든 가능하니, 부담 갖지 말고 실험해 보세요. 실수는 배우는 과정의 일부예요 😊
13️⃣ 꼭 알아야 할 기본 구조
스킨 구조는 처음엔 복잡해 보이지만, 몇 가지 기본 틀만 알면 훨씬 수월해집니다.
| 파일 | 역할 |
|---|---|
| layout.html | 전체 구조 담당 (HTML) |
| style.css | 디자인/색상/배치 설정 (CSS) |
| widget.css, content.css | 글 본문이나 사이드바 별도 스타일 지정 |
✔ 초보자에게 가장 중요한 건 layout.html과 style.css만 이해해도 충분하다는 점입니다.
14️⃣ 자주 쓰는 HTML 코드 모음
아래 코드는 초보자들이 블로그에 자주 쓰는 HTML입니다. 필요할 때 복사해서 쓰세요!
<!-- 공지 박스 -->
<div style="padding:10px; background:#f1f1f1; border-left:4px solid #007bff;">
📢 이 글은 최신 정보를 포함하고 있습니다.
</div>
<!-- 강조 문구 -->
<p style="font-weight:bold; color:#d9534f;">※ 이 부분은 꼭 확인하세요!</p>
<!-- 구분선 -->
<hr style="border:1px dashed #ccc;" />
<!-- 외부 링크 -->
<a href="https://example.com" target="_blank" style="color:#1a73e8; text-decoration:underline;">사이트 바로가기</a>
✔ 저장해 두었다가 필요할 때마다 꺼내 쓰면 편해요!
15️⃣ 초보자를 위한 꿀팁 총정리
- 무조건 백업 먼저 – 실험은 백업 후에 마음껏!
- 복사한 코드, 위치 확인 필수 – HTML은 layout.html, CSS는 style.css
- 한 줄씩 붙여 넣으며 테스트 – 전체 붙여 넣고 오류 나면 찾기 힘들어요
- 모르면 질문하세요 – GPT나 블로그 커뮤니티에 물어보는 것도 실력입니다
- 계속하다 보면 익숙해져요 – 누구나 처음엔 어려웠어요!
스킨 편집은 '코드 잘하는 사람만의 영역'이 아닙니다. 여러분도 충분히 할 수 있어요!
블로그를 내 스타일로 바꿔가는 즐거움, 오늘부터 차근차근 시작해 보세요 😊
🌟 16️⃣ 주석(Comment)의 진짜 역할 (초보자 필수!)
💡 주석은 코드 속 힌트이자, 실수 예방을 돕는 초보자 최고의 도구입니다!
브라우저에는 보이지 않지만, 편집자만 볼 수 있는 메모로 매우 유용해요.
✔ HTML 주석 예시:
<!-- 이 부분은 본문 시작 영역입니다 -->
<div class=\"article\">내용</div>
✔ CSS 주석 예시:
/* 글자 색상 설정 */
.article-title {
color: #333;
}
✔ 어떤 점이 좋을까요?
- ✅ 어떤 코드인지 설명 가능 – 나중에 봐도 헷갈리지 않아요
- ✅ 테스트용 코드 잠시 숨기기 – 쉽게 비교 가능
- ✅ 협업 시 코드 의미 전달 – 가독성↑
✔ 실제 사용 예:
<!-- ✅ 공지 박스 -->
<div class=\"notice\">이 글은 협찬이 포함되어 있습니다</div>
<!-- ✅ 추천 문구 강조 -->
<p style=\"font-weight:bold;\">※ 꼭 읽어보세요!</p>
주석을 습관처럼 쓰는 사람은 실수도 적고, 편집 속도도 점점 빨라집니다!
눈에 안 보인다고 무시하지 말고, 미래의 나에게 보내는 쪽지라고 생각하세요 😊
📚 함께 읽으면 좋은 추천 글
'블로그란?초보 지식부터 전문가 지식까지 알아보기' 카테고리의 다른 글
| 티스토리 H1? H2? H3? 본문1, 본문2, 본문3 이 뭐죠? (14) | 2025.06.20 |
|---|---|
| "티스토리 서식 관리 어떻게 사용하나요?" (13) | 2025.06.20 |
| 티스토리 카테고리 관리 어떻게 사용하나요? 방법 좀 알려주세요! (11) | 2025.06.20 |
| 티스토리 페이지 관리 어떻게 사용하나요? 궁금해요! (12) | 2025.06.20 |
| "티스토리 플러그인 사용법 알고싶어요!" (6) | 2025.06.20 |
