..

Search

48) CSS3 텍스트

CSS3 텍스트


 

CSS3 텍스트

CSS3에서는 HTML 문서 내에 존재하는 텍스트를 더욱 다양한 방법으로 조작할 수 있게 되었습니다.

 

 

CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같습니다.

 

1. text-overflow
2. word-wrap
3. word-break


CSS2 텍스트

CSS2까지는 다음과 같은 텍스트 속성만을 사용할 수 있었습니다.

 

1. color

2. direction

3. letter-spacing

4. word-spacing

5. text-indent

6. text-align

7. text-decoration

8. text-transform

9. line-height

10. text-shadow

11. unicode-bidi

12. vertical-align

13. white-space

 

CSS 텍스트 수업 확인 =>


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>

    pwhite-space: nowrap; width: 250pxoverflow: 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>

    pborder: solid 1px blackwidth: 130px; }

    #p_01, #p_03 { word-wrap: break-word; }

</style>

코딩연습 ▶

 

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

word-break 속성

word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정합니다.

단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있습니다.

예제

<style>

    pborder: solid 1px blackwidth: 130px; }

    #p_02 { word-break: break-all; }

    #p_03 { word-break: keep-all; }

</style>

코딩연습 ▶

 

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

 

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

CSS3 text 속성

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

연습문제