ko:Designing Headers
Languages: English • 中文(简体) • Русский • 한국어 • (Add your language)
Contents
책은 표지로 판단할 수 없다고 하지만, 사람들은 매일 표지로 판단하고 있다. 책을 들고, 표지를 살펴보고, 표지 때문에 내려 놓거나, 열어 본다. 웹사이트도 표지와 헤더에서 느끼는 첫 인상으로 판단된다.
사이트의 헤더는 사람들이 처음 보게 되는 것이다. 페이지 상단에 있는 이 마스터 헤드 또는 헤더 아트(header art)를 보고, 사람들은 보게 될 것과 읽을 것에 대해 전면적인 판단을 하게 된다. '표지로 책을 판단하지 말라'고 말하는 사람이, '30초 만에 좋은 인상을 만들어야 한다'고 말하기도 한다. 인터넷 세상에서, 다음 페이지는 클릭만 하면 된다. 여러분은 그것보다 훨씬 적다.
워드프레스 헤더 구조를 살펴보고, 자신의 책 표지가 되도록 사용자 정의하여, 사이트에 대해 좋은 첫 인상을 주는 방법에 대한 팁을 제공한다. 그리고 무엇이 좋은 웹사이트 헤더를 만드는 지에 대한 전문가의 팀을 제공한다.
워드프레스 헤더
기본적으로, 워드프레스 헤더는 간단한 코드 조각이다. 어떤 테마를 선택하든지, 헤더를 변경하기 위해 코드를 변경할 필요가 없다. 관리 화면 > 설정 > 일반 화면에서 블로그 또는 웹사이트 제목과 설명을 설정하면, 나머지는 워드프레스가 한다.
가장 간단한 형태로, 워드프레스 클래식(Classic) 테마는 wp-content/themes/classic/header.php 템플릿 파일에 아래와 같은 헤더 코드를 제공한다:
<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>
헤더는 h1 HTML 태그로 설정되고, 2개의 옵션 또는 매개 변수와 함께 사용된다. bloginfo() 문서에서 이 매개 변수에 대해 더 자세히 배울 수 있다. 기본적으로, 첫 번째 것은 링크에 있는 웹사이트의 URL을 표시하고, 두 번째 것은 관리 화면 > 설정 > General 화면에 설정된 블로그 또는 웹사이트의 이름을 표시한다. 사용자가 헤더 제목으로 마우스를 이동하여 헤더를 클릭하면, 관리 화면 > 설정 > General 화면에서 설정한 사이트 메인 페이지 또는 전면 페이지로 이동된다.
워드프레스 기본 테마는 배경 이미지를 갖추고 있으며, wp-content/themes/default/header.php에 아래와 같은 헤더를 표시하고 있다:
<div id="header">
<div id="headerimg">
<h1>
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</div>
다시 말하면, 블로그 또는 웹사이트의 이름을 제공하는 템플릿 태그는 링크에 있지만, 이것은 위의 URL 요청과 비슷한 또 다른 사용법을 보여주고 있다. 다른 방법으로, 같은 정보를 가져온다. 관리 화면 > 설정 > General 화면에서 사이트의 설명(description)을 추가할 수도 있다.
기본적으로, 이 2개의 헤더 예제는 다른 방법으로 같은 일을 한다. 이것들은 헤더에 이미지를 추가할 수 있는, 정보를 제공하고, 헤더 제목을 클릭하여 사이트 탐색을 할 수 있다. 단순히 헤더에 표시할 정보의 양과 표시 방법의 문제이다.
클래식 테마의 첫 번째 예제는, 배경으로 하나의 이미지를 사용되고, 스타일시트의 h1 선택자를 사용하여 설정한다. 그러나 두 번째 예제는 자신의 division을 설정하여, 헤더 이미지를 더 많이 제어할 수 있다. 어떻게 이런 모습(look)을 스타일시트로 완전하게 제어할 수 있을까?
헤더 스타일링
위의 2개 예제에서 나열하였듯이, 헤더 스타일은 h1, header, headerimg, description CSS 선택자에 포함된다. 이것들은 style.css에 있지만, 사용 중인 테마의 header.php의 스타일에서 있을 수도 있다. 2개의 파일을 확인해야 한다.
클래식 테마에서, 헤더의 CSS는 하나의 선택자, #header, 에서 찾을 수 있다.
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
배경색은 초록색조로, 테두리는 오목한 그림자 효과로 만들면서 색상이 변경되어 설정되어 있다. 문자 간격이 일반 문자 간격 보다 230% 넓은 가로 크기로 Times 글꼴이 설정되어 있다. 왼쪽 패딩을 사용하여 텍스트를 왼쪽에서 들여쓰기하고 있다.
이것은 쉽게 변경할 수 있다. 테두리를 더 두껍게 만들고, 같은 색을 적용하고, 배경색, 글꼴 크기와 스타일, 문자 간격을 변경할 수 있고, 각 스타일 속성에 있는 정보를 더 수정할 수도 있다.
기본 워드프레스 테마와 동일하지만, 고려해야 할 스타일이 더 있다. 이것은 header.php의 "head" 태그 와 style.css에서 찾을 수 있다. 하지만 스타일을 한 번 설정하면, 이 정보를 스타일시트로 이동할 수 있다.
헤더의 모습을 제어하는 스타일은 h1, header, headerimg, description CSS 선택자에서 찾을 수 있다. 클래식 테마처럼, 모습을 변경하려면, 이 참조를 찾아서 수정하면 된다.
워드프레스 기본 테마의 헤더 이미지 변경은 Kubrickr라는 유틸리티를 도입하여 쉬워졌다. 이것은 단순하게 헤더에 사용할 새 이미지 파일 이름을 물어보고, 이미지를 변경한다. 그러므로, 코드를 알 필요가 없다. 헤더 이미지만 변경하려면, 이것은 매우 유용하고 쉬운 도구이다.
코드를 수정하려면, 헤더 스타일을 살펴보고, 수정한다. 아래 내용은 헤더 이미지만을 수동으로 변경하는 것에 대한 자습서이다.
헤더 이미지 변경
헤더 이미지를 변경하기 위해 사용할 수 있는 다양한 헤더 이미지와 헤더 아트(art)가 있다. 기본 테마 또는 Kubrick 테마와 이 테마를 기초로 한 모든 테마의 헤더 이미지 스타일은 클래식(Classic) 테마의 헤더 이미지보다 변경하기가 좀 더 복잡하다. 스타일은 header.php "head" 섹션의 스타일 안에서 뿐만 아니라 styles.css에서도 발견된다. 헤더 이미지 참조만 변경하려면, header.php 템플릿 파일을 열고, 아래와 같은 스타일 링크를 찾아본다:
#header {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg")
no-repeat bottom center; }
#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px; }
이미지 파일을 변경하기 위해서는, "kubrickheader.jpg"를 사이트에 업로드한 새 그래픽 이미지 이름으로 변경한다. 다른 디렉터리에 있다면, bloginfo() 태그를 그래픽이 있는 특정 주소로 대체하여 변경한다.
같은 크기의 이미지를 사용하는 경우, 단순히 이미지를 교체한다. 크기가 다르다면, 다음의 #headerimg라는 섹션에서. 이미지의 가로 너비와 높이를 입력한다. 크기를 모르고, 윈도우를 사용하고 있다면, 컴퓨터에서 이미지가 있는 폴더로 이동한다. 이미지 파일명에 마우스를 올려 놓으면, 파일 크기 및 치수를 볼 수 있는 팝업 창이 표시된다. 스타일에서 이 정보를 사용한다. 그렇지 않으면, 이미지 파일을 클릭하여 정보 보기를 선택하면, 파일 크기와 치수를 볼 수 있을 것이다.
템플릿 파일을 저장하고, 웹사이트에 업로드한다. 변경을 했지만, 아무 일도 발생하지 않았다 문서를 읽어본다. 변경 내용은 위치와 모습을 약간 조정할 필요가 있을 수도 있다.
헤더 이미지가 제자리에 있으면, 헤더의 나머지 부분을 알아봐야 한다. style.css 스타일시트 파일을 열고 다음을 찾아 본다:
- h1
- header
- headerimg
- description
테마에 이것들이 모두 있을 수도 또는 없을 수도 있다. 그러나 기본 테마는 스타일시트의 다른 위치에 이것들이 모두 있다. 헤더의 모습을 변경하려면, 이것들 모두 또는 일부의 속성을 변경해야 한다.
헤더 이미지 또는 헤더 아트의 크기를 변경하면, 변경된 헤더 크기를 수용할 content와 sidebar 같은 CSS 구조 선택자를 변경해야 한다.
헤더 이미지 지정
기본 워드프레스 테마 안에서 어울리는 헤더 이미지는 약 192 x 740 픽셀이다. 어떤 워드프레스 테마에서 헤더를 변경한다면, 헤더 이미지 크기를 체크하고, 그 크기와 어울리는 이미지를 찾는다. 원래 이미지 크기보다 작거나, 가로 폭이 크거나, 높이가 큰 이미지를 선택하면, 헤더의 크기가 변할 수 있도록, 웹페이지의 다른 구조 요소를 수정해야 할 수도 있다.
전체 사이트의 테마를 수정한다면, 전체 페이지 또는 콘텐츠 영역의 가로 폭은 헤더 이미지 크기를 고려해야 한다. 가장 일반적인 2가지 화면 크기는 1024x768과 800x600 픽셀이다. 그러나, 와이드 스크린 모니터가 늘어나고 있어, 웹 디지이너는 1280x1024과 1600x1200의 화면 폭에 대해 준비해야 한다.
웹사이트를, 양쪽에 공간을 남겨 놓고 브라우저 창의 중간에 배치하는, "float"로 설정한다면, 헤더를 원하는 폭으로 설정할 수 있다. 테마를 유연한 또는 "탄력적(elastic)" 화면 폭으로 디자인한다면, 헤더 폭이 중요하게 된다.
반복(repeat)되는 헤더 이미지를 사용한다면, 탄력적(elastic )인 폭을 사용하고 있는 것이다. 공간을 채우기 위해, 헤더 안의 스타일을 repeat로 설정할 수 있다:
#header {
background: url("/images/kubrickheader.jpg")
repeat-x top left; }
이것은 헤더 이미지가 왼쪽 위 모서리에서 시작하여 수평으로 반복되도록 설정한다. 이것을 조정하여, 헤더 디자인과 레이아웃에 필요한 배경 위치를 조정할 수 있다.
헤더 아트(Header Art)
웹 디자인 분야에서 많이 사용하는 새로운 용어는 헤더 아트이다. 색상의 조합, 심볼, 이미지 및 텍스트를 사용하여 수동으로 만든 헤더 이미지이다. 만드는데 시간과 노동이 필요하다. 일부 무료 헤더 아트 사이트가 있는 반면, 일부 사이트에서는 손수 만든 헤더 아트를 판매하고 있다. 사진은 나름대로 고유해야 하고, 필요한 비주얼 스타일을 전달해야 하지만, 손수 만든 헤더 아트는 다른 웹페이지 색상과 조화를 이루기 쉽고, 독특성 때문에 미학적으로 더 많은 기쁨을 준다.
미리 제작된 헤더 아트를 선택하면 몇 가지 이점이 있다. 작가는 작업을 미리 하고, 웹사이트에 가장 잘 어울리는 디자인을 선택하기만 하면 된다. 그리고 그래픽을 사용할 준비가 되어 있다. 크기가 정해져 있고, 파일 크기는 작게 저장된다.
Digital Westex's WordPress Header Art에 다양한 크기의 헤더 아트 제공하고 있으며, 특히 워드프레스에 무료로 다운로드할 수 있다.
헤더 아트 저작권
자신이 만들기를 원하지 않는다면, 사용할 최고의 헤더 아트는 특히 공개적으로 사용할 수 있는 저작물 사용 허가 표시(Creative Commons License)를 부여한 헤더아트이다. 이미지 사용에 대한 개별 라이센스를 읽어 보고, 사이트 헤더로 사용할 수 있는 지를 확인해야 한다. 보통 원저작자 표시를 해야 하고, 비슷한 조건으로 공유하고, 상업적 목적으로 사용해서는 안된다. 의심스러우면, 사용하기 전에 항상 원저작자의 허가를 받아야 한다.
헤더 아트는 디자이너/작가가 만들어진 "그대로" 허가(licensed)하였으므로, 일부 헤더 아트는 작가의 허가 없이 수정할 수 없다. 웹사이트의 저작권과 라이센스를 확인하고, 작품을 수정하고자 하는 경우, 의심스러우면, 질의한다.
자신의 헤더 아트 디자인
자신의 헤더 아트를 디자인할 수도 있다. 모든 그래픽 디자인 소프트웨어 프로그램을 사용할 수 있다. 어도비 포토샵(Adobe Photoshop), 어더비 요소(Adobe Elements), JASC PaintShop Pro, The Gimp 및 Macromedia Fireworks가 인기 있는 프로그램이다. 그래픽 디자인 소프트웨어는 크기를 조정하고, 저장할 때 이미지의 해상도와 형식을 제어할 수 있는 기능이 있어야 한다. 헤더 아트의 크기는 삽입할 헤더 컨테이너의 크기와 같아야 한다.
자신의 사진, 그림, 글꼴, 및 이미지 조합을 헤더 아트로 사용할 수 있다. 완성되면, "웹에" jpg, gif, or .png 파일로 저장한다. Sitepoint's GIF-JPG-PNG What's the Difference 문서를 참조한다. 이 파일들은 이미지 해상도를 압축하고 , 파일 크기를 줄인다. 일반적으로 50K보다 큰 파일은 피한다. 큰 파일은 사이트 액세스 시간을 느리게 하는 경향이 있다.
헤더 텍스트 숨기기
많은 테마와 테마 디자이너는 헤더에 텍스트가 없는 사진을 표시하고자 한다. 일부는 텍스트를 그래픽 이미지로 넣는다. 그러므로 텍스트를 실제로 사용하지 않는다. 첫 번째 방법은 제목과 설명을 만드는 템플릭 태그를 제거하는 방법이다. 다른 방법은 이 태그는 그대로 두고, 감추는 방법이다.
코드에 그대로 둔 상태에서 헤더 텍스트를 감추는 방법은, 템플릿 파일은 손대지 않는다. CSS 만을 변경한다. 표시하지 않을 CSS 선택자에 display:none을 추가한다. 예를 들어, h1 선택자 안의 텍스트를 숨기려면:
h1 {display:none; font-size: 230%; color: blue;.......
그대로 있지만, 브라우저는 어떤 방식으로 그것을 표시하지 말라고 명령했다. 그 컨테이너는 실제로 "표시되지 않는다."
숨겨질 것이지만, 일부 웹페이지 스크린 리더와 검색 엔진은 여전히 이 정보를 찾을 수 있다. 진지하게 사이트에 접근할 수 있게 하려면, 일부 새로운 텍스트 리더로 스타일시트에 접근하여, display:none으로 표시한 요소를 읽지 않는다. 이 작업을 수행하는 인기 있는 2가지 방법이 있다. 첫 번째는 위에 언급한 바와 같이display:none을 사용하지만, 해당 선택자를 display:block으로 변경하여 "가시성을 다시 켜 놓는" 청각 스타일시트를 포함하는 방법이다. 다른 방법은 들여쓰기를 음수로 설정하여, 콘텐츠가 실제로 "페이지에서 보이지 않게 하는" 방법이다. 다음은 그 예이다:
h1 {
font-size: 0;
text-indent: -1000px; }
이 기법은 전체 h1 태그를 이동하여, 이 콘텐츠가 실제로 웹페이지에 표시되지 않게 한다. 스크린리더는, 이 텍스트가 그대로 있지만, 페이지에 표시되지 않기 때문에, 텍스트를 여전히 "읽을 것이다." 광범위한 실험을 통해, 이 기법은 대부분의 브라우저와 모든 스크리더에서 작동되는 것으로 입증되었다.
기법과 청각 스타일시트에 대한 더 자세한 정보 는 다음을 참조한다:
- What do Screen Readers really say? (Accessibility and display:none)
- Testing Screen Readers and display:none
- Facts and Opinion About Fahrner Image Replacement
- Hiding Text But Not From Screen Readers
- W3's Aural Style Sheets
- About Web Design's Aural Style Sheets
- ACSS: Aural Style Sheets
- Richinstyles Guide to Aural Style Sheets
헤더 전체를 클릭하기
전체 헤더(그래픽과 모든 내용)를 클릭할 수 있게 하려면, 링크 안에 헤더 그래픽을 넣어야 한다. 2가지 방법이 있다. 워드프레스 테마에 그래픽을 직접 넣거나, 스타일시트를 사용하여 링크 사이즈 영역에 헤더 아트 영역을 포함한다.
헤더에 링크를 포함하여 헤더 아트를 클릭할 수 있게 하려면, 워드프레스 테마의 wp-content/themes/classic/header.php 템플릿 파일에서, 다음을:
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>/">
<?php bloginfo('name'); ?></a>
</h1>
</div>
이 코드로 변경한다:
<div id="header">
<a href="<?php bloginfo('url'); ?>">
<img src="http://example.com/headerimage.jpg" alt="<?php bloginfo('name'); ?>" />
</a>
<h1><a href="<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
글 제목 h1을 스타일링하여 겹치게 하거나, 아래로 배치하거나, 또는 헤더에 보이지 않게 할 수 있다.
헤더 전체 영역을 클릭할 수 있게 하려면, 배경에 있는 헤더 이미지를 클릭할 수 있는 영역에 포함하기 위해, h1 anchor HTML 태그에 가로 폭 영역을 설정해야 한다. 이 스타일은 스타일시트에 설정된다.
HTML과 워드프레스 템플릿 태그는 아래와 같다, 위와 같다:
<pre><div id="header">
<h1><a href="<?php bloginfo('url'); ?>/">
<?php bloginfo('name'); ?></a>
</h1>
</div>
CSS는 클릭할 수 있는 링크 영역을 확장하고, 헤더 텍스트를 감추기(선택적 옵션) 위해 아래와 같이 스타일링할 수 있고, 자신의 디자인 요구에 맞게 사용자 정의할 수 있다.
#header h1 a {
width: 400px;
height: 100px;
display: block;
background: url(images/headerimage.gif) no-repeat top left;
}
#header h1 a span { display: none; }
다른 옵션은 header 섹션을 클릭할 수 있도록 스크립트를 추가하는 방법이다. 이것은 모든 브라우저에서 작동하지 않을 수도 있다. 이것은 헤더를 클릭할 수 있는 기본 워드프레스 테마(Kubrick)에서 볼 수 있다:
- wp-content/themes/default/header.php 템플릿 파일을 연다.
- <div id="header"> 다음과 같이 변경한다:
<div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;">
헤더 이미지 전체가 아닌, 헤더의 텍스트 영역도 함께 클릭할 수 있다. 다음을 사용하여 헤더 아트와 블로그 타이틀 및 설명도 클릭할 수 있다.
<div id="header">
<div id="headerimg">
<h1>
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
<div class="description">
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('description'); ?>
</a>
</div>
</div>
</div>
헤더 이미지 회전
헤더, 사이드바 안, 또는 템플릿 파일에서 이미지를 회전하는데 사용할 수 있는 스크립트가 여러 개 있다. 이 중의 하나인, Random Image Rotator를 사용하여 테스트한다.
스크립트를 별개의 폴더에 저장한다. 해당 폴더 안에 헤더에서 회전하기를 바라는 이미지들이 있다. 이 예제를 사용하기 위해, rotate.php를 호출한다. 웹페이지가 로드될 때마다 변경되거나 또는 회전할, 배경 이미지로 이것을 사용하려면:
#header {
background: url("/images/headerimgs/rotate.php")
no-repeat bottom center; }
실제로 헤더 또는 사이트의 다른 곳에 이것을 넣으려면, 아래와 같이 header division안에 이미지 링크를 추가한다:
<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />
Image rotating scripts include:
헤더에 탐색 메뉴 추가
헤더에 웹사이트 탐색 요소를 추가할 수도 있다. 일반적으로 이것은 헤더의 상단 또는 하단에 가로로 배치된 메뉴이다. 이것을 추가하려면, 헤더 탐색 요소를 스타일링하기 위해 header 안에 새로운 division을 만든다.
이것은 List Categories 템플릿 태그 중의 하나를 사용하여 헤더의 상단에 카테고리를 표시하는 것만큼 간단하다. list_cats() 태그를 사용한 예제를 하나 살펴보자.
이 예제에서 list_cats() 템플릿 태그는 순서가 정해지지 않은 목록(<ul><li>)에, 날짜와 글 숫자를 표시하지 않고, 카테고리 목록을 ID로 정렬한다. 빈 카테고리는 숨기지 않는다. 링크의 제목으로 카테고리 "설명(description)"을 사용한다. 자식 카테고리는 표시하지 않는다. 카테고리 1과 33은 제외한다. 이것은 자신의 "카테고리" division에 위치한다. "홈" 페이지 또는 전면 페이지에 대한 링크는 목록의 시작 부문에 수동으로 포함된다.
- list_cats()는 더 이상 사용되지 않고, wp_list_categories()로 대체되었다.
<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->
이 목록을 스타일링하기 위해, style.css의 #categorylist를 다음과 같이 한다:
#categorylist {font-size:12px; font-style:normal;
text-transform:uppercase; }
#categorylist ul {list-style-type: none; list-style-image:none;
margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}
아래와 같이 표시된다:
헤더 탐색 메뉴 안에 페이지, 아카이브(archives, 글 저장소) 및 기타 링크를 추가할 수도 있다. 탐색 메뉴에 대한 더 자세한 정보는 다음을 참조한다:
- Good Navigation Links
- Dynamic Menu Highlighting
- Creating Horizontal Menus
- Styling Lists with CSS
- wp_list_cats()
- list_cats()
헤더 팁
워드프레스 사이트 헤더를 선택하여 사용자 정의 하는데 도움이 되는 팁과 정보이다.
- 텍스트 배치와 색상에 주의한다
- 헤더 안의 텍스트 색상과 배치는 표시될 때 추가하거나 제외할 수 있다. 다음은 몇 가지 팁이다.
- 흰색 텍스트를 사용하고 있다면, 어떤 이유로 이미지가 화면에 표시되지 않거나, 사용자가 "이미지 보임(show images)"을 꺼 놓았을 경우, 다시 흰색 텍스트를 보여 주는 header 와/또는 headerimg에 배경색이 있는지 확인한다.
- 이미지가 주 기능이거나 요소이면, 주 이미지를 덮지 않도록 텍스트를 배치한다.
- 그래픽이 복잡한 영역에 텍스트를 배치하여, 읽기 어렵다면, 헤더 이미지가 덜 복잡한 영역에 텍스트를 배치한다.
- 텍스트 색상은 방문자가 보기 쉽게 하고, 헤더 아트 색상과 충돌하지 않는지 확인한다. 라임 녹색(lime green background)에 형광 오렌지 텍스트는 읽기 어렵다.
- 헤더 아트의 색상 차이와 무늬는 위에 때문에 텍스트의 문자가 "안보일 수" 있다는 사실을 유념해라. 헤더 아트 또는 헤더 이미지에 텍스트가 있다면, 동일하게 적용된다.
- 목적과 요점을 가지고 있다.
- 좋은 헤더는 사이트의 내용을 반영한다. 사이트의 나머지는 기대를 충족하고, 헤더에 부응해야 한다. 그래서 헤더는 사이트의 내용과 목적 및 의도를 반영해야 한다.
- 방문자가 머물도록 해야 한다.
- 좋은 헤더는 책 또는 잡지의 표지와 같다. 사람들이 머물러서 둘러 보고, 읽고, 더 많이 보고, 가치 있는 것을 찾을 수 있도록 유도해야 한다. 사람들의 관심을 끌어서, "사이트를 탐구할 가치가 있다"고 말하게 하는 티저 광고이다.
- 전체적인 모습과 조화를 이루어야 한다
- 대담하고 인상적인 헤더는 대담하게 디자인된 사이트라는 느낌을 준다. 반면 부드럽고 파스텔 색의 사이트는 온화한 그래픽 헤더 느낌을 준다. A site dedicated to 펑크 록(punk rock)과 and 그런지 록(grunge) 전용 사이트는 펑키 및 그런지 느낌의 헤더를 가져야 한다. 여러분의 몫이다. 그러나 일관성을 생각해라.
- 헤더에 사진이 있을 필요는 없다.
- 모든 헤더에 사진과 그래픽이 있을 필요는 없다. 때로는 단어가 더 중요하다. 옅은 색조 또는 흰색 배경에 두드러져 보이는 지가 더 중요하다.
- 어수선한 헤더는 여전히 어수선하다.
- 꽉 찬 광고, 탐색 메뉴, 텍스트, 스크롤 되는 뉴스 피드 등 필요 이상의 많은 것들로 채우지 말아라.
- 헤더에 접근성 표준을 유지해라.
- 헤더 텍스트 숨기기 언급했었다. 헤더에 접근성 표준을 충족시키기 위해 해야 할 일이 더 있다. h1 태그를 사용해서, 스크린리더가 헤더로 인식할 수 있게 해라. 템플릿 파일에 사용되는 링크와 이미지에 제목(titles)과 alt 설명을 사용해라 (배경 이미지의 스타일시트에서는 아니다).
- 헤더 높이는 무엇이든 가능하지만, 콘텐츠의 셀을 기억해라.
- 평균 헤더의 높이는 200 픽셀 이하이지만, 헤더 높이의 범위는 매우 엷은 것부터 페이지의 반까지이다. 사람들이 페이지를 방문하는 주된 이유는 사이트의 콘텐츠라는 것을 명심하자, 그리고 콘텐츠를 보기 위해 헤더 스크롤 다운을 더 많이 하면 할수록, 흥미는 더 없어지는 경향이 있다. 헤더에서 콘텐츠를 읽을 수 있게 해라.
- "사이트의 독자성(identity)"을 생각해라
- 헤더는 사이트 독자성(identify ) 또는 "브랜드(brand)"의 일부분이다. 그래서 사람들은 해당 사이트의 다른 페이지에서 클릭했을 때 같은 사이트에 있다는 것을 알고 싶어한다. 헤더와 헤더 아트를 사이트의 "브랜드 독자성(brand identity)"이라고 생각해라.
헤더 자료 및 정보
헤더 이미지
많은 워드프레스 테마는 사용할 수 있는 헤더 이미지 그래픽을 갖추고 있다. GPL - General Public License에 따라 자유롭게 사용할 수 있도록 공개되기 때문이다. 그렇지 않으면, 인터넷에서 무료로 사용할 수 있는 많은 자료 중에서 또는 스스로 디자인하여 사용할 수 있다.
헤더 이미지를 얻을 수 있는 자료이다 :
- Digital Westex Image Gallery (See "Header Art" category)
- Free Header Images by 100pixel
- Image * After - Free Stock Image Library
- Stock.xchng - Free Stock Image Library
- About.com's Webclipart Welcome, Headers, and Logos