[CSS 입문] 문단 스타일

1. decoration 속성 - 글자 쓰기 방향 지정

decoration : ltr | rtl

2. text-align 속성 - 텍스트 정렬

속성 값	설명
start	현재 택스트 줄의 시작 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.
left	왼쪽에 맞추어 문단을 정렬한다.
right	오른쪽에 맞추어 문단을 정렬한다.
center	가운데에 맞추어 문단을 정렬한다.
justify	양쪽에 맞추어 문단을 정렬한다.
match-parent	부모 요소를 따라 문단을 정렬한다. 단, 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 left-to-right인지, right-to-left인지에 따라 left나 right값으로 계산해 적용한다.

3. text-justify 속성 - 정렬 시 공백 조절

속성 값	설명
auto	웹 브라우저에서 자동으로 지정한다.
none	정렬하지 않는다.
inter-word	단어 사이의 공백을 조절해 정렬한다.
distribute	인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다.

4. text-indent 속성 - 텍스트 들여 쓰기

.indent1 {text-indent:15px;}  /* 15px만큼 들여쓰기 */

.indent2 {text-indent:5%;}  /* 5%만큼 들여쓰기 */

5. line-height 속성 - 줄 간격 조절

line-height : normal | <숫자> | <크기> | <백분율> | ingerit

보통 줄 간격은 글자 크기의 1.5~2배정도가 적당합니다.

6. text-overflow 속성 - 넘치는 텍스트 표시

속성 값	설명
clip	넘치는 텍스트를 자른다.
ellipsis	말 줄임표(…)로 잘린 텍스트가 있다고 표시한다.

text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space : nowrap 속성을 함께 사용했을 경우에만 적용됩니다.

.content {

      border:1px solid #ccc;  /* 테두리 */

      width:300px;  /* 단락의 너비 */

      white-space:nowrap;  /* 줄바꿈 없음 */

      overflow:hidden;  /* 넘치는 부분 감춤 */

      text-overflow:ellipsis;  /* 말줄임표 */

    }

<출처> Do it! HTML5+CSS3 웹 표준의 정석