[CSS] 8. Text ( 텍스트 설정 )

이번에는 CSS 속성을 이용해서 텍스트를 조작하는 방법에 대해서 알아보겠습니다.

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.

• The letter-spacing property is used to add or subtract space between the letters that make up a word.

• The word-spacing property is used to add or subtract space between the words of a sentence.

• The text-indent property is used to indent the text of a paragraph.

• The text-align property is used to align the text of a document.

• The text-decoration property is used to underline, overline, and strikethrough text.

• The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

• The white-space property is used to control the flow and formatting of text.

• The text-shadow property is used to set the text shadow around a text.

 

텍스트 색깔 설정

<p style="color:red;"> This text will be written in red. </p>

결과는 아래와 같습니다.

This text will be written in red.

 

 

텍스트 방향 설정

Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl.

<p style="direction:rtl;"> This text will be renedered from right to left </p>

결과는 아래와 같습니다.

This text will be renedered from right to left

 

 

문자 사이의 공간 설정

Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space..

<p style="letter-spacing:5px;"> This text is having space between letters. </p>

결과는 아래와 같습니다.

This text is having space between letters.

 

 

단어 사이의 공간 설정

Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space..

<p style="word-spacing:5px;"> This text is having space between words. </p>

결과는 아래와 같습니다.

This text is having space between words.

 

 

텍스트 인덴트 설정

Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space..

<p style="text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p>

결과는 아래와 같습니다.

This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property.

 

 

텍스트 정렬 설정

Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify..

<p style="text-align:right;"> This will be right aligned. </p> <p style="text-align:center;"> This will be center aligned. </p> <p style="text-align:left;"> This will be left aligned. </p>

결과는 아래와 같습니다.

This will be right aligned. This will be center aligned. This will be left aligned.

 

 

텍스트 꾸밈 설정

Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink..

<p style="text-decoration:underline;"> This will be underlined </p> <p style="text-decoration:line-through;"> This will be striked through. </p> <p style="text-decoration:overline;"> This will have a over line. </p> <p style="text-decoration:blink;"> This text will have blinking effect </p>

결과는 아래와 같습니다.

This will be underlined This will be striked through. This will have a over line. This text will have blinking effect

 

 

텍스트 대소문자 설정

Following is the example which demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase..

<p style="text-transform:capitalize;"> This will be capitalized </p> <p style="text-transform:uppercase;"> This will be in uppercase </p> <p style="text-transform:lowercase;"> This will be in lowercase </p>

결과는 아래와 같습니다.

This will be capitalized This will be in uppercase This will be in lowercase

 

 

텍스트 white-space 설정

Following is the example which demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.

<p style="white-space:pre;">This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.</p>

결과는 아래와 같습니다. 

This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.

 

 

텍스트 그림자 설정

Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers.

<p style="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow.</p>

결과는 아래와 같습니다.

If your browser supports the CSS text-shadow property, this text will have a blue shadow.

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_text.htm