HTML & CSS로 티스토리 글을 예쁘게 꾸미는 법

티스토리 블로그를 둘러보면 가독성이 좋고, 디자인이 깔끔한 글을 작성해서 포스팅해주시는 능력자분들이 참 많으신데요. 정말 부러운 능력들입니다. 특히, HTML과 CSS를 활용해서 단순한 텍스트가 아닌, 더 눈에 띄고 예쁜 글을 만들어서 포스팅 한 글들을 보면 참 신기하죠. 그래서 이번 글에서는 HTML과 CSS를 이용해 티스토리 글을 꾸미는 방법을 정리해보았습니다. (강조 박스, 버튼, 인용구, 테이블(표) 디자인 등)

1. 본문 가독성을 높이는 CSS 기본 설정

블로그 글의 가독성을 높이려면 폰트 크기, 줄 간격, 글씨 색상을 최적화해야 합니다.

폰트 크기 및 줄 간격 조절

아래 CSS 코드를 추가하면 글이 훨씬 더 깔끔하고 읽기 쉬워집니다.

body {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}
.post-content {
  max-width: 800px;
  margin: auto;
}

💡 효과:

• 폰트 크기를 조정하면 더 편안한 가독성을 제공합니다.
• 본문의 너비를 800px로 제한하면 너무 넓거나 좁지 않게 정리할 수 있습니다.

2. 강조 박스 스타일 추가

강조하고 싶은 내용이 있다면 정보 박스, 경고 박스, 팁 박스를 활용하세요.
이렇게 하면 글을 읽는 사람들이 중요한 내용을 한눈에 파악할 수 있어요.

강조 박스 디자인 적용

.info-box {
  background: #e3f2fd;
  padding: 15px;
  border-left: 5px solid #2196f3;
  font-size: 16px;
}
.warning-box {
  background: #ffebee;
  padding: 15px;
  border-left: 5px solid #d32f2f;
  font-size: 16px;
}
.tip-box {
  background: #f1f8e9;
  padding: 15px;
  border-left: 5px solid #388e3c;
  font-size: 16px;
}

HTML 코드 예제

<div class="info-box">
  ℹ️ 이 블로그는 HTML과 CSS를 활용해 커스터마이징되었습니다.
</div>

<div class="warning-box">
  ⚠️ 주의: HTML 편집 전에 원본 백업을 꼭 해주세요!
</div>

<div class="tip-box">
  💡 TIP: CSS를 사용하면 블로그 글이 더 세련되게 보일 수 있어요.
</div>

💡 활용 팁:

• 정보 박스: 참고할 만한 정보 전달
• 경고 박스: 중요한 주의 사항 강조
• 팁 박스: 실용적인 정보를 전달할 때 사용

---

3. 깔끔한 버튼 디자인 추가

블로그 글에서 버튼을 활용하면 CTA(Call-To-Action) 효과를 줄 수 있어요.
예를 들어, "더 알아보기" 버튼을 추가하면 방문자가 특정 페이지로 이동하도록 유도할 수 있습니다.

버튼 스타일 적용

.custom-button {
  display: inline-block;
  padding: 12px 20px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.custom-button:hover {
  background: #0056b3;
}

HTML 코드 예제

자세히 보기

💡 활용 팁:

• 버튼을 활용하면 클릭률(CTR) 상승효과를 기대할 수 있어요.
• 배경색을 변경하면 블로그 분위기에 맞게 맞춤 적용 가능합니다.

---

4. 예쁜 인용구 스타일 추가

블로그 글에서 인용구(Quote)를 사용할 때 깔끔한 스타일을 적용하면 가독성이 더 좋아집니다.

인용구 스타일 적용

blockquote {
  background: #f9f9f9;
  padding: 20px;
  border-left: 5px solid #007bff;
  font-style: italic;
  color: #555;
}

HTML 코드 예제

<blockquote>
  "독서는 마음을 살찌우는 최고의 방법이다." – 어니스트 헤밍웨이
</blockquote>

💡 활용 팁:

• 명언, 서평, 리뷰 등에서 눈에 띄는 효과를 줄 수 있어요.
• 배경색과 테두리 색상을 조절하면 블로그 스타일에 맞게 변경 가능합니다.

---

5. 표(테이블) 디자인 개선

기본 테이블(표)은 너무 밋밋하기 때문에, CSS를 활용해 더 보기 좋게 디자인할 수 있어요.

테이블 스타일 적용

.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.custom-table th {
  background: #007bff;
  color: #fff;
}
.custom-table tr:nth-child(even) {
  background: #f2f2f2;
}

HTML 코드 예제

<table class="custom-table">
  <tr>
    <th>책 제목</th>
    <th>저자</th>
  </tr>
  <tr>
    <td>데미안</td>
    <td>헤르만 헤세</td>
  </tr>
  <tr>
    <td>자기혁명</td>
    <td>김미경</td>
  </tr>
</table>

💡 활용 팁:

• 표의 배경색을 조절해 데이터 가독성을 높일 수 있어요.
• 표 안의 폰트 크기, 색상을 조정하면 더 깔끔한 정리 가능

---

6. 반응형 디자인 적용

모바일에서도 글이 예쁘게 보이려면 반응형 디자인을 적용해야 합니다.

CSS 코드: 반응형 스타일 추가

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .custom-table {
    font-size: 14px;
  }
}

💡 활용 팁:

• 폰트 크기를 자동으로 조정하여 가독성 유지
• 모바일에서도 잘 보이도록 테이블 크기 최적화

---

마무리

오늘은 티스토리에서 HTML & CSS를 활용해 글을 예쁘게 꾸미는 방법을 공유해 보았습니다. 어떤 것들이 마음에 드시던가요? 여러 기기에서 보더라도 가독성을 올려줄 수 있는 반응형 디자인을 수정하는 방법이 저는 너무 마음에 들더라고요. 물론 아직도 갈길이 멀고 배워야 할게 산더미지만 하루하루 쌓아나갈 수 있도록 더 노력해야겠습니다. 그럼 오늘도 즐거운 하루 되세요. 

✅ 가독성을 높이는 폰트 설정
✅ 강조 박스 활용하기
✅ 버튼 스타일 추가
✅ 인용구 & 표 디자인 개선
✅ 반응형 디자인 적용

태그: 티스토리, 블로그 디자인, HTML 꾸미기, CSS 활용, 블로그 글쓰기, 반응형 웹, 글 가독성, 블로그 최적화, SEO