• CSS text
• CSS Text Alignment
• CSS Text Decoration
• CSS Text Transformation
• CSS Text Spacing
• CSS Text Shadow

CSS에는 텍스트 서식을 만드는 많은 속성들이 있습니다.
color속성은 텍스트의 컬러를 설정하기 위해 사용합니다. 컬러는 하기와 같이 지정됩니다.

• 컬러 이름 - “red”와 같은 컬러 이름을 지정합니다.
• HEX - “ff0000”과 같은 HEX 값을 지정합니다.
• RGB - “rgb(255, 0, 0)“과 같이 RGB 값을 지정합니다.

웹 페이지의 기본 텍스트 컬러는 body 선택자로 정의합니다.

body {
  color: blue;
}
 
h1 {
  color: green;
}

Note:
W3C를 준수하는 CSS의 경우, color속성을 정의할 경우, background-color도 정의해야 합니다.

하기의 예제에서 background-color와 color속성을 정의합니다.

body {
  background-color: lightgrey;
  color: blue;
}
 
h1 {
  background-color: black;
  color: white;
}

text-alignment 속성은 텍스트의 가로 정렬을 설정하기 위해 사용합니다.

텍스트는 우측 또는 좌측 정렬, 중앙 정렬 또는 양쪽 맞춤을 할 수 있습니다.

하기의 예제에서 중앙 정렬, 좌측/우측 정렬된 텍스트를 확인할 수 있습니다.
(텍스트 방향이 왼쪽에서 오른쪽일 때에서는 왼쪽 정렬이 기본이고, 텍스트 방향이 오른쪽에서 왼쪽일 경우 우측 정렬이 기본입니다.)

h1 {
  text-align: center;
}
 
h2 {
  text-align: left;
}
 
h3 {
  text-align: right;
}

text-align속성이 “justify(양쪽 맞춤)“으로 설정된 경우, 각각의 줄이 늘어나 모든 줄의 너비가 동일하고, 좌측 및 우측 여백(margins)은 직선이 됩니다.(잡지 및 신문에서와 같이)

div {
  text-align: justify;
}

direction과 unicode-bidi 속성은 한 요소의 텍스트 방향을 변경하기 위해 사용할 수 있습니다.

P {
  direction: rtl;   /* rtl: right to left */
  unicode-bidi: bidi-override;
}

vertical-align속성은 한 요소의 수직 정렬을 설정합니다.

하기 예제에서 텍스트 안에 있는 하나의 이미지의 수직 정렬을 설정하는 방법을 확인할 수 있습니다.

img.top {
  vertical-align: top;
}
 
img.middle {
  vertical-align: middle;
}
 
img.bottom {
  vertical-align: bottom;
}

text-decoration속성은 텍스트에서 데코레이션 (decoration)을 설정 또는 삭제하기 위해 사용합니다.

text-decoration: none;속성은 링크의 언더라인을 삭제하기 위해 사용되곤 합니다.

a {
  text-decoration: none;
}

다른 text-decoration 값들은 텍스트를 장식하기 위해 사용합니다.

h1 {
  text-decoration: overflow;
}
 
h2 {
  text-decoration: line-through;
}
 
h3 {
  text-decoration: underline;
}

Note:
혼란을 줄 수 있기 때문에, 링크가 아닌 텍스트에 밑줄을 긋는 것을 권장하지 않습니다.

text-transform속성은 텍스트에서 대문자 및 소문자를 설정하기 위해 사용합니다.

모든 철자를 대문자나 소문자로 변경하거나, 각 단어의 첫 글자를 대문자로 변경하기 위해 사용할 수 있습니다.

p.uppercase {
  text-transform: uppercase;
}
 
p.lowercase {
  text-transform: lowercase;
}
 
p.capitalize {
  text-transform: capitalize;
}

text-indent속성은 텍스트의 첫 번째 줄의 들여쓰기를 지정하기 위해 사용합니다.

p {
  text-indent: 50px;
}

letter-spacing속성은 텍스트에서 철자 사이의 공간을 설정하기 위해 사용합니다.

하기의 예제는 철자 사이의 공간을 늘이고 줄이는 방법을 보여줍니다.

h1 {
  letter-spacing: 3px;
}
 
h2 {
  letter-spacing: -3px;
}

line-height속성은 행간을 설정하기 위해 사용합니다.

p.small {
  line-height: 0.8;
}
 
p.big {
  line-height: 1.8;
}

word-spacing 속성은 텍스트에서 단어들 사이의 공간을 설정하기 위해 사용합니다.

하기의 예제는 단어들 사이의 공간을 늘이거나 줄이는 방법을 보여줍니다.

h1 {
  word-spacing: 10px;
}
 
h2 {
  word-spacing: -5px;
}

white-space속성은 한 요소 내부에서 화아트 스페이스가 처리되는 방법을 설정합니다.

하기 예제에서 한 요소 내부에서 텍스트 랩핑(text wrapping)을 불가능하게 하는 방법을 확인합니다.

p {
  white-space: nowrap;   /* 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다.*/
}

text-shadow 속성은 쉐도우를 텍스트에 추가합니다.

가장 단순하게 사용하기 위해서 수평 그림자(2px) 그리고 수직 그림자(2px)를 지정합니다.

h1 {
  text-shadow: 2px 2px;
}

그리고 나서, 그림자에 컬러 (red)를 추가합니다.

h1 {
  text-shadow: 2px 2px red;
}

이후, 그림자에 블러 효과 (5px)(blur effect, 흐리게 하기)를 추가합니다.

h1 {
  text-shadow: 2px 2px 5px red;
}