CSS text

글자색은 color로 지정한다. name, Hex, RGB로 지정 가능하다.

body {
    color: blue;
}

웹 표준을 준수하려면 color 속성과 background-color 속성을 함께 지정한다.

text alignment

text-align은 문자의 수평 정렬을 설정할 때 쓴다. 텍스트는 left, center, right 또는 justify로 정렬이 가능하다.

justify는 각 줄을 동등한 너비로 만든다.

text decoration

보통 text-decoration:none;은 link의 밑줄을 없애기 위해 쓴다.

daum.net -> daum.net

overline은 텍스트의 윗줄

line-through는 취소선

underline은 밑줄

하지만 link가 아닐 경우 사용자에게 혼란을 주기 때문에 underline은 추천하지 않는다.

text transformation

대문자, 소문자를 만들기 위해 쓴다.

THIS IS SOME TEXT.

this is some text.

This Is Some Text.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

text indentation

text-indent는 텍스트의 첫 줄 들여쓰기를 한다.

text-indent:50px;

letter spacing

letter-spacing은 텍스트의 문자 너비를 지정한다.

This is heading 1

This is heading 2

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

line height

line-height는 줄 사이에 공간을 지정한다.

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

text direction

요소의 텍스트 방향을 바꾼다

This is the default text direction.

This is right-to-left text direction.

p {
    direction: rtl;
}

word spacing

word-spacing은 텍스트 안에 있는 단어 사이에 공간을 지정한다.

This is heading 1

This is heading 2

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

text shadow

text-shadow는 텍스트에 그림자를 더해준다.

값은 3개가 오는데 순서대로 수평 그림자, 수직 그림자, 그림자의 색이다.

Text-shadow effect

h1 {
    text-shadow: 3px 2px red;
}

https://www.w3schools.com/css/css_text.asp