CSS) letter-spacing, word-spacing

1) letter-spacing

문자의 자간(글자 사이 간격)을 설정

속성 값

값	의미	기본값
normal	단어 사이의 일반 간격	normal
단위	px, em, cm

 

html

<div class="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

css

.div1 {
  font-size:30px;
  letter-spacing: -5px;
}
.div2 {
  font-size:30px;
  letter-spacing: 0px;
}
.div3 {
  font-size:30px;
  letter-spacing: 5px;
}
.div4 {
  font-size:30px;
  letter-spacing: 10px;
}

출력결과

2) word-spacing

단어 사이(띄어쓰기)의 간격 설정

속성 값

값	의미	기본값
normal	단어 사이의 일반 간격	normal
단위	px, em, cm 등 단위로 지정

 

html

<div class="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div><br>
<div class="div4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

css

.div1 {
  word-spacing: 0;
}
.div2 {
  word-spacing: 10px;
}
.div3 {
  word-spacing: 20px;
}
.div4 {
  word-spacing: 30px;
}

출력 결과