티스토리 블로그 본문 가독성을 높이는 각종 스타일 공유

728x90

아래 내용처럼 각종 본문 꾸미기 HTML 코드와 적용 모습을 적어보았다. 박스 안에 있는 내용 그대로 HTML에 붙여넣기하면 된다. 나도 이때 동안 써먹지 못했는데 이제부터라도 써먹어보려고 한다.

1. 중간 제목 (소제목) 스타일

① 왼쪽 테두리 강조형

<h3 style="border-left: 5px solid #ff5733; padding-left: 10px; font-weight: bold; color: #333;">
🔥 중요한 소제목 🔥
</h3>

🔥 중요한 소제목 🔥

② 배경 색상 강조형

<h3 style="background: #ffeb3b; padding: 10px; border-radius: 5px; font-weight: bold; display: inline-block;">
📢 오늘의 핵심 내용 📢
</h3>

📢 오늘의 핵심 내용 📢

③ 밑줄 & 점선 강조형

<h3 style="border-bottom: 3px dashed #ff5733; display: inline-block; font-weight: bold;">
🚀 핵심 포인트 🚀
</h3>

🚀 핵심 포인트 🚀

④ 텍스트 그림자 효과

<h3 style="text-shadow: 2px 2px 5px rgba(0,0,0,0.3); font-size: 22px; font-weight: bold; color: #007bff;">
✨ 특별한 소제목 ✨
</h3>

✨ 특별한 소제목 ✨

2. 본문 스타일 (텍스트, 강조, 박스)

① 강조 텍스트 (컬러 + 볼드)

<span style="color: #ff5733; font-weight: bold;">🔥 중요한 내용 🔥</span>

🔥 중요한 내용 🔥

② 하이라이트 효과 (형광펜)

<span style="background: yellow; padding: 2px 5px; border-radius: 3px;">
✍️ 이 부분 꼭 기억하자! ✍️
</span>

✍️ 이 부분 꼭 기억하자! ✍️

③ 박스형 강조 (경고, 정보, 팁)

<div style="background: #ffeb3b; padding: 10px; border-radius: 5px; font-weight: bold;">
⚠️ 주의! 이 부분을 꼭 확인하세요!
</div>

⚠️ 주의! 이 부분을 꼭 확인하세요!

3. 버튼 스타일 (클릭 유도)

① 기본 버튼

<a href="https://example.com" style="display: inline-block; padding: 10px 20px; background: #007bff; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold;">
👉 클릭해서 확인하기 👈
</a>

👉 클릭해서 확인하기 👈

② 입체 버튼

<a href="https://example.com" style="display: inline-block; padding: 10px 15px; background: linear-gradient(to right, #ff5733, #ffbd69); color: white; font-weight: bold; text-decoration: none; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3);">
🔥 지금 확인하기! 🔥
</a>

🔥 지금 확인하기! 🔥

4. 목록 스타일 (커스텀 리스트)

① 체크리스트 스타일

<ul style="list-style: none; padding-left: 0;">
  <li>✅ 첫 번째 항목</li>
  <li>✅ 두 번째 항목</li>
  <li>✅ 세 번째 항목</li>
</ul>

✅ 첫 번째 항목
✅ 두 번째 항목
✅ 세 번째 항목

② 숫자 리스트

<ol style="padding-left: 20px; font-weight: bold; color: #ff5733;">
  <li>첫 번째 내용</li>
  <li>두 번째 내용</li>
  <li>세 번째 내용</li>
</ol>

첫 번째 내용
두 번째 내용
세 번째 내용

이 부분은 티스토리 블로그 기본 기능에도 있으므로 넘어가도 좋다.

5. 접기/펼치기 (토글 박스)

<details>
<summary style="cursor: pointer; font-weight: bold; color: #007bff;">🔽 클릭해서 확인하기</summary>
<p>여기에 숨겨진 내용을 넣을 수 있음.</p>
</details>

🔽 클릭해서 확인하기

여기에 숨겨진 내용을 넣을 수 있음.

6. 배경 효과 (글씨 뒤에 효과 넣기)

① 배경 색 그라데이션

<h3 style="background: linear-gradient(to right, #ff5733, #ffbd69); padding: 10px; color: white; font-weight: bold; border-radius: 5px; display: inline-block;">
🌈 멋있는 소제목 🌈
</h3>

🌈 멋있는 소제목 🌈

② 애니메이션 효과 (반짝반짝)

<style>
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
.blinking {
  animation: blink 1s infinite;
  color: red;
  font-weight: bold;
}
</style>
<span class="blinking">⚠️ 여긴 중요한 내용! ⚠️</span>

⚠️ 여긴 중요한 내용! ⚠️

7. 아이콘 & 이모티콘 스타일

① 이모티콘 박스

<div style="background: #dff9fb; padding: 10px; border-radius: 5px; font-weight: bold; display: inline-block;">
🎯 핵심 요약: 오늘의 결론은?
</div>

🎯 핵심 요약: 오늘의 결론은?

② 움직이는 텍스트 (마퀴 효과)

<marquee behavior="scroll" direction="left" scrollamount="6">
🎉 이벤트 진행 중! 지금 확인하세요! 🎉
</marquee>

🎉 이벤트 진행 중! 지금 확인하세요! 🎉

8. 박스 안에 콘텐츠 정리

① 컬러 박스 (노트 스타일)

<div style="border-left: 5px solid #007bff; background: #f0f8ff; padding: 10px; border-radius: 5px;">
📌 <strong>TIP:</strong> 이 방법을 쓰면 더 효과적이다!
</div>

📌 TIP: 이 방법을 쓰면 더 효과적이다!

② 경고 박스

<div style="background: #ffcccc; padding: 10px; border-radius: 5px; border-left: 5px solid red;">
⚠️ <strong>주의:</strong> 이 부분 실수하면 큰일 난다!
</div>

⚠️ 주의: 이 부분 실수하면 큰일 난다!

9. 폰트 & 텍스트 스타일

① 특수 폰트 적용 (구글 폰트)

<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
.special-font {
font-family: 'Nanum Pen Script', cursive;
font-size: 22px;
}
</style>
<p class="special-font">✍️ 필기체 느낌 나는 텍스트 ✍️</p>

✍️ 필기체 느낌 나는 텍스트 ✍️

② 단어 강조 (네온 효과)

<style>
.glow {
color: #fff;
text-shadow: 0 0 5px #ff5733, 0 0 10px #ff5733, 0 0 15px #ff5733;
}
</style>
<p class="glow">✨ 반짝이는 텍스트 ✨</p>

✨ 반짝이는 텍스트 ✨