블로그 본문 단락 소제목 꾸미기 CSS style 서식::어나일언덕

블로그를 운영하다 보면 블로그를 꾸미는 것에 대해 신경을 많이 쓰게 됩니다. 아무래도 보기 좋게 꾸며 놓으면 방문하는 사람들이 좀 더 늘어나게 되고 더 오래 머물게 될 요인이 될 수 있기 때문입니다.

그렇다고 블로그를 화려하게 꾸미기만 하는 것 보다는 블로그를 방문한 사람들이 글을 읽기 편하도록 꾸미는 것이 가장 중요합니다. 블로그 글이 편하게 읽히도록 하려면 단락단락을 잘 끊어주고 중요한 내용들은 박스에 담아 강조해 주는 것이 좋습니다. 티스토리에서는 자체적으로 글쓰기에서 글박스나 인용구 등의 서식을 제공하지만 뭔가 아쉬운 건 사실입니다.

블로그 본문 소제목 서식 만들기

아래는 블로그들을 돌아 다녀 보면 흔히 자주 보이는 단락 소제목 박스들입니다.

또 아래는 이 블로그에서 사용하고 있는 소제목 서식과 박스 형식입니다. 보통 블로그를 꾸밀려면 HTML/CSS 등에 대해 최소한 기초적인 것을 알아야 할 수 있지만 여기서는 전혀 몰라도 Ctrl + C, Ctrl + V만 할 줄 알면 가능합니다.

블로그에 글을 쓸 때마다 글의 단락단락 마다 새로 만들고 꾸며야 한다면 안하고 말지 못할 짓입니다. 그래서 티스토리에서는 자주 사용하는 템플릿 또는 문구를 저장해서 필요할 때마다 불러 올 수 있는 서식 글을 만들어서 사용하면 됩니다.

서식 글을 만드는 방법은 아래와 같이 글쓰기에서 서식에 체크 & HTML에 체크를 해줍니다.

그런 다음 아래의 코드를 복사해서 붙여 넣기를 합니다. 복사가 안되면 BLOG_Subtitle_CSS.txt 텍스트 파일을 다운 받아 연다음 내용을 복사해서 붙여 넣기를 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p></p><blockquote class="tx-quote-tistory" style="

background-color : #666; /* 1.배경색 */
margin : 0px 0px 0px 0px; /* 2.상우하좌 순서 여백*/
border-width : 0px 0px 0px 8px; /* 3.상우하좌 순서 테두리 굵기*/
border-color : #000 #000 #000 #eee; /* 4.상우하좌 순서 테두리 색*/
border-style : solid; /* 5.변경 dotted : 점선 solid : 실선 dashed  긴점선 double : 두줄*/
border-radius : 0px 10px 0px 0px; /* 6.좌상 우상 우하 좌하 순서 모퉁이 둥글게*/">
 
<p><span style="color: #fff; font-size: 14pt;">내용</span></p>
</blockquote>
<p><br></p>

BLOG_Subtitle_CSS.txt

이제 원하는 형태로 다듬기만 하면 됩니다. 다듬는 방법은 아래 박스에 설명대로 하면 됩니다.

1. 배경색 : 현재 배경색은 #666(회색)으로 되어 있습니다. 이 666숫자를 색상표를 참고 하여 원하는 색의 숫자로 변경해주면 됩니다.

2. 상우하좌 여백 : 제목 박스의 상우하좌 여백입니다. 현재는 여백이 없는 상태이며 좌우로 여백을 10px로 주고 싶다면 0px 10px 10px 0px 과 같이 바꾸어주면 됩니다.

3. 상우하좌 테두리 굵기 : 제목 박스의 상우좌하 테두리 굵기입니다. 현재는 왼쪽에만 8px 굵기의 테두리가 보이고 나머지는 0px로 테두리가 없습니다. 상하좌우에 원하는 대로 테두리 굵기를 변경하면 됩니다.

4. 상우하좌 테두리 색 : 3과 마찬가지로 제목 박스의 상우좌하 테두리의 색입니다. 현재는 왼쪽에만 #eee(밝은회색)이 설정되어 있습니다. 3번과 조합해서 원하는대로 수정해 줄 수 있습니다.

5. 테두리 형태 : solid를 dotted, dashed, double 등으로 변경해 줄 수 있습니다.

6. 좌상 우상 우하 좌하 순서로 모퉁이를 둥글게 해줄 수가 있습니다. 현재는 우상 부분만 10px로 둥글게 설정되어 있습니다.

마지막으로 아래의 글자색과 사이즈는 여기서 변경할 필요없이 글쓰기 상태에서 직접 변경해 주면 되겠습니다.