텍스트에 css 적용하기 - color, text-decoration, letter-spacing, word-spacing

color 속성 (글자 색 지정하기)

글자 색을 정의하는 속성입니다.

주의할 점은, font-color가 아니라 그냥 color가 맞는 문법이라는 점입니다.

보통 #FFFFFF 형식의 16진수 색상 코드를 많이 사용합니다.

예) red라는 이름의 클래스를 가진 글자 색을 빨간색으로 지정하는 코드

.red {
color: #FF0000;
}

text-decoration 속성 (텍스트에 줄 표시)

글자에 선을 표시하는 속성입니다.

• none: 밑줄을 표시하지 않습니다 (기본값)
• underline: 밑줄을 표시합니다.
• overline: 영역 위에 선을 그립니다.
• line-through: 영역을 가로지르는 취소선을 그립니다.

예) uline이라는 이름의 클래스를 가진 글자에 밑줄을 표시하는 코드

.uline {
text-decoration: underline;
}

letter-spacing, word-spacing 속성 (텍스트 간격 조절하기)

글자-글자 또는 단어-단어 사이의 간격을 조절하는 속성입니다.

간격을 나타내는 단위로는 rem, rm, px 등이 있습니다.

예) h1 태그 내의 글자 간격 크기를 1rem으로, 단어 간격 크기를 3px로 설정하는 코드

h1 {
letter-spacing: 1rem;
word-spacing: 3px;
}