Whiteship's Note

'Heading'에 해당되는 글 1건

  1. 2008.03.18 Chapter 2. Headings

Chapter 2. Headings

View/HTML/CSS : 2008.03.18 19:41


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

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;

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

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top