[HTML/CSS] 자간(글자 간격, 단어 간격) 설정하기, letter-spacing, word-spacing

 

지난 번에는 텍스트의 줄높이, 즉 행간격을 조정하는 방법을 알아보았습니다.

[HTML/CSS] 텍스트 줄간격 설정하기 (line-height)

[HTML/CSS] 텍스트 줄간격 설정하기 (line-height)

 

자간 간격 설정하기

자간(글자 간격) 또는 단어 간격을 조정하기 위해서

CSS의 letter-spacing, word-spacing 속성을 사용할 수 있습니다.

 

 

letter-spacing

• 글자 사이의 간격을 조정합니다.
• 양수 값을 사용하면 글자사이의 간격이 더 넓어지고, 음수 값을 사용하면 글자사이의 간격이 더 좁아집니다.
  (글자가 겹칠 수도 있습니다)

 

word-spacing

• 단어 사이의 간격을 조정합니다.
• 양수 값을 사용하면 간격이 더 넓어지고, 음수 값을 사용하면 간격이 더 좁아집니다.

 

 

  예제  

<div class='sample_1'>글자 간격이 10px입니다.</div>
<div class='sample_2'>글자 간격이 -10px입니다.</div>
<div class='sample_3'>단어 간격이 10px입니다.</div>
<div class='sample_4'>단어 간격이 -10px입니다.</div>

.sample_1 {
  letter-spacing: 10px;
}

.sample_2 {
  letter-spacing: -10px;
}

.sample_3 {
  word-spacing: 10px;
}

.sample_4 {
  word-spacing: -10px;
}

예제의 값들을 변경해가면서, 테스트 해보세요.