#04 CSS text 속성

 

text-decoration

• 문자에 밑줄이나 취소선을 넣을 수 있는 속성
• 한 번에 두 개 이상의 값을 줄 수 있다.
• 스타일, 컬러, 두께를 지정할 수 있다.

 

- 축약형

• line 속성은 필수이며, 나머지는 필요한 속성만 선택하여 적용할 수 있다.

text-decoration : line style color thickness;

 

- line 속성 값

• none : 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

 

- style 속성 값

• solid : 실선 (default)
• double : 이중선
• dotted : 점선
• dashed : 파선
• wavy : 물결선

selector {text-decoration: line-through;}
selector {text-decoration: underline overline orange;}
selector {text-decoration: underline solid red 5px;}
selector {text-decoration: underline double blue;}
selector {text-decoration: underline dotted #097c25;}
selector {text-decoration: underline dashed #ff008c;}
selector {text-decoration: underline wavy rgb(100, 0, 255);}

---

 

---

letter-spacing

• 글자의 간격을 지정하는 속성
• 음수(-)로 지정하면 간격이 좁아지고 양수(+)로 지정하면 간격이 늘어난다.

selector {letter-spacing: -1px;}
selector {letter-spacing: normal;}
selector {letter-spacing: 5px;}

---

 

---

word-spacing

• 단어의 간격을 지정하는 속성
• 음수(-)로 지정하면 간격이 좁아지고 양수(+)로 지정하면 간격이 늘어난다.

selector {word-spacing: -3px;}
selector {word-spacing: normal;}
selector {word-spacing: 10px;}

---

 

---

text-transform

• 영문의 대문자나 소문자를 변경하는 속성

 

- 속성 값

• none : 없음
• capitalize : 단어의 첫 번째 문자를 대문자로 변경
• uppercase : 모든 글자를 대문자로 변경
• lowercase : 모든 글자를 소문자로 변경

selector {text-transform: none;}
selector {text-transform: capitalize;}
selector {text-transform: uppercase;}
selector {text-transform: lowercase;}

---

 

---

text-indent

• 문단의 들여 쓰기 값을 지정하는 속성
• 음수(-)로 지정하면 내어 쓰기가 되고, 양수(+)로 지정하면 들여 쓰기가 된다.

selector {text-indent: -20px;}
selector {text-indent: 20px;}

---

 

---

text-align

• 문단의 정렬을 지정하는 속성

 

- 속성 값

• left : 왼쪽 정렬 (default)
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양 끝 정렬

selector {text-align: left;}
selector {text-align: right;}
selector {text-align: center;}
selector {text-align: justify;}

---

 

---

vertical-align

• 요소의 수직 정렬을 조정하는 속성
• 인라인 요소의 높이가 서로 다를 때나 테이블 사용 시 주로 사용한다.
• 부모 요소의 베이스라인을 기준으로 음수(-)로 지정하면 아래로 정렬되고, 양수(+)로 지정하면 위로 정렬된다.

 

- 속성 값

• baseline : 텍스트의 베이스라인을 기준으로 정렬 (default)
• sub : 아래 첨자
• super : 윗 첨자
• top : 해당 줄의 높이 기준으로 맨 위에 정렬
• text-top : 부모 요소의 글자를 기준으로 맨 위에 정렬
• bottom : 해당 줄의 높이 기준으로 맨 아래 정렬
• text-bottom : 부모 요소의 글자를 기준으로 맨 아래 정렬
• middle : 부모 요소의 베이스라인을 기준으로 가운데 정렬

selector {vertical-align: top;}
selector {vertical-align: middle;}
selector {vertical-align: bottom;}

 

---

white-space

• 줄 바꿈에 대한 설정을 지정하는 속성

 

- 속성 값

• normal : 추가 공백을 표시하지 않고, 영역 내에서 자동 줄 바꿈 된다
• nowrap : 추가 공백을 표시하지 않고, 콘텐츠가 영역 밖으로 초과되어도 줄 바꿈 하지 않는다
• pre : 줄 바꿈 및 추가 공백을 표시하며, 콘텐츠가 영역 밖으로 초과되어도 줄 바꿈 하지 않는다
• pre-line : 줄 바꿈을 표시하지만 추가 공백을 표시하지 않고, 영역 내에서 자동 줄 바꿈 된다
• pre-wrap : 줄 바꿈 및 추가 공백을 표시하며, 영역 내에서 자동 줄 바꿈 된다

selector {white-space: normal;}
selector {white-space: nowrap;}
selector {white-space: pre;}
selector {white-space: pre-line;}
selector {white-space: pre-wrap;}

 

<div>     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

---