8-7. CSS 속성 : 단어 관련 {white-space: ...; / letter-spacing: ...; / word-spacing: ...; / word-break: ...; / word-wrap: ...;}

8-7. CSS 속성 : 단어 관련

 

 가. 단어 관련 속성

 

  - 단어의 공백, 단어 사이의 간격 및 줄 바꿈 등을 제어할 수 있는 속성

 

 나. 단어 관련 속성의 종류

  

  ■ white-space 속성

  ■ letter-spacing 속성

  ■ word-spacing 속성

  ■ word-break 속성

  ■ word-wrap 속성

 

  1) white-space 속성

 

   - 요소 안에 공백을 어떻게 처리할지 지정하는 속성

   - 기본값 : normal

 

속성값	공백	개행	자동 줄바꿈
normal	X	X	○
nowrap	X	X	X
pre	○	○	X
pre-line	X	○	○
pre-wrap	○	X	○

 

  2) letter-spacing 속성

 

   - 자간을 지정하는 속성

   - 기본값 : normal

 

속성값	내용
normal	기본값
px	길이만큼 자간을 지정하며, 음수로도 가능

 

  3) word-spacing 속성

 

   - 단어의 사이의 간격을 지정하는 속성

   - 기본값 : normal

 

속성값	내용
normal	기본값
px	길이만큼 단어 사이의 간격을 지정하며, 음수로도 가능

 

  4) word-break 속성

 

   - 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점)를 지정하는 속성

   - 기본값 : normal

 

속성값	내용
normal	ㆍ공백 또는 하이픈(-), 한중일 언어 같은 경우는 음절을 각 중단점으로 지정함 ㆍ만약, 단어가 길어서 중단점이 영역 바깥에 있으면 영역 바깥까지 단어가 표현됨
keep-all	ㆍ공백 또는 하이픈(-), 한중일 언어 같은 경우 그 외 기호까지 각 중단점으로 지정함 ㆍ만약, 단어가 길어서 중단점이 영역 바깥에 있으면 영역 바깥까지 단어가 표현됨
break-all	ㆍ음절을 중단점으로 지정함 ㆍ모든 글자가 영역을 벗어나지 않고 강제로 개행됨 ㆍ단어가 끝나지 않아도 강제적으로 중간에 끊어 개행됨

 

 5) word-wrap 속성

 

   - 요소(영역, 구획)를 벗어난 단어의 줄바꿈을 지정하는 속성

   - 기본값 : normal

 

속성값	내용
normal	ㆍ중단점에서 개행 ㆍ만약, 단어가 길어서 중단점이 영역 바깥에 있으면 영역 바깥까지 단어가 표현됨
break-word	ㆍ모든 글자가 영역을 벗어나지 않고 강제로 개행됨 ㆍ단어가 끝나지 않아도 강제적으로 중간에 끊어 개행됨