어제 오늘 내일

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

IT/HTML&CSS

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

hi.anna 2022. 12. 9. 07:49

 

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

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

 

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

CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다.

hianna.tistory.com

 

자간 간격 설정하기

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

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;
}

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

 

 

 

 

반응형
Comments