CSS 단어와 텍스트 간격을 조절하는 word-spacing 그리고 letter-spacing

텍스트가 모여 단어가 되고, 단어가 모여 문장이 됩니다. 그리고 문장이 모여 문단을 이루죠. 오늘 알아볼 word-spacing과 letter-spacing 은 각각 단어와 텍스트의 간격에 영향을 주는 CSS 스타일옵션입니다. 다시 한번 깔끔하게 정리하고 바로 예제를 살펴보겠습니다.

 

word-spacing : 단어 사이의 간격 조절

letter-spacing : 텍스트 사이의 간격 조절

 

예제

See the Pen word-spacing, letter-spacing by rgy0409 (@rgy0409) on CodePen.

위의 예제에서는 무작위로 생성한 한글입숨 문단이 다섯개 있습니다. 첫번째는 word-spacing이나 letter-spacing의 스타일이 없는 보통의 문단입니다. 두번째는 word-spacing이 10px 적용되었으며 세번째는 letter-spacing이 10px 적용되었습니다. 각자 살펴보니 어떤가요? 확실한 차이가 느껴지죠?

 

입력하는 값은 자유롭습니다. px를 사용해도 되며 rem, em같은 단위를 사용해도 상관없습니다. 또한 양수와 음수도 사용 가능합니다. 만약 letter-spacing에 음의 정수를 사용한다면 결과는 어떨까요? 텍스트들이 심하게 달라붙게 될 것입니다. 음의값이 커질수록 텍스트는 서로 겹치게 될겁니다. word-spacing 또한 마찬가지 결과가 나타날 것입니다. 단어들끼리 겹치게 되겠죠. 그 예제가 4번과 5번 문단입니다. 5번의 경우는 거의 알아볼 수 없는 수준이로군요. 따라서 이 두개의 스타일에는 음수를 사용하는일은 거의 없습니다. 끝.