CSS 입문 | CSS 기본 속성 | CSS 텍스트 (text)

Tags:

CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같다.

속성	설명
color	텍스트의 색상을 설정함.
direction	텍스트가 쓰이는 방향을 설정함.
letter-spacing	텍스트 내에서 문자 사이의 간격을 설정함.
word-spacing	텍스트 내에서 단어 사이의 간격을 설정함.
text-indent	단락의 첫 줄을 들여쓰기할지 안 할지를 설정함.
text-align	텍스트의 수평 방향 정렬을 설정함.
text-decoration	텍스트에 여러 가지 효과를 설정하거나 제거함.
text-transform	텍스트에 포함된 영문자에 대한 대소문자를 설정함.
line-height	텍스트의 줄 간격을 설정함.
text-shadow	텍스트에 그림자 효과를 설정함.
unicode-bidi	direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함.
vertical-align	HTML 요소 내의 수직 방향 정렬을 설정함.
white-space	HTML 요소 내의 여백을 설정함.

color 속성

color 속성은 텍스트의 색상을 설정한다.

웹 페이지에서 텍스트의 기본 색상은 검정색이다. <body> 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body> 태그에 명시된 속성값보다 우선 적용된다.

<style>
    body { color: red; }
    p { color: maroon; }
</style>

direction 속성

direction 속성은 텍스트가 써지는 방향을 설정한다.

웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써진다. direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써진다. 하지만, direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써진다.

<style>
    .rightToLeft { direction: rtl; }
</style>

letter-spacing 속성

letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정한다.

<style>
    .decLetterSpacing { letter-spacing: -3px; }
    .incLetterSpacing { letter-spacing: 10px; }
</style>

word-spacing 속성

word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정한다.

letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정한다.

<style>
    .decWordSpacing { word-spacing: -3px; }
    .incWordSpacing { word-spacing: 10px; }
</style>

text-indent 속성

text-indent 속성은 단락의 첫 줄에 들여쓰기 할지 안할지를 설정한다.

웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않다.

<style>
    .paraIndent { text-indent: 30px; }
</style>

text-align 속성

text-align 속성은 텍스트의 수평 방향 정렬을 설정한다.

text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용된다.

<style>
    h2 { text-align: left; }
    h3 { text-align: right; }
    h4 { text-align: center; }
</style>

text-decoration 속성

text-decoration 속성은 텍스트를 몇가지 형태로 꾸밀 수 있다.

<style>
    h2 { text-decoration: overline; }
    h3 { text-decoration: line-through; }
    h4 { text-decoration: underline; }
    a { text-decoration: none; }
</style>

text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용한다.

text-transform 속성

text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정한다.

이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 줍니다.
또한, 단어의 첫 문자만을 대문자로 변경시킬 수도 있다.

<style>
    h2 { text-transform: uppercase; }
    h3 { text-transform: lowercase; }
    h4 { text-transform: capitalize; }
</style>

text-transform 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용된다.

line-height 속성

line-height 속성은 텍스트의 줄 간격을 설정한다.

<style>
    .narrowLineHeight { line-height: 0.8; }
    .wideLineHeight { line-height: 1.8; }
</style>

text-shadow 속성

text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정한다.

<style>
    h2 { text-shadow: 2px 1px #3399CC; }
</style>

CSS3 텍스트

CSS3에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었다. CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같다.

속성	설명
text-overflow	콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정함.
word-wrap	길이가 긴 단어가 콘텐츠(content) 영역을 벗어나면 그 단어를 다음 줄에 나누어 표현할 수 있도록 함.
word-break	긴 단어를 나누어 표현해야 할 때 해당 단어가 나뉘는 기준을 설정함.
text-emphasis	사용자가 강조 표현을 설정할 수 있도록 함.
text-align-last	텍스트의 마지막 줄의 정렬 방법을 설정함.
text-justify	텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정함.

CSS3 텍스트 속성 지원 버전

CSS3 텍스트 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
text-overflow	6.0	4.0	7.0	3.1	11.0 / 9.0 -o-
word-wrap	5.5	23.0	3.5	6.1	12.1
word-break	5.5	4.0	15.0	3.1	15.0

text-overflow 속성

text-overflow 속성은 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정한다.
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현할 수도 있다.

<style>
    p { white-space: nowrap; width: 250px; overflow: hidden; }
    #p_01 { text-overflow: clip; }
    #p_02 { text-overflow: ellipsis; }
</style>

overflow 속성값을 visible로 설정하면, 사용자에게 콘텐츠 영역을 벗어나 생략된 텍스트까지 보여줄 수 있다.

<style>
    #p_01:hover, #p_02:hover { overflow: visible; }
</style>

word-wrap 속성

word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해준다.

<style>
    p { border: solid 1px black; width: 130px; }
    #p_01, #p_03 { word-wrap: break-word; }
</style>

word-wrap 속성은 영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않는다.

word-break 속성

word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정한다.
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있다.

<style>
    p { border: solid 1px black; width: 130px; }
    #p_02 { word-break: break-all; }
    #p_03 { word-break: keep-all; }
</style>

위의 예제에서 word-wrap 속성과 word-break 속성의 차이를 확인할 수 있다.

word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용된다.

최종 수정 : 2021-08-27