글자 사이 간격, 단어 사이 간격 - letter-spacing, word-spacing

텍스트 자간을 조절해보십시오. 강조하고 싶은 글자나 큰 글자들은 글자 사이
간격을 조절해 여유있게 표시하면 읽기 편합니다.

텍스트 간격 조절하기

letter-spacing 속성은 낱 글자 사이의 간격을 조절하고,

word-spacing 속성은 단어와 단어 사이의 간격을 조절합니다.

기본형

letter-spacing : normal | value;
word-spacing : normal | value;

normal : 기본값입니다.

value : 간격의 크기를 지정합니다.

letter-spacing

값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을
변화시키면 단어 사이의 간격도 변합니다.

<h2>letter-spacing</h2>
<p class="a">Lorem Ipsum Dolor</p>
<p class="b">Lorem Ipsum Dolor</p>
<p class="c">Lorem Ipsum Dolor</p>

.a {
  letter-spacing: -5px;
}
.b {
  letter-spacing: 0px;
}
.c {
  letter-spacing: 5px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="441"
data-pen-title="CSS 글자 사이 간격 letter-spacing 예제"
data-slug-hash="RwRbGZP"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

속성 값에는 음수를 넣을 수 있습니다. 하지만 음수를 값으로 하는 경우 글자가
겹칠 수 있습니다.

word-spacing

값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 단어 사이의 간격을
변화시켜도 글자 사이의 간격은 변하지 않습니다.

<h2>word-spacing</h2>
<p class="d">Lorem Ipsum Dolor</p>
<p class="e">Lorem Ipsum Dolor</p>
<p class="f">Lorem Ipsum Dolor</p>

.a {
  word-spacing: -20px;
}
.b {
  word-spacing: 0px;
}
.c {
  word-spacing: 20px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="441"
data-pen-title="CSS 단어 사이 간격 word-spacing 예제"
data-slug-hash="dyXbpRx"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.