Whiteship's Note

Chpater 13. Styling Text

View/HTML/CSS : 2008.03.31 14:00


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;

}

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

[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
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
top




: 1 : ··· : 3 : 4 : 5 : 6 : 7 : 8 : 9 : 10 : 11 : ··· : 18 :