CSS text 속성
1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-indent
6. text-align
7. text-decoration
8. text-transform
9. line-height
10. text-shadow
1. color
- 텍스트의 색상 설정
- 기본 색상 = 검정색
- 각 요소별로 따로 명시된 속성값이 <body> 태그의 속성값보다 우선 적용
body { color: red; }
p { color: maroon; }
2. direction
- 텍스트가 써지는 방향 설정
- left-to-right(ltr) : 왼쪽 -> 오른쪽 (기본)
- right-to-left(rtl) : 오른쪽 -> 왼쪽
.rightToLeft { direction: rtl; }
3. letter-spacing
- 텍스트 내 글자 사이의 간격 설정
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
4. word-spacing
- 텍스트 내 단어 사이의 간격 설정
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
5. text-indent
- 단락의 첫 줄 들여쓰기 여부 설정
.paraIndent { text-indent: 30px; }
6. text-align
- 텍스트의 수평 방향 정렬 설정
- text-direction 속성과 상관없이 우선 적용
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
7. text-decoration
- 텍스트에 여러가지 효과 설정/제거
h2 { text-decoration: overline; } /* 윗줄 */
h3 { text-decoration: line-through; } /* 가운데 줄 */
h4 { text-decoration: underline; } /* 밑줄 */
a { text-decoration: none; } /* 링크 밑줄 제거 */- 링크의 밑줄 제거에 자주 사용
8. text-transform
- 텍스트에 포함된 영문자의 대소문자 설정
- 모든 영문자를 대문자 / 소문자로 변경 => uppercase, lowercase
- 단어의 첫 문자만 대문자로 변경 가능 => capitalize
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
9. line-height
- 텍스트의 줄 간격 설정
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
10. text-shadow
- 텍스트에 간단한 그림자 효과 설정
h2 { text-shadow: 2px 1px #3399CC; }
http://tcpschool.com/css/css_basic_text
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Language > CSS' 카테고리의 다른 글
| [CSS] 기본 속성 - 링크 (0) | 2021.11.01 |
|---|---|
| [CSS] 기본 속성 - 글꼴 (0) | 2021.11.01 |
| [CSS] 기본 속성 - 배경 (0) | 2021.11.01 |
| [CSS] 기본 속성 - 색 (0) | 2021.11.01 |
| [CSS] CSS 적용 (0) | 2021.11.01 |
댓글