1. color 속성
-
color 속성은 텍스트의 색상을 설정한다. 웹 페이지에서 텍스트의 기본 색상은 검정색이다.
-
<body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용되지만, 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이<body>태그에 명시된 속성값보다 우선 적용된다.
body {
color: red;
}
p {
color: blue;
}
2. direction
- direction 속성은 텍스트가 써지는 방향을 설정한다. 웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써진다.
1) ltr(left-to-right)
- 기본 값으로 텍스트가 왼쪽에서 오른쪽 방향으로 써진다.
2) rtl(right-to-left)
- 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써진다.
.rightToLeft {
direction: rtl;
}
3. letter-spacing 속성
- letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정한다.
.decLetterSpacing {
letter-spacing: -3px;
}
.incLetterSpacing {
letter-spacing: 10px;
}
4. word-spacing 속성
- letter-spacing 속성과는 달리 word-spacing 속성은 문자 간의 간격이 아닌 텍스트 내에서 단어 사이의 간격을 설정한다.
.decWordSpacing {
word-spacing: -3px;
}
.incWordSpacing {
word-spacing: 10px;
}
5. text-indent 속성
-
text-indent 속성은 단락의 첫 줄에 들여쓰기를 설정한다. 웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않다.
-
값이 양수이면 들여쓰기, 음수이면 내어쓰기가 된다.
.paraIndent {
text-indent: 30px;
}
6. text-align 속성
-
text-align 속성은 텍스트의 수평 방향 정렬을 설정한다.
-
text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용된다.
1) left
- 텍스트를 좌측 정렬한다.
h2 {
text-align: left;
}
2) right
- 텍스트를 우측 정렬한다.
h2 {
text-align: right;
}
3) center
- 텍스트를 가운데 정렬한다.
h2 {
text-align: center;
}
7. text-decoration 속성
- text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용한다.
1) overline
- 텍스트 위에 선을 만든다.
h2 {
text-decoration: overline;
}
2) line-through
- 텍스트 중간에 선을 만든다.
h2 {
text-decoration: line-through;
}
3) underline
- 텍스트 아래에 선을 만든다.
h2 {
text-decoration: underline;
}
4) none
- 링크(link)가 설정된 텍스트의 밑줄을 제거한다.
a {
text-decoration: none;
}
8. text-transform 속성
-
text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정한다.
-
이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시키며, 단어의 첫 문자만을 대문자로 변경시킬 수도 있다.
-
다만, text-transform 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용된다.
1) uppercase
- 모든 영문자를 대문자로 변경한다.
h2 {
text-transform: uppercase;
}
2) lowercase
- 모든 영문자를 소문자로 변경한다.
h2 {
text-transform: lowercase;
}
3) capitalize
- 단어의 첫 문자만 대문자로 변경한다.
h2 {
text-transform: capitalize;
}
9. line-height 속성
- line-height 속성은 텍스트의 줄 간격을 설정한다.
.narrowLineHeight {
line-height: 0.8;
}
.wideLineHeight {
line-height: 1.8;
}
10. text-shadow 속성
- text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정한다.
p {
text-shadow: 2px 2px lightgray;
}
11. text-overflow 속성
-
text-overflow 속성은 콘텐츠 영역을 벗어난 텍스트를 어떻게 표현할지를 설정한다.
-
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(...)를 사용하여 표현할 수도 있다.
p {
border: 1px solid black;
white-space: nowrap;
width: 250px;
overflow: hidden;
}
#p_01 {
text-overflow: clip;
}
#p_02 {
text-overflow: ellipsis;
}
12. word-wrap 속성
-
word-wrap 속성은 콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현할 수 있도록 해준다.
-
word-wrap 속성은 영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않는다.
p {
border: 1px solid black;
width: 130px;
}
#p_01, #p_03 {
word-wrap: break-word;
}
13. word-break 속성
-
word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정한다.
-
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있다.
-
word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용된다.
p {
border: 1px solid black;
width: 130px;
}
#p_02 {
word-wrap: break-word;
}
#p_03 {
word-break: break-all;
}
#p_04 {
word-break: keep-all;
}
1. white-space 속성
1. normal
- normal은 요소 안에서 연속된 띄어쓰기, 들여쓰기 줄바꿈 문자가 모두 무시되며, white-space 속성을 별도로 지정해주지 않으면 기본적으로 normal이 적용된다.
div:nth-of-type(1) {
white-space: normal;
}
2. nowrap
-
nowrap으로 설정하게 되면 텍스트가 길어져 부모 요소 안의 가로폭을 넘어가도 자동 줄바꿈이 일어나지 않는다.
-
자동 줄바꿈이 일어나지 않는다는 부분을 제외하고는 normal과 동일하게 작동한다.
div:nth-of-type(1) {
white-space: nowrap;
}
div:nth-of-type(2) {
white-space: nowrap;
overflow: hidden;
}
div:nth-of-type(3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div:nth-of-type(4) {
white-space: nowrap;
overflow-x: auto;
}
