제목은 헤더가 아니다

제목은 헤더가 아니지만, 헤더에 제목이 있을 수 있다. 아직 혼란스러운가? 여기에서 배워보자.

제목(heading)은 타이틀(title)처럼 간단하다. HTML에서, H1, H2, H3, and H4과 같은 제목 태그를 사용하여 구조화된다. 일반적으로, 헤딩 번호가 커지면, 글꼴 끄기는 점점 작아진다.

워드프레스에서, H1 제목은 일반적으로 헤더의 블로그 제목 또는 페이지의 마스터 헤드로 예약되어 있다. H2 제목은 일반적으로 글, 댓글, 사이드바의 제목에서 발견된다. 이것들은 div ID를 사용하여, 각각 다르게 스타일링할 수 있다. H3 제목은 보통 댓글에서 발견된다. H2 제목으로 교체될 수도 있지만, 테마에 따라 다르다.

H1 제목

기본으로, H1 제목은 웹페이지 테마의 헤더 안에 있다. 일반적으로 마스터 헤드(masthead)라고 한다. 이것은 종종 bloginfo() 템플릿 태그를 제공한다:

<h1><?php bloginfo('name'); ?></h1>

테마 폴더의 style.css 파일에서 이것의 스타일 정보를 찾을 수 있다. 일반적으로 다음과 같이 표시된다:

h1 {attributes}

또는

#header h1 {attributes}

여기에서 웹페이지 #header 안에 있는 제목의 모양을 변경할 수 있다.

많은 사람들이 헤더를 이미지로 변경하지만, 여전히 접근성 표준과 검색 엔진을 충족시키기 위해 제목을 남겨 놓는다. style.css 헤더(header) 참조 또는 header.php 템플릿 파일 style head 섹션에 에 다음 코드를 추가하여, h1과 description을 적절히 남겨 놓을 수 있다.:

h1 {display: none; font-size: 150%; color: white....}

display:none은 h1 태그 안의 콘텐츠를 표시하지 말라고 브라우저에게 지시한다.

H2 제목

H2 제목은 다양한워드프레스 테마에서 발견된다. 일반적으로 글 제목, 댓글 제목, 사이드바 또는메뉴에서 가장 많이 발견된다. 이 맣은 H2 제목을 스타일링하는 것은 조금 복잡할 수 있다.

다양한 H2 제목에 대해 style.css에서 어떻게 스타일링하는지 살펴보자:

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 110%; color: green; font-weight: bold; }

#comments h2 {font-size: 90%; color: yellow; font-weight: bold;
       padding: 2px; background: green; border: solid 1px navy; } 

#sidebar h2 {font-size: 85%; color: navy; background: transparent;
       font-weight: bold; border-bottom: dashed 2px yellow; }

이 섹션의 각각은 하나의 워드프레스 H2 제목을 제공하고 있지만, 각각은 완전히 다르게 스타일링된다.

기본으로, H2가 표시될 때마다, 첫 번째 예제를 사용하여 보이게 된다. H2 태그 앞에 ID 또는 클래스(Class) 선택자를 사용하여, 보이는 모양(look)을 수정할 수 있다. 그러나, CSS 스타일에, 식별하는ID 또는 클래스(Class) 선택자 밖에, 항상 그러나가 있다. 이것은, 다른 H2 제목에 영향을 미치는, 부모 역할을 한다.

예를 들어, #comments H2의 글꼴 color을 지정하지 않았다면, 그 색상은 부모 H2의 색상인, 초록색(green)이 된다. 변경하려는 속성을 지정하는데 주의하고, 부모 H2는 남겨진 공란을 채울 것임을 기억하자.

CSS 문제해결의 CSS 부모와 자식 관계 코덱스 문서에서 CSS 부모/자식 관계에 대한 더 자세한 내용을 배울 수 있다.

H3과 H4 제목

긴 글을 쓴다면, 제목을 사용하여 섹션을 구분하거나, 주제 변경을 알려주거나, 또는 약간의 예술적인 "공간"이나 그래픽 요소 만을 제공할 수 있다. 글 섹션 제목은 글을 작성할 때 만든다. 일반적으로 h3와 h4 제목 태그가 사용된다. 하지만 때로는 h5가 포함되기도 한다.

테마에 h3와 h4 제목이 포함되어 있을 수도, 또는 포함되어 있지 않을 수도 있다. 일부 테마에서, h3 태그는 댓글에 사용된다. style.css에서 h3를 검색하여 쉽게 확인할 수 있다. 사용하고 있지 않다면, 만들 수 있다. 사용하고 있다면, h4 태그를 사용한다.

