웹 페이지에서 텍스트의 단어 사이 간격을 조절하고 싶다면 CSS의 word-spacing 속성을 사용하면 됩니다. 이 속성을 활용하면 문장 내 단어와 단어 사이의 거리를 자유롭게 넓히거나 줄일 수 있어, 가독성을 높이거나 디자인 의도에 맞는 타이포그래피를 구현할 때 매우 유용합니다.
word-spacing 속성 문법
word-spacing 속성에 사용할 수 있는 값은 다음과 같습니다.
word-spacing: normal | length | initial | inherit;
속성 값 설명
- normal – 브라우저의 기본 단어 간격을 적용합니다. (기본값)
- length – px, em, cm 등 원하는 길이 단위로 간격을 직접 지정합니다. 음수 값도 사용할 수 있으며, 이 경우 간격이 좁아집니다.
- initial – 해당 속성을 기본값으로 되돌립니다.
- inherit – 부모 요소의 word-spacing 값을 상속받습니다.
예제 1: normal과 px 값 비교
먼저 기본 간격(normal)과 픽셀 단위(10px)를 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
word-spacing: normal;
}
p.demo2 {
word-spacing: 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>실행 결과
위 예제에서 첫 번째 문단은 기본 간격이 유지되고, 두 번째 문단은 단어 사이가 10px만큼 넓어진 것을 확인할 수 있습니다.
예제 2: cm와 px 단위 활용하기
이번에는 더 큰 간격을 주기 위해 센티미터(cm) 단위와 픽셀(px) 단위를 함께 사용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
word-spacing: 3cm;
}
p.demo2 {
word-spacing: 40px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>실행 결과
3cm가 적용된 문단은 간격이 매우 크게 벌어지고, 40px가 적용된 문단도 기본값보다 훨씬 넓은 간격을 보여줍니다. 이처럼 다양한 길이 단위를 상황에 맞게 선택하여 사용할 수 있습니다.
정리
CSS의 word-spacing 속성 하나만으로도 텍스트의 단어 간격을 손쉽게 제어할 수 있습니다. 반응형 웹에서는 em이나 rem 같은 상대 단위를 사용하면 폰트 크기 변화에 따라 자연스럽게 간격이 조절되므로 실무에서 더욱 권장됩니다.