Hypertext를 좀 더 멋지게 보이게 하는 방법

Times They are a-Changing

• Times(Times new roman) 글자체는 여러 브라우저의 기본 글자체다. however, this
  could easily be changed by users to whatever they fancy, and of course
  shouldn't be relied upon.

줄 높이 설정하기

body {

  line-height: 1.5em;

  }

• 줄 높이를 설정하여 가독성을 높일 수 있다.

글자체 설정하기

body {

  font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

  line-height: 1.5em;

  }

• 사용자의 컴퓨터에 설치되어 있는 폰트를 고려하여 여러 개의 폰트를 설정한다.

• 맨 앞에 것이 없으면 그 다음 것을 적용한다.

• 글자체가 여러 단어로 구성되어 있다면, 따옴표로 묶는다.

Kerning (a.k.a. Letter-Spacing)

h1 {

  letter-spacing: -2px;

  }

• 글자들의 간격을 조정할 수 있다.

Drop Caps

<p><span class="drop">I</span>f you're painting with latex paints, and

• 문단을 멋지게 표현하기 위한 스타일 훅이 필요하다.

• CSS2를 적용하는 브라우저들은 이런 훅이 필요없이 :first-letter 사용하면 된다.

.drop {

  float: left;

  font-size: 400%;

  line-height: 1em;

  margin: 4px 10px 10px 0;

  padding: 4px 10px;

  border: 2px solid #ccc;

  background: #eee;

  }

Text alignment

body {

  font-family: Georgia, Times, serif;

  line-height: 1.5em;

  text-align: justify;

  }

• text-align: justify를 사용하면 양쪽으로 정렬된다.

Transforming Text

h1 {

  letter-spacing: 4px;

  font-style: italic;

  text-align: center;

  text-transform: uppercase;

  }

• text-transform: uppercase;를 사용해서 글자를 모두 대문자로 바꿀 수 있다.

Small Caps

h1 {

  letter-spacing: 4px;

  text-align: center;

  font-variant: small-caps;

  }

• font-variant: small-caps;를 사용해서 전부 대문자로 바꿔주고, 단어의 첫 글자 이외의 글자들을 조금 작게 보여준다.

문단 들여쓰기

p {

  text-indent: 3em;

  }