CSS에서 word-spacing 속성은 텍스트 내 단어와 단어 사이의 간격을 조절하는 데 사용됩니다. 이 속성은 일반적인 스타일 지정뿐만 아니라 @keyframes 규칙과 결합하면 부드러운 애니메이션 효과로도 활용할 수 있습니다.
아래 예제는 animation 속성과 @keyframes를 사용하여 word-spacing 값을 3초 주기로 무한 반복하며 변화시키는 방법을 보여줍니다. 애니메이션이 진행되는 동안 단어 사이의 간격이 점차 넓어졌다가 다시 좁아지는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background: orange;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
word-spacing: 30px;
}
}
</style>
</head>
<body>
<h1>CSS word-spacing 속성</h1>
<div>
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
</div>
</body>
</html>코드 설명
위 코드의 핵심 요소를 살펴보면 다음과 같습니다.
- animation: myanim 3s infinite; — div 요소에 'myanim'이라는 이름의 애니메이션을 적용하고, 한 사이클의 지속 시간을 3초로 설정하며 무한히 반복되도록 지정합니다.
- @keyframes myanim { 50% { word-spacing: 30px; } } — 애니메이션 중간 지점(50%)에서 word-spacing 값이 30px가 되도록 정의합니다. 시작(0%)과 끝(100%)에는 별도의 값이 없으므로 기본값에서 30px까지 늘어났다가 다시 기본값으로 돌아오는 왕복 움직임이 만들어집니다.
활용 팁
word-spacing은 px, em, rem 등 다양한 단위를 지원합니다. 반응형 디자인에서는 상대 단위인 em이나 rem을 사용하면 폰트 크기에 따라 자연스럽게 간격이 조절됩니다. 또한 음수 값을 사용하면 단어 간격을 좁힐 수 있어, 타이포그래피 강조 효과나 마퀴(marquee) 스타일의 텍스트 연출에도 응용할 수 있습니다.