Chapter 2. Headings

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

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;

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