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;

}