CSS속성_단어 관련 속성

CSS에는 앞에서 배운 font와 관련된 텍스트에 대한 속성뿐만아니라, 단어에 대해서 어떻게 표현되게 할지 지정할 수 있습니다. 간단하게 보고가자면, 단어의 공백을 어떻게 처리할지, 단어 사이의 간격을 얼마만큼 가질지, 줄 바꿈이 되는 지점은 어디로 둘지 등을 제어할 수 있습니다.

 

 

white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.

 

속성값(기본값:normal)

1. normal : 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생.

2. nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.

3. pre : 공백과 개행을 표현하고 자동 줄바꿈이 일어나지 않음.

4. pre-line : 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.

5. pre-wrap : 개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

 

 

letter-spacing 속성

자간을 지정하는 속성입니다.

 

속성값(기본값:normal)

1. normal

2. length : 길이만큼 자간을 지정. 음수 허용.

 

 

word-spacing 속성

단어 사이의 간격을 지정하는 속성입니다.

 

속성값(기본값:normal)

1. normal : 중단점은 공백이나 하이픈(-), CJK는 음절.

2. break-all : 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행.

3. keep-all : 중단점은 공백이나 하이픈(-), CJK는 그 외 기호도 포함.

 

 

 

 

word-wrap 속성

요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.

 

속성값(기본값 : normal)

1. normal : 중단점에서 개행.

2. break-word : 모든 글자가 요소를 벗어나지않고 강제로 개행.