서론: 블로그 글, 왜 예쁘게 보이지 않을까요?
구글 블로그스팟에 글을 올려봤는데, 뭔가 밋밋해서 마음에 안 드셨던 적이 있나요? 글 내용은 좋은데, 화면이 너무 단순하거나 중요한 내용이 눈에 잘 안 들어오는 경우가 있습니다.
사실 이런 건 글을 못 써서가 아니라, 스타일을 조금만 손보면 금방 해결됩니다. 오늘은 초보자도 따라 할 수 있도록, 글을 더 깔끔하고 읽기 좋게 만드는 방법을 단계별로 알려드릴게요.
걱정하지 마세요. 복잡한 용어 없이, 차근차근 설명드릴 거예요. 맨 아래에 있는 CSS 코드를 그대로 복사해서 붙이면 완성됩니다.
1단계: HTML 편집 모드 들어가기
블로그스팟에서 새 글을 쓰거나 기존 글을 열면, 글쓰기 화면 위쪽에 ‘HTML 보기’ 버튼이 있습니다. 그걸 클릭하면 글 내용이 HTML 코드로 보입니다.
처음 보면 낯설지만 걱정하지 마세요. 여기서 우리는 그냥 코드를 붙여 넣기만 하면 됩니다.
2단계: CSS 넣기
HTML 보기 모드에서 가장 위쪽에, 이 글 맨 아래 적어둔 CSS 전체 코드를 그대로 복사해서 붙여 넣으세요. 이 코드는 블로그 글의 모양을 바꿔주는 스타일 규칙입니다.
이번 글에서는 크게 세 가지 스타일을 적용합니다.
- 본문 폭을 중앙에 맞추는 스타일 (.post-body)
- 중요한 내용을 강조하는 박스 스타일 (.callout)
- SEO 정보를 표로 깔끔하게 정리하는 스타일 (table.seo)
3단계: 본문 내용을 .post-body로 감싸기
이렇게 하면 글이 중앙 정렬되고, 폭이 딱 맞게 줄어들어 읽기 편해집니다.
<div class="post-body">
<h2>여기에 제목</h2>
<p>여기에 글 내용을 적습니다.</p>
</div>4단계: 콜아웃 박스 넣기
중요하거나 꼭 기억해야 하는 문장은 아래처럼 작성하세요.
<div class="callout">
💡 <b>중요</b> — 본문 폭은 <span class="k">900px</span>을 넘기지 마세요.
</div>5단계: SEO 표 만들기
검색엔진에 잘 노출되게 하려면, 핵심 키워드와 설명을 표로 정리해두는 게 좋습니다.
| 항목 | 내용 |
|---|---|
| 핵심 키워드 | 블로거 CSS, 구글 블로그 레이아웃 |
| 검색 설명 | 본문 폭 최적화, 콜아웃 강조, SEO 표 |
SEO 표는 핵심 키워드와 설명을 깔끔하게 나열할 수 있습니다.
<table class="seo">
<tr>
<th>항목</th>
<th>내용</th>
</tr>
<tr>
<td>핵심 키워드</td>
<td>블로거 CSS, 구글 블로그 레이아웃</td>
</tr>
<tr>
<td>검색설명</td>
<td>본문 폭 최적화, 콜아웃 강조, SEO 표</td>
</tr>
</table>이 표를 활용하면 키워드와 그 설명을 한눈에 볼 수 있습니다.
6단계: 제목 간격 조정하기
이건 CSS에서 자동 적용됩니다. h2, h3 제목만 쓰면 여백이 들어갑니다.
마무리
오늘 배운 대로 적용하면, 디자인이 깔끔해지고 가독성이 좋아집니다. 이제 아래 CSS 전체 코드를 복사해서 바로 적용해 보세요.
전체 CSS 코드 모음
<style>
.post-body {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.callout {
border-left: 6px solid #6b7c93;
background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
padding: 14px 16px;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
margin: 18px 0;
font-size: 105%;
}
.callout b { font-size: 110%; }
.k { font-weight: 700; }
table.seo {
border-collapse: collapse;
width: 100%;
}
table.seo th, table.seo td {
border: 1px solid #e5e7eb;
padding: 10px;
vertical-align: top;
}
table.seo th {
background: #f8fafc;
}
h2, h3 {
margin-top: 60px;
}
</style>
댓글 쓰기