CSS의 word-spacing 속성을 정의하면 단어와 단어 사이의 공백(여백) 크기를 원하는 만큼 설정할 수 있습니다. 기본값은 normal이며, cm, px, em 등 다양한 단위를 사용해 간격을 지정할 수 있습니다.
아래 예제들을 통해 CSS word-spacing 속성의 실제 사용 방법을 살펴보겠습니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
padding: 2%;
background-color: mediumorchid;
color: ivory;
word-spacing: 2.2cm;
}
div:last-of-type {
word-spacing: normal;
}
</style>
</head>
<body>
<div>I Don't Care! I Love It!</div>
<div>I Don't Care! I Love It!</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
첫 번째 div 요소에는 word-spacing: 2.2cm가 적용되어 단어 사이 간격이 넓어지고, 두 번째 div 요소에는 :last-of-typenormal 값이 적용되어 기본 간격이 유지됩니다.
예제 2
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2%;
padding: 2%;
background-color: azure;
word-spacing: 2.2cm;
}
article:last-of-type {
word-spacing: normal;
}
</style>
</head>
<body>
<article>tldr; this article doesn;t mean anything</article>
<article>0123456789 is not a phone number</article>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
정리
word-spacing 속성은 텍스트 가독성을 높이거나 디자인적으로 강조하고 싶을 때 유용하게 활용할 수 있습니다. 음수 값을 사용하면 단어 간격을 좁힐 수도 있으며, 반응형 디자인에서는 em이나 rem 같은 상대 단위를 사용하는 것이 좋습니다.