CSS word-spacing 속성이란?
CSS의 word-spacing 속성은 요소 내부에서 단어와 단어 사이의 간격(어간)을 지정하는 데 사용됩니다. 텍스트 가독성을 높이거나 디자인 의도에 맞게 문장의 밀도를 조절할 때 유용하게 활용됩니다.
기본 문법
CSS word-spacing 속성의 기본 문법은 다음과 같습니다.
Selector {
word-spacing: /*값*/;
}word-spacing 속성에 사용할 수 있는 주요 값은 다음과 같습니다.
- normal — 기본값으로, 해당 폰트에서 정의한 표준 단어 간격이 적용됩니다.
- 길이 단위(px, em, rem 등) — 기본 간격에 추가되는 공간을 지정합니다. 음수 값을 사용하면 단어 간격이 더 좁아집니다.
- 백분율(%) — 상대적인 크기로 간격을 지정할 수 있습니다.
예제 1: px 단위로 단어 간격 조절하기
다음 예제는 word-spacing 속성을 30px로 설정하여 단어 사이의 간격을 넓힌 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
padding: 10px;
background-color: salmon;
}
div > div {
word-spacing: 30px;
width: 340px;
height: 140px;
border-radius: 5%;
box-shadow: inset 0 0 15px blueviolet;
}
</style>
</head>
<body>
<div>
<div>
Magento is an open source E-commerce software, created by Varien Inc., which is useful for
online business. It has a flexible modular architecture and is scalable with many control
options that is helpful for users.</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
예제 2: em 단위로 단어 간격 조절하기
다음 예제는 인용문(q 태그)에 word-spacing 속성을 6em으로 적용하여 단어 간격을 크게 확장한 사례입니다. em 단위는 부모 요소의 글꼴 크기를 기준으로 하므로, 반응형 레이아웃에서 상대적인 간격 조절에 적합합니다.
<!DOCTYPE html>
<html>
<head>
<style>
q {
display: flex;
padding: 10px;
word-spacing: 6em;
background-color: orange;
font-size: 1.2em;
}
</style>
</head>
<body>
<h2>What is Java?</h2>
According to Java's official documentation,
<hr>
<q cite="https://www.java.com/en/download/faq/whatis_java.xml">Java is a programming language and computing platform first released by Sun Microsystems in 1995.</q>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
