문서의 제목을 나타내는 방법

CSS를 사용하기

pan class="heading">Super Cool Page Title</span>

.heading {

  font-size: 24px;

  font-weight: bold;

  color: blue;

  }

• CSS를 인식하지 못하는 장치나, 외부 CSS로 빼냈을 때는 예전 브라우저들이 인식하지 못할 수도 있다.

• 검색 엔진이 <span>태그로 둘러쌓인 부분은 중요하게 여기지 않는다.

• <span>은 inline 엘리먼트기 때문에, 추가적으로 불필요한 <p>나 <div> 태그와 같은 block-level 엘리먼트를 사용해야한다.

p와 b 콤보 사용하기

<p><b>Super Cool Page Title</b></p>

• CSS를 인식하지 못하더라도 굵게 표시할 수는 있다.

• 검색 엔진이 <b>로 둘러쌓인 부분을 중요하게 인식하지 않는다.

<h1> 부터 <h6> 사용하기

• 적달한 헤딩 태그는 표현이 아니라 의미에 가깝다.

• <h1>, <h2>가 너무 크게 표현되서 기피하는 경향이 있는데, 이것은 CSS로 조정이 가능하다.

• 검색 엔진이 이 태그들을 중요하게 여긴다.

• 헤딩 레벨 순서를 건너뛰지 않는 것이 좋다.

간단한 스타일 추가하기

<h1>Super Cool Page Title</h1>

h1 {

  font-family: Arial, sans-serif;

  font-size: 24px;

  color: #369;

  }

• 글자체와 크기 그리고 색상 설정하기.

배경 추가하기

background: url(10x10.gif) repeat-x  bottom;

background: url(icon.gif) no-repeat 0 50%;

• repeat-x 는 수평으로 반복. repeat-y는 수직으로 이미지 반복.

• no-repeat은 한 번만 보여주겠다는 설정. 0 50%는 맨 왼쪽 가운데(수직)에 위치시킨다.

카멜레온 효과

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>


h3 img {

  background: #696;

  vertical-align: middle;

  }

• 배경색을 주고, 투명한 배경에 하얀색으로 그린 이미지를 삽입한다.