CSS 스타일 요소 : 글자 자간(간격)을 조절하는 letter-spacing 사용 방법
2018. 10. 19. 00:06
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다.
내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요?
아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다.
이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다.
보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다.
그러면 마이너스 값도 적용될까요?
그렇습니다. 아주 잘 적용됩니다.
지금까지 살펴보신 것 처럼 letter-spacing 은 자간 조절이 가능하며, 줄일수도 반대로 늘릴수도 있습니다. 원하는 데이터 값을 숫자로 입력하여 적용시키면 됩니다.
이렇게 잘 적용됨을 확인할 수 있습니다. 실수로 오타가 하나 생겼네요. 양해 부탁드립니다. 오늘은 CSS 스타일 요소 중, 자간을 변경하는 방법에 대해 배웠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
