가독성 있는 제목 서식 추천

티스토리 블로그의 장점 중 하나는 바로 HTML 편집을 통해 블로그의 모양 자체를 자유롭게 바꿀 수 있는 것입니다. 워드프레스만큼 자유도가 높은 것은 아니지만, 국내 다른 어떤 블로그 서비스와 비교해서 티스토리만이 가질 수 있는 장점이라고 할 수 있습니다.

 

우리가 글을 쓰다보면 제목을 많이 활용합니다. 티스토리에서 제목1을 설정하면 HTML에서는 H2 태그로 들어가죠. 이 부분을 헷갈리는 분들이 있는데, 제목1보다 더 중요한게 뭔가요? 바로 포스트 제목이죠? 그래서 H1 태그는 포스트 제목에 양보해야 하는 겁니다.

 

제목 서식 추천

가독성 좋은 글을 쓰기 위해서는 약간의 서식을 잘 활용하는 것이 좋습니다. 그냥 흰 바탕에 검정색으로 제목이 조금 굵은 폰트로 표시가 되는 것보다는 색이 들어간 배경에 글자만 다른 색으로 튀게 제목을 만들어 두면 본문 내용을 볼 때 제목과 내용이 확실하게 구분이 되어 가독성이 좋아집니다.

 

또한 이런 방식으로의 본문 작성은 광고에 대한 대비도 확실하게 좋아지므로, 전체적으로 블로그 품질이 올라가는 것처럼 보여지죠.

 

아래는 블러처리가 되어 있기는 하지만, 색이 들어간 부분에 제목이 들어가 있습니다. 위와 아래의 본문 내용과 제목이 확연히 분리가 되지요?

 

이렇게 만들기 위해서는 2가지 방법이 있습니다. 하나는 적당히 잘 만든 서식을 하나 만들어서 '서식'으로 저장해 놓고 글을 쓸 때마다 끌어오는 방법이 있고, 다른 하나는 CSS 편집을 미리 해서 제목 태그만 사용하면 자동으로 서식이 붙도록 하는 방식이 있습니다.

 

둘 다 사용자 관점에서는 차이나게 보이는 것은 아니지만, 글을 쓰는 입장에서는 편의성이 크게 차이가 납니다.

 

제목 서식 넣기

제목 서식을 넣기 위해서는 블로그 관리 - 꾸미기 - 스킨편집 - HTML 편집 - CSS 수정으로 가야 합니다.

 

 

항상 두근거리게 만드는 HTML편집이죠. 이런 편집을 할 때 내가 실수하면 어떡하나 하는 분들이 있는데, 여기서 나오는 코드들은 메모장에 붙여 넣으면 그대로 잘 붙기 때문에 메모장을 잘 이용하시면 됩니다.

 

원본을 먼저 다 복사해서 메모장에 붙이고, 수정을 통해서 작업을 하면서 미리보기 등을 통해서 잘 적용되는지 살펴보는 것이죠.

 

 

CSS편집 모드입니다. 제가 예시로 가져온 티스토리 스킨은 '포스터' 스킨입니다. 깔끔한 디자인이어서 사용하기 좋죠. 사이드바가 없어서 본문에 집중하기 좋은 구조입니다.

 

어차피 사이드바는 모바일에서는 보여지지 않으므로 그냥 없는 스킨을 써서 PC나 모바일이나 같은 화면을 보여주는 것도 나쁘지는 않습니다.

 

여기서 찾아야 할 것은 entry content 입니다. 찾는 방법은 우선 편집창을 한 번 아무데나 클릭한 후에 ctrl + F를 눌러야 합니다. 그렇지 않으면 웹브라우저의 검색이 열리는데, 그럼 찾기가 어렵습니다.

 

 

노란색 검색창이 떠야 제대로 찾는 것입니다.

 

쭉 찾아 내려가면 아래에 .entry-content h2 { 라고 쓰인 곳이 발견됩니다. 

 

이 곳을 아래와 같은 코드로 바꿉니다.

 

.entry-content h2 {
	margin: 60px 0 19px;
	font-size: 1.5em;
	padding: 15px 15px 15px;
	background-color:#107896;
	color:#fff;
}

 

여기서 알아두어야 할 것은 크게 없습니다. 마진과 폰트 사이즈는 기본적으로 값이 다 들어가 있습니다. 따로 바꿀 것은 없구요. 그 아래에 패딩값과 배경 색상, 폰트 색상만 선택하면 됩니다.

 

흰색은 #fff이고 검정색은 #000 입니다. 그 외의 색 선택은 color picker를 이용해서 HEX 코드 값을 가져오면 됩니다. 구글에서 hex code로 검색하면 바로 찾을 수 있습니다.

 

color라고 된 것은 폰트 컬러입니다. 배경이 어두우면 폰트는 흰색으로, 반대로 배경이 밝으면 폰트는 어두운 색으로 해야겠지요?

 

이렇게 바꾸면 본문과는 확연히 구분이 되는 제목이 생성됩니다. 본문 글을 쓸 때 그냥 제목1, 제목2, 제목3만 사용하면 적절하게 제목 양식이 바뀌게 된답니다.

 

가독성이 좋은 본문을 적으면 블로그를 보는 사람들이 글을 읽기 더 좋아지게 됩니다. 그래야 체류시간도 늘겠지요?

 

이상으로 가독성 좋은 본문 제목 서식 만드는 방법에 대한 정리를 마칩니다. 모두 즐겁게 블로그를 할 수 있기를 바랍니다.