이것을 사용하기 위해, 글 작성 시 HTML을 사용하고 있지 않다면, 섹션 제목 주위 태그 앞과 뒤에 수동으로 공란을 두 개 입력한다. 이 방법은, 워드프레스가 글을 생성할 때, 자동으로 문단 태그를 추가한다. 이것은 글 쓰기 화면에서 다음과 같이 보인다:

...uses with WordPress that I enjoy using.

<h4>More Talk About WordPress Features</h4>

We enjoy talking more about the many 
features WordPress has to offer the blogger....

웹 표준에서 h3 태그는 기본적으로 h2 태그 보다 조금 작고, h4 태그 글꼴 크기보다 큰 특징이 있다. style.css 스타일시트에서 글꼴 크기를 다르게 설정할 수 있다. 그러나 여기에 국한되지는 않는다.

글 안의 콘텐츠를 나누면, 더 화려하고 큰 글꼴을 포함할 수 있다. 사이트 외모를 보기 좋게 하기 위해, 이 섹션 구분자에 그래픽과 스타일을 추가할 수 있다. 두 가지 예제를 살펴보자.

첫 번째 예제에서, 제목의 배경으로 나뭇잎 그래픽을 제목의 왼쪽에 보여주고 있다. 패딩을 조정하여, 배경 그래픽을 배치할 공간을 확보하기 위해, 제목을 45px 이동한다. 배경 그래픽을 no-repeat로 설정하여 한 개의 나뭇잎만 볼 수 있다. 이것을 설정하지 않으면 제목이 나뭇잎으로 채워질 것이다.

More Talk About WordPress Features
We enjoy talking more about the many features WordPress has to offer the blogger....

이것에 대한 style.css의 CSS는 다음과 같다:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) left no-repeat; 
padding: 10px 10px 10px 45px}

More Talk About WordPress Features
We enjoy talking more about the many features WordPress has to offer the blogger....

두 번째 예제에서, 나뭇잎 그래픽을 제목 위로 이동하여, 섹션 사이에 떠 있는 것 같이 만들 수 있다. 이것은 섹션 사이에 더 많은 공락을 추가한 것이다. 이것에 대한 style.css CSS는 다음과 같다:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}

제목(heading)은 사이트의 전체 디자인에 많은 것을 추가할 수 있다. 그러므로 상상력을 동원하여, 이것을 즐겨보자.

제목 세부 정보

워드프레스에서, 많은 글 제목에 제목 뿐만 아니라 정보를 포함하고 있다. 많은 제목에 시간, 일자, 저자, 글이 속한 카테고리 정보를 포함하고 있다. 제목에 포함하거나 제외할 요소를 선택할 수 있다.

다음은 전체 정보를 포함한 글 제목 예제이다.

<h2>
<a href="<?php the_permalink() ?>" 
     rel="bookmark" title="Permanent Link to 
     <?php the_title(); ?>">
     <?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time('F jS, Y') ?> 
by <?php the_author() ?>
in <?php the_category(', ') ?></small>

이것은 h2 제목 태그로 시작하고, 글 제목에 대한 링크를 포함하고 있다. 다음 섹션에서 <small> 태그를 사용하여, the time, author와 categories 템플릿 태그를 제어하고 있다. 이것은 다음과 같이 보일 것이다:

저자 태그를 the_author_posts_link()로 변경하거나, 또는 글 제목 정보에 time과 같은 정보를 추가할 수 있다. 또는 이 태그들을 제거한다. Post Meta Data Section 사용자 정의 문서에서 포스트 메타 데이터 섹션에 대해 더 자세히 배울 수 있다.

제목 디자인

이제 워드프레스 테마에서 기본적인 제목을 찾을 수 있는 위치를 알았다. 이제 자신의 테마를 디자인하거나 또는 수정해 보면서 즐길 시간이다. 제목을 디자인하는 방법은 다양하다. 글꼴 크기, 색상, 글꼴을 변경하거나, 또는 그래픽과 재미있는 배경을 추가할 수 있다. 상상력을 동원해라!

제목 디자인 도움이 되는 자료이다.

• Rubber Headers
• Using Background-Image to Replace Text
• Desilva's Headings Side by Side
• Making Headlines with Cascading Style Sheets
• HTMLDog's Headings
• About.com's Web Design: HTML and Headings (Technical Specifications)
• CSS Design Experiments
• Optimize Your Page Headings