이번에는 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.
|
결과는 아래와 같습니다.
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.
|
결과는 아래와 같습니다.
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..
|
결과는 아래와 같습니다.
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..
|
결과는 아래와 같습니다.
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..
|
결과는 아래와 같습니다.
This text will have first line indented by 1cm |
Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify..
|
결과는 아래와 같습니다.
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..
|
결과는 아래와 같습니다.
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..
|
결과는 아래와 같습니다.
This will be capitalized This will be in uppercase This will be in lowercase |
Following is the example which demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
|
결과는 아래와 같습니다.
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.
|
결과는 아래와 같습니다.
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
[CSS] 10. Links ( 링크 설정 ) (0) | 2016.06.12 |
---|---|
[CSS] 9. Image ( 이미지 관련 설정 ) (0) | 2016.06.12 |
[CSS] 7. Fonts ( 폰트 설정 ) (0) | 2016.06.12 |
[CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
[CSS] 5. Colors ( 색깔 ) (0) | 2016.06.12 |