CSS 텍스트

텍스트 색상

color 속성은 텍스트의 색상을 설정하는 데 사용됩니다. 색상은 다음 항목에 의해 지정됩니다.

‘red’와 같은 색상 이름
“#ff0000”과 같은 16진수 값
rgb(255,0,0)와 같은 RGB 값

페이지의 기본 텍스트 색상은 body 선택자로 정의되어 있습니다.

예제 1

body {
  color: blue;
}

h1 {
  color: green;
}

텍스트 색상 및 배경 색상

이 예에서는 background-color 속성과 color 속성을 모두 정의합니다.

예제 2

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

높은 대비는 시력에 문제가 있는 사람들에게 매우 중요합니다. 따라서 텍스트 색상과 배경색(또는 배경 이미지)의 대비가 양호한지 항상 확인하십시오.

텍스트 정렬 및 텍스트 방향

text-align
text-align-last
direction
unicode-bidi
vertical-align

텍스트 정렬

text-align 속성은 텍스트의 수평 정렬을 설정하는 데 사용됩니다.

텍스트는 왼쪽 또는 오른쪽으로 정렬, 가운데 정렬 또는 정렬할 수 있습니다.

다음 예제에서는 가운데 정렬된 텍스트와 왼쪽 및 오른쪽 정렬된 텍스트를 보여 줍니다.

예제 2

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

text-align 속성이 “justify”로 설정된 경우 각 행은 모든 행의 너비가 같도록 늘어나고 왼쪽과 오른쪽 여백은 직선입니다.

예제 3

div {
  text-align: justify;
}

text align last

text-align-last 속성은 텍스트의 마지막 줄을 정렬하는 방법을 지정합니다.

예제 4

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

텍스트 방향

direction 및 unicode-bidi 속성을 사용하여 요소의 텍스트 방향을 변경할 수 있습니다.

예제 5

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

수직 정렬

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

예제 6

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

텍스트 데코레이션

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

텍스트에 데코레이션 라인 추가

text-decoration-line 속성은 텍스트에 데코레이션 라인을 추가하는 데 사용됩니다.

Tip: 윗줄 및 밑줄과 같이 둘 이상의 값을 결합하여 텍스트 위아래에 선을 표시할 수 있습니다.

예제 7

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

링크가 아닌 텍스트에 밑줄을 긋는 것은 권장되지 않습니다. 이는 종종 독자를 혼란스럽게 하기 때문입니다.

데코레이션 라인 색상 지정

text-decoration-color 속성은 데코레이션 라인 색상을 설정하는 데 사용됩니다.

예제 8

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

데코레이션 라인 스타일 지정

text-decoration-style 특성은 데코레이션 라인의 스타일을 설정하는 데 사용됩니다.

예제 9

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

데코레이션 라인 두께 지정

text-decoration-thickness 속성은 장식 선의 두께를 설정하는 데 사용됩니다.

예제 10

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

축약 속성

text-decoration 속성은 다음을 나타내는 축약 속성입니다.

text-decoration-line (필수)
text-decoration-color
text-decoration-style
text-decoration-thickness

예제 11

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Tip

HTML의 모든 링크에는 디폴트로 밑줄이 쳐져 있습니다. 링크가 밑줄 없이 스타일링되는 경우가 있습니다. text-decoration: none;은 링크에서 밑줄을 삭제할 때 사용됩니다.

예제 12

a {
  text-decoration: none;
}

텍스트 변환

text-transform 속성은 텍스트에서 대소문자를 지정하는 데 사용됩니다.

모든 것을 대문자 또는 소문자로 변환하거나 각 단어의 첫 글자를 대문자로 변환하는 데 사용할 수 있습니다.

예제 13

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

텍스트 스페이싱

text-indent
letter-spacing
line-height
word-spacing
white-space

텍스트 들여쓰기

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

예제 14

p {
  text-indent: 50px;
}

문자 간격

letter-spacing 속성은 텍스트에서 문자 사이의 공간을 지정하는 데 사용됩니다.

다음 예시는 문자 사이의 간격을 늘리거나 줄이는 방법을 보여 줍니다.

예제 15

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

라인 높이

line-height 속성은 줄 사이의 공간을 지정하는 데 사용됩니다.

예제 16

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

띄어쓰기

word-spacing 속성은 텍스트에서 단어 사이의 공간을 지정하는 데 사용됩니다.

다음 예시는 단어 사이의 간격을 늘리거나 줄이는 방법을 보여 줍니다.

예제 17

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

공백

white-space 속성은 요소 내부의 공백 공간이 처리되는 방법을 지정합니다.

다음은 요소 내에서 텍스트랩을 표시하지 않는 예를 나타냅니다.

예제 18

p {
  white-space: nowrap;
}

텍스트 그림자

text-shadow 속성은 텍스트에 그림자를 추가합니다.

가장 간단한 방법에서는 수평 그림자(2px)와 수직 그림자(2px)만 지정합니다.

텍스트 그림자 이펙트

예제 19

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

다음으로 그림자에 색상(빨간색)을 추가합니다.

텍스트 그림자 이펙트

예제 20

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

그런 다음 그림자에 흐림 효과(5px)를 추가합니다.

텍스트 그림자 이펙트

예제 21

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

추가 예제

텍스트 그림자 이펙트

예제 22

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

텍스트 그림자 이펙트

예제 23

h1 {
  text-shadow: 0 0 3px #ff0000;
}

텍스트 그림자 이펙트

예제 24

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

텍스트 그림자 이펙트

예제 25

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}