텍스트 자간을 조절해보십시오. 강조하고 싶은 글자나 큰 글자들은 글자 사이 간격을 조절해 여유있게 표시하면 읽기 편합니다.
텍스트 간격 조절하기
- 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;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
속성 값에는 음수를 넣을 수 있습니다. 하지만 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.
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;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.