포스팅 글 본문 상단 에 글 제목 을 이뿌게 꾸며보자... 티스토리 블로그 ( CSS 이용편 )

바로 위에 보이는 것처럼 많은 분들이 광고와 본문 사이에 제목을 한번 더 작성하시면서 자연스럽게 광고 본문 사이 공간을 구분하는 용도로 많이들 사용하시는데요. 간단한 효과로 블로그를 한층 더 세련되고 바꿔주는 것 같아 보기 좋네요. 보통 이런 효과를 포토샵으로 이뿌게 꾸미시는 분들도 계시지만, 간단한 CSS 스타일을 적용시켜 깔끔하게 정리하시는 분들도 계셨습니다. 저는 후자를 이용해서 작성하는 방법을 제가 포스팅 한 글을 예를 들어 알려드리도록 하겠습니다.

▶ 적용된 예시 먼저 보기

▶ 가장 간단한 방법, 본문 HTML 에 작성하기

티스토리의 경우 우측 상단에 HTML 체크박스를 체크하게 되면, HTML을 이용해서 작성할 수 있는 기능이 있는데요. 가장 간단한 방법으로 이렇게 본문 HTML 상단에 제목을 작성하고, CSS 로 꾸미는 방법이 있습니다. 일단 소스를 공개하도록 하겠습니다. 

<div style="margin: 20px 0; 
padding: 10px; 
background-color: #6699ff;
font-weight: bold; 
font-size: 18px; 
color: white; 
text-align: center;">
블로그 본문 제목 작성
</div>

위와 같이 태그를 복사해서 본문 상단에 복사하게 되면 본문 상단에 이뿌게 표시되는 모습을 볼 수 있습니다.

그럼 CSS 스타일에 대해서 간략하게 설명하도록 하죠.

margin: 20px 0;	파란색 박스 외부의 아래, 위 여백을 20px로 설정합니다.
padding: 10px;	파란색 박스 내부에서 제목과의 여백을 10px 로 설정합니다.
background-color: #6699ff;	파란색 박스로 보이게 끔 배경색을 설정합니다.
font-weight: bold;	제목의 굵기를 굵게 설정합니다.
font-size: 18px;	제목 크기를 18px 로 설정합니다.
color: white;	제목 색상을 흰색으로 설정합니다.
text-align: center;	제목을 가운데 정렬로 설정합니다.

▲ 적용한 CSS 설명

보통 글을 작성하면 <p> 태그로 작성되는데요. p 태그는 display 속성이 inline 으로 고정되는데요. 그래서 우리는 div 태그 혹은 span 태그를 이용해서 작성해야 합니다. 이렇게 단순한 방법이 아닌 약간 난이도 있는 방법을 사용하려고 하면 어떻게 해야 할까요?

▶ CSS를 미리 저장해두자.

매번 본문에 복사하는 방법은 가장 쉬운 방법이면서도 유지보수가 잘 되지 않는 방법 중의 하나입니다. 보통 애드센스를 본문에 복사하는 경우가 많으신데요. 그렇게 되면 광고 유형을 변경하거나 할 때 본문 마다 스크립트를 수정해야 하는 단점이 있습니다. 그래서 메인 HTML/CSS 에 CSS 정보를 저장해두고, 나중에 그 정보만 참조하면 게임 끝이죠...^^

일단 관리페이지의 HTML/CSS 로 들어가서 style.css에 아래 항목으로 작성합니다.

.my_article_rep_title { 
margin: 20px 0; 
padding: 10px; 
background-color: #6699ff; 
font-weight: bold; 
font-size: 18px; 
color: white; 
text-align: center;" 
}

style.css 내용 중에 위 내용을 복사한 후 저장을 합니다. 여기서 .my_article_rep_title은 제가 임의로 만든 CSS 클래스로서 이름은 편하신대로 작성하시면 됩니다.

▶ 본문에 클래스를 지정하자.

<-- 본문 상단에 글 제목 삽입하기 -->
<div class="my_article_rep_title">블로그 본문 제목 작성</div>

CSS 클래스를 저장해두었기 때문에 본문을 작성하실 때는 클래스(my_article_rep_title)만 지정하시면 모든 것이 정상적으로 보이게 되실겁니다. 그리고 만약 폰트 색상, 크기, 배경 색상, 정렬 방식 등을 변경하기 위해서는 메인 CSS 내용에서 해당 스타일만 바꿔주시면, 모든 포스팅된 글 중에서 my_article_rep_title 로 설정된 항목은 스타일이 바뀌는 신세계를 경험하실 수 있을 겁니다... ^^

▶ 현재 글에 적용된 예시

의료실비보험 비교사이트, 에버노블(EVER NOBLE) ☞ [바로가기]

다음에 스크립트를 이용해서 제목만이라도 자동으로 넣어주는 포스팅 작성하도록 할께요...^^

이상, 초매였습니다.