텍스트 관련 스타일- 문단

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 글자 쓰기 방향 지정 - direction
• 2) 텍스트 정렬 - text-align
• 3) 정렬 시 공백 조절 - text-justify
• 4) 텍스트 들여 쓰기 - text-indent
• 5) 줄 간격 조절 - line-height
• 6) 넘치는 텍스트 표기하기 - text-overflos

 

문단 스타일

1) 글자 쓰기 방향 지정 - direction

선택자 { direction: ltr 또는 rtl}
//ltr : left to right
//rtl : right to left

 

 

2) 텍스트 정렬 - text-align

선택자 { text-align: 속성 값 }

속성 값	설명
start, end	현재 텍스트 줄의 시작, 끝 위치에 맞추어 문단을 정렬한다.
left, right, center	왼쪽, 오른쪽, 가운데에 맞추어 문단을 정렬한다.
justify	양쪽에 맞추어 문단을 정렬한다.
match-parent	부모 요소를 따라 문단을 정렬한다.

 

 

3) 정렬 시 공백 조절 - text-justify

text-align속성 값이 justify일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 어색하게 벌어질 수 있는데, text-justify속성을 이용해 그 간격을 조절할 수 있다.

선택자 { text-justify: 속성 값 }

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

 

 

4) 텍스트 들여 쓰기 - text-indent

선택자 { text-indent: 속성 값 }

속성 값	설명
크기+단위	들여 쓸 크기를 지정한다. 음수 값도 사용가능
백분율	부모 요소의 너비를 기준으로 상대적 크기를 지정한다.

 

 

5) 줄 간격 조절 - line-height

선택자 { line-height: normal 또는 숫자 또는 크기 또는 백분율 또는 inherit }

 

 

6) 넘치는 텍스트 표기하기 - text-overflow

• white-space: nowrap으로 지정해 줄 바꿈을 하지 않을 때에 텍스트가 기준선을 벗어나 넘칠 수 있는데, 넘치는 텍스트를 어떻게 처리할 것인지 지정해주는 속성이 text-overflow속성이다.
• 다만, text-overflow속성은 해당 요소에서 overflow속성 값이 hidden이거나 scroll,auto이면서 white-space:nowrap속성을 함께 적용했을 경우에만 적용된다.

선택자 { text-overflow: 속성 값 }

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