목차

CSS Text

  • description : CSS text color, alignment, decoration,transformation, spacing, shadow
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-08



Source of the article



CSS Text Color

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


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

예제

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


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


Text Color and Background Color

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

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



CSS Text Alignment (텍스트 정렬)

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

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

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

예제

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


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

예제

div {
  text-align: justify;
}



Text Direction

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

예제

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



Vertical Alignment

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

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

예제

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



CSS Text Decoration

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 Transformation

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

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

예제

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



CSS Text Spacing

Text Indentation (텍스트 들여쓰기)

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

예제

p {
  text-indent: 50px;
}


Letter Spacing (철자 간격, 자간 (字間)

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

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

예제

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



Line Height (행 높이)

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

예제

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



Word Spacing

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

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

예제

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



White Space

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

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

예제

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



CSS Text Shadow

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;
}



All CSS Text Properties

Property Description
color 텍스트의 컬러를 설정합니다.
direction 텍스트 방향/글쓰기 방향을 설정합니다.
letter-spacing 텍스트에서 철자 사이의 간격을 증가 또는 감소시킵니다.
line-height 행 높이를 설정합니다.
text-align 텍스트의 가로 정렬을 설정합니다.
text-decoration 텍스트에 추가된 데코레이션(decoration)을 설정합니다.
text-indent 텍스트 블럭 내에서 첫 번째 줄의 들여쓰기를 설정합니다.
text-shadow 텍스트에 추가된 그림자 효과를 설정합니다.
text-transform 텍스트의 대문자를 조절합니다.
text-overflow 화면에서 표시되지 않고 흘러넘치는 콘텐츠가 사용자에게 표시되는 방법을 설정합니다.
unicode-bidi direction속성과 함께 사용되어 동일한 문서 내애서 여러 언어를 지원하도록 텍스트가 우선시 되어야 하는지를 설정하거나 반환합니다.
vertical-align 한 요소의 수직 정렬을 설정합니다.
white-space 한 요소 내부의 화이트 스페이스가 처리되는 방법을 설정합니다.
word-spacing 텍스트 내부의 단어들 사이의 공간을 증가 또는 감소시킵니다.