프로그래밍/HTML & CSS

[CSS 기본] 텍스트 관련 스타일 (2)

ITDevStory 2021. 11. 14. 18:57
[프로그래밍/HTML & CSS] - [CSS 기본] 텍스트 관련 스타일 (1)

 

color     글자 색 지정

 

text-decoration     텍스트에 줄 표시/제거
text-decoration: none | underline | overline | line-through
속성 값 설명
none 밑줄 표시 X
underline 밑줄 표시
overline 영역 위로 선 그리기
line-through 취소선 그리기

 

text-transform     텍스트 대/소문자 변환
text-transform: none | capitalize | uppercase | lowercase | full-width
속성 값 설명
none 변환 X
capitalize 첫 번 째 글자를 대문자로 변환
uppercase 모든 글자를 대문자로 변환
lowercase 모든 글자를 소문자로 변환

 

 

text-shadow     그림자 효과
text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

white-space     공백 처리
white-space: normal | nowrap | pre | pre-line | pre-wrap
속성 값 설명
normal 여러 개의 공백을 하나로 표시
nowrap 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 한 줄로 표시
pre 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 한 줄로 표시
pre-line 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로  줄을 바꿔 표시
pre-wrap 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시

 

letter-spacing & word-spacing     텍스트 간격 조절 
letter-spacing: normal | <크기>;
word-spacing: normal | <크기>;