CSS Text

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it yourself" link.

Text Color

color 속성은 텍스트의 색을 설정하는 데 사용됩니다.

페이지의 기본 색은 body selector 에 정의되어있다. .

Example

body {
color: blue;
}

h1 {
color: green;
}

Try it yourself »

	Note: For W3C compliant CSS: If you define the color property, you must also define the background-color property.

Text 정렬

text-align 속성은 텍스트의 수평 정렬을 설정하는 데 사용됩니다.

텍스트는 가운데 또는 왼쪽이나 오른쪽 또는 양쪽에 정렬 될 수 있습니다.

text-align 이 "justify"로 설정되어있는 경우, 각 라인은 모든 라인이 동일한 폭을 갖도록 펴고 왼쪽과 오른쪽 마진 (잡지, 신문 등 처럼) 일직선된다.

Example

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Try it yourself »

Text Decoration

text-decoration 속성은 텍스트의 장식을 설정하거나 제거하는 데 사용됩니다.

text-decoration 속성은 주로 디자인을 위해 링크에서 밑줄을 제거하는 데 사용됩니다 :

Example

a {
text-decoration: none;
}

Try it yourself »

	Note: It is not recommended to underline text that is not a link, as this often confuses users.

Text Transformation

text-transform 속성은 텍스트의 대문자와 소문자를 지정하는 데 사용됩니다.

대문자 또는 소문자로 모든 것을 설정하거나 각 단어의 첫 글자를 대문자로 할 수 있습니다.

Example

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Try it yourself »

Text 들여 쓰기

text-indent 속성은 텍스트의 첫 줄 들여 쓰기를 지정하는 데 사용됩니다.

Example

p {
text-indent: 50px;
}

Try it yourself »

More Examples

Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.

Specify the space between lines
This example demonstrates how to specify the space between the lines in a paragraph.

Set the text direction of an element
This example demonstrates how to change the text direction of an element.

Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.

Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.

Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.

Add shadow to text
This example demonstrates how to add shadow to text.

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

All CSS Text Properties

Property	Description
color	Sets the color of text
direction	Specifies the text direction/writing direction
letter-spacing	Increases or decreases the space between characters in a text
line-height	Sets the line height
text-align	Specifies the horizontal alignment of text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-shadow	Specifies the shadow effect added to text
text-transform	Controls the capitalization of text
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element
white-space	Specifies how white-space inside an element is handled
word-spacing	Increases or decreases the space between words in a text

« Previous Next Chapter »