2007-10-02, 염기웅(carl@jnccompany.com.jnc)

<참고> 상기한 저자 이메일의 .jnc는 스팸 방지용입니다.

1. 개요

본 문서는 태터툴즈(티스토리)를 사용하는 사람들이 글을 등록할 때 글 본문에서도 <h1> ~ <h6> 태그를 이용하여 검색엔진에 보다 효과적으로 글이 노출될 수 있도록 하기 위해 작성된 문서이다.

태터툴즈는 XHTML 규약을 비롯한 웹 표준을 준수하고 있는 도구로써, 특별한 설정이 없더라도 글 제목 등은 <h2> 태그 등을 이용하여 정의된다. 하지만 내장된 태터툴즈 편집기를 이용하여 글을 작성 할 때, 글 내부의 소제목들은 시각적으로 소제목처럼 표시할 수 있지만, 구조적 의미의 마크업은 불가능한 문제가 있다.

태터툴즈의 CSS 파일을 적절히 수정하고, 글을 작성할 때 약간의 수고만 더한다면, 본 문서와 마찬가지로 글 내부의 소제목들을 시각적으로 그리고 구조적으로 마크업이 가능하다.

2. CSS 파일의 수정

2.1. 추가해야 할 스타일 파일

현재 JnC 웹사이트를 위한 태터툴즈용 스타일 파일의 변경된 내용은 다음과 같다.

/* JnC에 특화된 <h1> ~ <h6> 태그 활용을 위한 스타일 시작 */
    /* 공통 스타일 지정 */
    .jnc_heading
    {

/* JnC에 특화된 <H1> ~ <H6> 태그 활용을 위한 스타일 시작 */
    /* 공통 스타일 지정 */
    .jnc_heading
    {
        color: #1F487C;
         margin: 1.2em 0em 0.8em 0em;
    }

    /* <Hn> 형식의 스타일 지정 */
    h3.jnc_heading
    {
        font: normal normal bold 2em Batang, Verdana, AppleGothic, Sans-serif;
    }

    h4.jnc_heading
    {
        font: italic normal bold 1.7em "malgun gothic", Verdana, AppleGothic, Sans-serif;
    }

    h5.jnc_heading
    {
        font: normal normal bold 1.4em "malgun gothic", Verdana, AppleGothic, Sans-serif;
    }

    h6.jnc_heading
    {
        font: italic normal bold 1.1em "malgun gothic", Verdana, AppleGothic, Sans-serif;
    }
/* JnC에 특화된 <H1> ~ <H6> 태그 활용을 위한 스타일 종료 */ 

Heading Tag을 이용하기 위한 클래스 선언자로 'jnc_heading'을 이용하였다.

2.2. 공통 스타일 지정

2.2.1. 기본 설명

'/* 공통 스타일 지정 */' 영역에서는 'jnc_heading'에 관련한 공통적인 스타일을 지정하였다. 여기에서는 소제목의 색상과 소제목 윗부분, 아랫부분의 너비를 공통적으로 선언하였다.

2.2.2. 여백 크기 설정

소제목의 윗부분과 아랫부분의 여백을 'em'을 이용하여 상대적 크기로 지정한 것에 유의하기 바란다. 상대적 크기를 지정하면, 스타일시트가 변경되더라도 전제적으로 조화롭게 소제목 위 아래부분의 여백이 설정되므로 보다 유연한 디자인이 가능해지는 이점이 있다.

2.3. <h1>~<h6> 형식의 스타일 지정

2.3.1. 왜 <h3> 태그부터 시작하는가?

다음으로 각각의 Heading Tag에 대해 특화된 설정을 한다. 그런데 여기에서 예를 든 것은 <h3> 태그부터 시작하는 것에 의아함을 품은 사람도 있을 것이다.

태터툴즈에서는 <h1> 태그를 블로그 제목을 표시하는 태그로 이미 이용하고 있으며, <h2> 태그는 문서 제목을 표시하는 태그로 이미 이용하고 있다. (물론 이러한 것은 태터툴즈 스킨마다 달라질 수 있다.)

이러한 상황에서 <h1> 태그를 소제목의 첫번째 제목으로 활용하는 것은 상대적으로 문서 제목보다 소제목을 더 우선시하는 상황을 발생시킨다. 따라서 첫번째 소제목은 <h3> 태그를 이용하는 것이 구조적으로 옳다 하겠다.

2.3.2. 스타일 지정

조금 헷갈리겠지만, 첫번째 소제목은 <h3>라는 것을 명심하기 바란다. 본 예제에서는, 첫번째 소제목으로 22point의 진한 '바탕'을, 두번째 소제목으로 20point의 진한 '맑은 고딕'을, 세번째 소제목으로 18point의 진한 '돋움'을, 네번째 소제목으로 14point의 진한 '맑은 고딕'을 이용하였다.

3. 글 작성시 <h3> ~ <h6> 태그 적용하기

이제 실제로 태터툴즈를 이용하여 글을 작성할 때 적절한 마크업을 지정하는 일만 남았다. 본 절의 제목인 '3. 글 작성시 <h3> ~ <h6> 태그 활용하기'를 적절히 마크업한 것은 다음과 같다.

<h3 class="jnc_heading">3. 글 작성시 &lt;h3&gt; ~ &lt;h6&gt; 태그 적용하기</h3>

CSS 파일에서 <h3>, <h4> 태그에 별도의 클래스를 정의하지 않고, 'h3.jnc_heading' 과 유사한 스타일을 이용함으로써 마크업 시점에서는 <h3>, <h4>  태그와 관계없이 단순히 'jnc_heading' 이라는 마크업만 붙이면 된다.

즉, <h3> ~ <h6> 태그 중 어떤 단계의 태그를 이용하더라도 마크업 시점에서는 'jnc_heading' 이라는 클래스 선택자만 잊지 않고 표시해 주면 된다.

실제로 태그를 편집하기 위해서는 태터툴즈 편집기의 도구모음 우측 상단의 'EDIT' 버튼을 클릭하여 html 편집 모드로 전환한 후, 소제목의 앞뒤에 클래스를 지정한 <Hn> 형식의 태그를 지정하면 된다.

4. 보다 편한 태그 적용을 위한 탬플릿

'3' 절에서 설명한 방법으로 html 을 직접 편집하는 것은 꽤나 번거로운 일이 될 것이다. 보다 편한 태그 적용 방법을 소개하고자 한다.

필자가 만들어 놓은 다음 탬플릿을 복사하여 태터툴즈 편집기 창에 붙여넣으면 태그가 적용된 글이 태터툴즈 편집기에 표시된다. 그 다음 문서 구조에 맞추어 글을 작성하는 방법도 편리한 방법이라고 생각된다.

물론, 이 탬플릿은 'jnc_heading' 태그를 이용하였으므로, 만약 여러분만의 CSS를 적용하기 위해서는 본 탬플릿의 소스코드를 복사하여 여러분만의 탬플릿을 만들어 놓는 것도 좋은 방법이 될 것이다.

* 탬플릿 예제

1. 탬플릿 1-0-0-0

1.1. 탬플릿 1-1-0-0

1.1.1. 탬플릿 1-1-1-0

1.1.1.1. 탬플릿 1-1-1-1

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.