[CSS] 글자/단어 사이의 간격 조정하기 (letter-spacing, word-spacing)

글자/단어 사이의 간격 조정하기 (letter-spacing, word-spacing)

들어가며

• 간단하게 CSS 속성을 이용하여 문장 내의 글자(Letter) 또는 단어(Word) 사이의 간격을 조정할 수 있다.

 

방법

글자(Letter) 사이의 간격 조정하기

• letter-spacing 속성을 사용하여 글자(Letter) 사이의 간격을 조정할 수  있다.

body {
    letter-spacing: 5px;    /* 글자 사이 간격 조정하기 */
}

 

단어(Word) 사이의 간격 조정하기

• word-spacing 속성을 사용하여 단어(Word) 사이의 간격을 조정할 수  있다.

body {
    word-spacing: 5px;    /* 단어 사이 간격 조정하기 */
}

 

속성 특징

• 속성값이 커지면 간격이 커진다.
• 속성값에는 음수를 넣을 수 있다.
  • 음수를 값으로 하는 경우 글자가 겹칠 수 있다.
• 글자(Letter) 사이의 간격을 변화시키면, 단어(Word) 사이의 간격도 변한다.
• 단어(Word) 사이의 간격을 변화시키면, 글자(Letter) 사이의 간격은 변하지 않는다.

 

적용 예

See the Pen letter-spacing, word-spacing Example by Sangsoon Kim (@starrykss) on CodePen.