[CSS] 글자와 글자 사이 간격 속성 letter-spacing

 

 

 

letter-spacing이란?

 

 

여러 홈페이지들을 둘러보다 보면 글자의 간격이 넓어 의도치 않게 다음 줄로 글이 넘어가거나,

글의 간격이 좁아서 읽기에 불편한 웹페이지들도 간혹 존재합니다.

특히, 모바일 페이지는 각 기종마다 화면의 크기가 다르기에 웹페이지를 만든 사람의 의도와는 다르게 CSS가 어긋날 때도 있습니다.

 

이러한 상황일 때 사용하기 좋은 css 속성이 letter-spacing입니다.

letter-spacing 속성은 입력된 단위에 따라 글자간의 간격을 좁히거나 늘려주는 속성입니다.

이번 포스팅에서는 CSS의 속성중 하나인 letter-spacing에 대해서 자세히 알아보도록 하겠습니다.

 

728x90

 

letter-spacing 속성 사용방법

 

 

letter-spacing 속성은 css이기 때문에 style에서 작성해 줍니다.

 

기본적인 사용방법은 'letter-spacing : 숫자 단위'입니다.

숫자 + 단위로 사용할 때, 숫자는 양수와 음수 모두 사용가능하며,

단위는 px(절댓값), em/rem(폰트 사이즈에 따라 유동적), % 등등 대부분의 단위는 다 사용가능합니다.

 

 

letter-spacing 예제

 

<style>
  #ex_1 {
  	letter-spacing:-5px;
  }
  #ex_2 {
  	letter-spacing:0px;
  }
  #ex_3 {
  	letter-spacing:5px;
  }
</style>

<div style="font-size:30px; padding:20px;">
	<p id="ex_1">가나다라마바사</p>
	<p id="ex_2">가나다라마바사</p>
	<p id="ex_3">가나다라마바사</p>
</div>

 

 

간단한 예제 코드를 작성해 보았습니다.

 

div태그 안에 id가 ex_1부터 ex_3까지인 p 태그를 만들어줍니다.

letter-spacing의 값을 ex_1 부터 ex_3까지 다르게 주어서 letter-spacing의 값에 따라 글자의 간격이 변화하는 모습을 볼 수 있게 예제 코드를 작성했습니다.

 

폰트사이즈는 글자가 잘 보일 수 있게 30px로 고정해 두었습니다.

 

반응형

 

 

결과화면

텍스트의 글자 간격 차이를 보여주는 이미지

 

 

결과 값은 위의 이미지처럼 나오게 됩니다.

위의 이미지를 확인해 보면, 글자간격이 숫자의 크기에 따라 늘어나거나 줄어드는 것을 확인할 수 있습니다.

 

 

결론

 

 

이번 포스팅에서는 letter-spacing 속성에 대해서 알아보았습니다.

letter-spacing 속성은 다양하게 활용이 가능한 css 속성입니다.

letter-spacing 속성으로 글자 간격을 좀 더 보기 좋게 만든다면 더 깔끔한 페이지를 만들 수 있을 것입니다.

한정된 공간 안에 긴 글을 한 줄로 다 보이게 하고 싶다면 letter-spacing의 값을 줄여 줄 수 있을 것이고,

반대로 글자 간의 간격을 넓혀서 눈에 잘 보이게 하고, 가독성을 높이고 싶다면, letter-spacing의 값을 늘려서 글자 간격을 넓게 하여 보여 줄 수 있을 것입니다.

 

이 속성과 별개로 word-spacing라는 속성도 존재합니다.

word-spacing는 글자와 글자사이의 간격이 아닌, 단어와 단어사이의 간격을 늘려주는 속성입니다.

 

이번 포스팅을 통해 배운 letter-spacing 속성을 활용하여 예쁘고 깔끔한 웹페이지를 완성해 보시길 바랍니다.