CSS 강좌 | 글자 간격 letter-spacing, 단어 간격 word-spacing

Category

글자 간격과 단어 간격

CSS에서 글자 간격은 letter-spacing으로, 단어 간격은 word-spacing으로 정합니다.(글자 간격은 자간이라고도 합니다.)

둘 다 기본값은 normal이고, 길이를 값으로 넣습니다. 값이 커지면 간격이 늘어나고, 값이 작아지면 간격이 줄어듭니다.

특이한 점은 음수를 값으로 넣을 수 있다는 것입니다. 값이 음수일 때는 기본값인 normal보다 간격이 줄어들며, 값이 음수로서 아주 작자다면 글자들이 겹치기도 합니다.

사용하는 글꼴에 따라 다르겠지만, 한글의 경우 글자 간격은 좁히고 단어 간격은 넓히는 게 보통 보기 좋습니다.

줄간격은 line-height로 정합니다.(정확한 의미는 줄높이이지만, 눈에는 줄간격을 조정하는 것처럼 보입니다.)

letter-spacing

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-size: 36px;
      }
      .a {
        letter-spacing: -1px;
      }
      .b {
        letter-spacing: 0px;
      }
      .c {
        letter-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <p class="a">Lorem ipsum dolor sit amet.</p>
    <p class="b">Lorem ipsum dolor sit amet.</p>
    <p class="c">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

word-spacing

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-size: 36px;
      }
      .a {
        word-spacing: -10px;
      }
      .b {
        word-spacing: 0px;
      }
      .c {
        word-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <p class="a">Lorem ipsum dolor sit amet.</p>
    <p class="b">Lorem ipsum dolor sit amet.</p>
    <p class="c">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Created on 2017-12-16 09:53 | Updated on 2017-12-16 09:53