<HTML5+CSS3> 텍스트 간격 조절

letter-spacing과 word-spacing속성-텍스트 간격 조절하기

-강조하고 싶은 글자나 <hn>태그를 이용해 크게 표시한 글자들은 글자 사이의 간격을 조절해서 좀 더 여유 있게 표시하면 읽기 편합니다.

letter-spacing : 낱글자와 낱글자 사이의 간격을 조절 (한글자 한글자사이)

word-spacing : 단어와 단어 사이의 간격 조절

ex) .a { letter-spacing:3px; }

 

line-height 속성 – 줄간격 조절하기

-다음 예는 모두 줄간격 12pt, 글자크기는 10pt로 설정했습니다

ex) p { font-size:10pt; line-height:1.2 ; } =>숫자사용

p { font-size:10pt; line-height:120% ; } =>백분율 사용

p { font-size:10pt; line-height:12pt ; } => 크기 값 사용

 

white-space 속성

-텍스트에 함께 입력된 공백을 어ᄄᅠᇂ게 처리할 것인지 지정하는 것.

 

속성 값

(1)normal : 기본 값으로 연속하는 공백을 하나로 처리

(2)nowrap : 연속하는 공백을 하나로 처리후 줄바꿈 X

(3)pre : 연속하는 공백을 원본 그대로 표시 줄바꿈 O 원본그대로.

(4)pre-line : 연속하는 공백을 하나로 취급 줄바꿈 O

(5)pre-wrap : 연속하는 공백을 원본 그대로 표시 줄바꿈 O

 

ex) body { white-space 　: nowrap ; }

->모든 텍스트에서 공백이 길더라고 줄바꿈 없이 한 칸막 인식.