[CSS] 텍스트 스타일 알아보기 (TEXT)

이전에 포스트한 적 있지 않나? 라고 생각하실 수 있겠지만
폰트 스타일과 텍스트 스타일은 다른 개념입니다
폰트 스타일은 글꼴, 폰트와 관련된 개념이였다면
텍스트 스타일은 글자, 단어그리고 문단과 관련된 개념입니다

 

텍스트 스타일 관련 속성

1. color

글자에 색을 지정하는 속성

 

기본 문법 예시

color : color-name | 16진수 | rgb | hsl

 

2. text-decoration

텍스트에 장식줄 표시하는 속성

 

기본 문법 예시

text-decoration : <text-decoration-line> <text-decoration-color> <text-decoration-style> <text-decoration-thickness>

 

속성	기능	속성 값	기능	기타
text-decoration-line	선의 위치 지정	none	밑줄 없음	기본값
		underline	밑줄 표시	링크 기본값
		overline	윗줄 표시
		line-through	가로지르는(취소줄) 표시
text-decoration-color	선의 색 지정	컬러 지정		미설정 시 글자 색 상속
text-decoration-style	선의 스타일 지정	solid	직선	기본 값
		double	두 줄
		dotted	동그란 점 선
		dashed	대쉬선
		wavy	물결선
text-decoration-thickness	선의 두께 지정	px, %		미설정 시 1px

TIP!
text-decoration-line 속성은 중복 작성이 가능합니다 ex) text-decoration : underline overline
해당 속성은 웹 접근성과 관련이 없습니다

 

3. text-transform

텍스트의 대소문자를 변환하는 속성

 

기본 문법 예시

text-transform : none | capitalize | uppercase | lowercase

 

속성 값	기능	기타
none	변환 하지 않음	기본값
capitalize	첫 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 변환
lowercase	모든 글자를 소분자로 변환

 

4. text-shadow

글자에 그림자효과를 설정하는 속성

 

기본 문법 예시

text-shadow : none | <가로거리> <세로 거리> <번짐 정도> <색상>

 

속성 값	기능	기타
none	그림자 없음	기본값
*가로 거리	텍스트와 그림자 사이의 가로 거리	양수 값 : 글자의 오른쪽 음수 값 : 글자의 왼쪽
*세로 거리	텍스트와 그림자 사이의 세로 거리	양수 값 : 글자의 아래쪽 음수 값 : 글자의 위쪽
번짐 정도	그림자가 번지는 정도	양수 값 : 글자 밖 음수 값 : 글자 안
색상	그림자 색상	현재 글자색이 기본값

TIP!
가로거리와 세로거리는 필수로 입력해야 합니다
각 속성값은 띄어쓰기로 구분하며 순서대로 작성 하여야 합니다
속성값들을 쉽표(,)로 구분하여 주면 중첩 지정이 가능합니다
앞에서 부터 차례대로 효과가 표시됩니다

texrt-shadow 더 알아보기 : 그림자 효과 만들기 (Text-Shadow, Box-Shadow)

 

5. white-space

글자의 공백 처리방식을 지정하는 속성

 

기본 문법 예시

white-space : normal | nowrap

 

속성 값	기능	기타
normal	여러개의 공백을 하나로 표시	기본값
nowrap	여러개의 공백을 하나로 표시하고 줄 바꿈 없이 한 줄로 표시

 

6. letter- spacing

자간 (텍스트 간격) 조절하기

단어에서 글자 사이의 간격 조절

 

기본 문법 예시

letter-spacing : narmal | <크기>

 

7. word-spacing

자간 (텍스트 간격) 조절하기

단어와 단어 사이의 간격 조절

 

기본 문법 예시

word-spacing : narmal | <크기>

TIP!
주로 letter-spacing 방식을 사용합니다
바뀌는 글꼴에 맞춰 자간이 유지되도록 em이나 rem을 사용하여 지정해주는 것이 좋습니다

 

8. word-wrap

영역을 넘어가는 긴 단어를 다음 줄로 넘겨쓰도록 지정하는 속성

 

기본 문법 예시

word-wrap : narmal | break-word

 

속성 값	기능	기타
normal	한 단어는 영역을 넘어가도 끊지 않음	기본값
break-word	영역을 넘어가면 잘라서 다음줄에 표시

 

9. word-break

긴 단어를 표시 할 때 단어를 분리하는 방식을 지정하는 속성

 

기본 문법 예시

word-break: normal | break-all | keep-all | break-word

 

속성 값	기능	기타
normal	기본 줄 바꿈 규칙 사용	기본값
break-all	오버플로 방지를 위해 어떤 단어 사이에서도 줄 바꿈 가능
keep-all	한 단어가 끊기지 않게 줄바꿈
break-word	normal값과 같은 결과

 

---

관련 포스트

폰트 스타일 알아보기 (Fonts)

[CSS] 폰트 스타일 알아보기 (Fonts)

텍스트 스타일 알아보기 2 (TEXT)

[CSS] 텍스트 스타일 알아보기 2 (TEXT)

---

 

참조 자료

https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

https://developer.mozilla.org/ko/docs/Web/CSS/word-break