์ด๋ฒˆ์—๋Š” 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