텍스트 속성의 CSS (두번째)(+문단 속성)

letter-spacing

- 글자 간격을 줄이거나 늘릴 수 있다.

p { letter-spacing: 10px }

 

line-height

- 줄 높이를 정할 수 있다.

p { line-height: 1.5 }
p { line-height: 10px }

 

text-align

- 텍스트의 위치(왼쪽, 중간, 오른쪽)를 정할 수 있다.

p { text-align: left; }
p { text-align: center; }
p { text-align: right; }

 

text-decoration

- 텍스트를 장식 할 수 있다.

 

line-through: 텍스트 중간에 선이 그어져서 보인다. 취소선이라고도 한다.

overline: 텍스트 밑줄

dashed: 텍스트 굵은 점선으로 밑줄

dotted: 텍스트 점선으로 밑줄

double: 텍스트 두줄로 밑줄

wavy: 텍스트 웨이브로 밑줄 

 

p { text-decoration: line-through; }
p { text-decoration: overline; }
p { text-decoration: underline; }
p { text-decoration: dashed; }
p { text-decoration: dotted; }
p { text-decoration: double; }
p { text-decoration: wavy; }

 

text-indent

- 텍스트를 오른쪽으로 들여쓸 수 있다.

p { text-indent: 10px; }

 

text-shadow

- 텍스트에 그림자를 넣는다.

 

offset-x : 그림자의 수평 거리를 지정 (필수)
offset-y : 그림자의 수직 거리를 지정 (필수)
blur-radius : 흐림 정도를 정한다. (선택사항으로 지정된 값이 없으면 0)
color : 색상

p { text-shadow: 3px 3px 3px gray }

 

text-overflow

clip: 텍스트를 잘라낸다.

ellipsis: 텍스트 끝부분을 ...으로 처리한다.

 

p { text-overflow: clip; }
p { text-overflow: ellipsis; }

 

vertical-align

- 수직 정렬할 수 있다.

 

top: 라인 박스 중에 가장 상단에 위치 

middle: 부모 요소의 중앙 위치

bottom: 라인 박스 중에 맨 아래 위치

baseline: 부모 요소의 기준선에 맞춘다. ( 기본값 )

sub: 부모 요소의 하첨자라인에 정렬

super: 부모 요소의 상첨자라인에 정렬

text-bottm: 부모요소 콘텐츠영역의 하단에 정렬

text-top: 부모요소 콘텐츠영역의 상단에 정렬

 

* 라인박스: 인라인의 가장 상단과 하단을 포함하고 있는 박스

p { vertical-align: top; }
p { vertical-align: middle; }
p { vertical-align: bottom; }
p { vertical-align: baseline; }
p { vertical-align: sub; }
p { vertical-align: super; }
p { vertical-align: text-bottom; }
p { vertical-align: text-top; }

 

white-space

nowrap: 길어진 텍스트를 줄바꿈하는 걸 막는다.

pre: 모든 공백을 다 표시해주며, 길어져도 줄바꿈이 되지 않는다.

pre-line: 긴 공백은 한 공백으로 표시하며, 길어질 경우, 줄바꿈이 된다.

pre-wrap: 모든 공백을 다 표시해주며, 길어질 경우, 줄바꿈이 된다.

 

p { white-space: nowrap; }
p { white-space: pre; }
p { white-space: pre-line; }
p { white-space: pre-wrap; }

 

word-spacing

- 단어 간격을 늘이거나 줄일 수 있다.

p { word-spacing: 10px }