CSS의 word-spacing 속성은 문장 안에서 단어와 단어 사이의 간격을 넓히거나 좁힐 때 사용합니다. 기본값은 normal이며, 원하는 간격을 숫자 값으로 직접 지정할 수도 있습니다.
간격 값에는 px, em 등 다양한 단위를 사용할 수 있고, 음수 값을 입력하면 단어 사이의 간격이 오히려 좁아집니다. 이를 활용하면 텍스트의 가독성을 높이거나 디자인 의도에 맞게 타이포그래피를 세밀하게 조정할 수 있습니다.
예제
다음 코드를 실행하면 word-spacing 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "word-spacing:7px;"> This text is having space between words. </p> </body> </html>
위 예제에서는 단어 사이의 간격이 7px로 설정되어, 일반적인 텍스트보다 단어 간 여백이 넓게 표시됩니다. 값을 변경해 가면서 다양한 간격 효과를 실험해 보세요.