k2man story

블로그에 포스팅을 하면서 <H>태그를 활용하는 분들이 생각만큼 많은 것 같지는 않습니다. 이미 사용하고 계시는 분들도 많겠지만, 간단히 소개해 올리겠습니다. ^^

제 블로그에 보시면 소제목들이 계층적으로 일괄적인 크기와 색을 유지하고 있습니다. 또 어떤 블로그에는 소제목마다 박스가 쳐져서 글을 읽을 때 가독성을 높여주기도 합니다.

이 외에도 H태그를 이용하면 몇 가지 중요한 이득을 얻을 수 있습니다. 정리하자면..

첫 번째는 일관성 있는 구조의 글 작성이 가능하고,
두 번째는 스킨에 맞게 소제목 모양을 일괄적으로 변경할 수 있으며,
세 번째는 검색 노출의 기회가 높아진다는 것입니다.

더구나 이렇게 했을 때는 나중에 스킨을 바꾸거나 제목 모양을 일괄적으로 변경하고자 할 경우, css편집만으로 일괄적으로 변경할 수 있기 때문에 매우 편리합니다.

 

글을 쓸때는 어떻게 해야 하나?

아쉽게도 티스토리 편집기에서는 H태그 활용이 불편한 구조로 되어 있지만, Window Live Writer 등을 활용하면 간편하게 사용하실 수 있습니다.

대부분의 웹에디터를 사용하면서 아래 그림과 같은 메뉴를 자주 보셨을 겁니다. 기본적으로는 ‘단락’으로 되어 있는데, 자신이 설정한 소제목을 ‘제목1’ 부터 ‘제목6’까지 적절히 해주는 것이지요.

‘제목1’부터 ‘제목6’, 각각은 <H1>태그부터 <H6>태그가 적용되므로 소스를 열지 않고도 적용할 수 있습니다. (티스토리는 이게 없어서 불편합니다. 제가 Live Writer만으로 포스팅하는 중요한 이유이기도 합니다.)

 

<H1>부터 <H6>중 어느 것을 사용할까?

대부분의 스킨에서는 <H1>태그는 블로그의 제목, <H2>태그는 각 포스팅의 제목에 지정되는 경우가 많습니다. 만약 이렇게 되어 있지 않다면 변경하는 것이 좋습니다. (다른 검색엔진도 비슷할 거라고 보이는데, 일단 구글 검색엔진의 경우 H1과 H2태그 등 크기가 큰 태그의 키워드를 중요하게 검색한다고 알려져 있습니다.)

티스토리 스킨의 경우, 블로그 제목은 다음과 같은 형태입니다.

<h1 class="title"> <a href="[##_blog_link_##]">[##_title_##] </a> </h1>

또, 각 포스팅의 제목은 다음과 같은 형태죠.

<h2 class="title"> <a href="[##_article_rep_link_##]"> [##_article_rep_title_##] </a> </h2>

만약 위와 같은 형태가 아니라면 h1과 h2로 변경을 고려하는 것도 좋습니다.

<H3>부터 사용하자

<H1>과 <H2>는 스킨에서 사용하고 있으니, <H3>부터는 본문 내 소제목으로 사용하면 될 겁니다. 그러니까 ‘제목3’ 부터 ‘제목6’까지를 사용하면 되겠군요.

 

H태그에 모양 적용하기

CSS파일을 편집해야 하는데, 그리 어려운 작업은 아닙니다. 제가 사용하는 티스토리 블로그의 스킨의 CSS에는 다음 항목이 있습니다.

ul, ol {margin:0;padding:0;list-style:none;}
li, dl, dt, dd {margin:0;padding:0;}
h1, h2, h3, h4 {margin:0;padding:0;font-size:x-large;line-height:1em;}

여기서 수정해야 할 부분이 빨간색으로 표시한 부분입니다.

이 부분에서 h1과 h2를 제외하고는 지워 버립니다.

h1, h2 {margin:0;padding:0;font-size:x-large;line-height:1em;}

그리고 h3부터 h6까지를 새로 지정하는 것이죠.

제 현재 블로그는 이렇게 사용하고 있습니다. 아래 내용을 방금 수정한 부분 아랫부분에 추가하면 됩니다.

h3 { font-size: 1.3em; color: #e56b60; }
h4 { font-size: 1.2em; color: #448811; }
h5 { font-size: 1.1em; color: #445bC1; }
h6 { font-size: 1.0em; }

이런 형식으로 해주고 font-size와 color를 자신의 스킨과 잘 어울리도록 수정만 해주면 됩니다.

CSS를 좀더 찾아 보셔서 사각형을 두른다거나, 앞에 블릿이미지를 삽입해서 좀 더 가독성을 높일 수도 있을 것입니다.

나중에 제목의 모양을 바꾸고자 할 경우에는 이 CSS부분만 편집해 주면 됩니다.

 

검색엔진이 우선순위를 높일 수 있도록 첫 소제목은 <H3>태그부터 사용하는 것이 좋습니다.

그리고 개인적인 취향입니다만, 저는 엔터를 쳤을 때 <br>태그 보다는 <p>태그를 사용하는 것이 좀 더 일관성 있고, 보기 좋은 블로그를 만들 수 있다고 생각합니다. 이 부분은 다음에 정리해 보겠습니다.