본문 바로가기
코딩

블로그용 스타일 css

by 죄니안죄니 2025. 5. 14.

블로그용 스타일 css 

<style>
/* 전체 글 본문 스타일 */
article {
  font-family: 'Pretendard', sans-serif;
  line-height: 1.8;
  font-size: 16px;
  color: #2d2d2d;
  padding: 1rem;
}

/* 제목 스타일 */
article h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #4caf50;
  padding-bottom: 0.5rem;
}

/* 목차 스타일 */
article nav {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}
article nav h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #333;
}
article nav li {
  margin-bottom: 0.3rem;
}

/* 섹션 헤더 */
article section h2 {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: #4caf50;
}

/* 코드 박스 */
pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 5px;
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
  margin: 1rem 0;
}
code {
  background: #f3f3f3;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 14px;
}

/* 강조 텍스트 */
strong {
  color: #e91e63;
}

/* 하단 요약, 다음 글 */
footer {
  background: #f1f8e9;
  border-left: 4px solid #8bc34a;
  padding: 1rem;
  margin-top: 3rem;
}
footer p {
  margin: 0.5rem 0;
}
</style>

댓글