CSS에서 letter-spacing 속성을 사용하면 문자와 문자 사이의 간격(자간)을 자유롭게 설정할 수 있습니다. 이 속성은 텍스트의 가독성을 높이거나 디자인적으로 강조하고 싶은 부분에 활용되며, px, em 등 다양한 단위로 간격 값을 지정할 수 있습니다.
letter-spacing 기본 사용법
아래 예제 코드처럼 인라인 스타일 또는 CSS 클래스에 letter-spacing 속성을 적용하면 됩니다. 다음 코드를 직접 실행해 보면서 글자 간격이 어떻게 변화하는지 확인해 보세요.
예제
<html> <head> </head> <body> <p style = "letter-spacing:3px;"> Asia is a continent. </p> </body> </html>
주요 속성 값 정리
- normal: 기본값으로, 폰트에서 정의된 표준 자간이 적용됩니다.
- px: 픽셀 단위로 간격을 지정합니다. 위 예제에서는 3px만큼 글자 사이가 벌어집니다.
- em: 현재 폰트 크기를 기준으로 상대적인 간격을 설정합니다.
- 음수 값: 음수를 지정하면 글자 간격이 좁아져 더욱 밀도 있게 표시됩니다.
이처럼 letter-spacing 속성 하나만으로도 텍스트의 분위기를 쉽게 바꿀 수 있으므로, 제목이나 내비게이션 메뉴 등 강조가 필요한 요소에 적극적으로 활용해 보세요.