html css 자간 줄간격 홈페이지를 만들 때 시각적인 효과를 주기 위해서 여러 가지 스타일 속성을 지정하는데요. 가장 대표적인 게 글꼴 일 겁니다. 물론 글의 내용이 더 중요하겠지만, 눈으로 보기 편하면 더 좋겠죠. 텍스트관련 속성 중에서 이번 글에서는 글자간의 간격과 줄간격 속성에 대해서 알아보겠습니다.
먼저 텍스트 간의 간격을 조절하는 속성은 크게 두 가지가 있는데요. 'letter-spacing'과 'word-spacing'입니다. 단어만 봐도 알 수 있겠지만, 첫 번째는 글자간의 간격이구요. 두 번째는 단어 사이의 간격입니다. 이 속성을 이용해서 예제를 만들어 볼게요.
■ 똑같은 문자열 세 줄을 입력해봤습니다. 첫 번째 단락은 기준으로 그대로 두고, 두 번째는 글자간의 간격을, 세 번째는 단어들 사이의 간격을 조절해보겠습니다.
■ 아직은 세 단락 모두 똑같은 형태로 출력됩니다. css 자간 속성을 적용해보겠습니다.
■ 앞에서 알아본 글자간의 간격 속성과 단어 사이의 속성값을 입력해서 출력해보겠습니다.
■ 첫 번째 단락은 기준이기 때문에 아무 속성도 적용하지 않았습니다. 두 번째 단락은 모든 글자간의 간격을 3 px로 지정했구요. 세 번째 단락은 글자간의 간격은 그대로 두고, 단어 사이의 간격만 조절한 상태입니다. 단어 간의 거리가 멀어지면서 문자열이 기준 단락보다 좀 더 길어진 걸 확인할 수 있습니다.
다음은 줄간격을 지정하는 속성에 대해서 알아볼게요. 줄간격 속성의 형식은 line-height="속성값" 입니다. 이때 속성값에는 백분율과 크기값을 사용할 수 있습니다. 이 역시도 예제로 테스트 해볼게요.
■ 두 개의 단락을 만들고 하나의 단락에만 'line-height' 속성을 적용해봤습니다. 출력 결과를 확인해 보고 마무리할게요.
■ 확실히 줄간격이 멀어진걸 확인할 수 있습니다. 이렇게 해서 css 글자간격과 줄간격에 대해서 알아봤는데요. 간단한 내용이니까 메모장 열고 적당한 속성값 입력해보면서 적용해보세요. 수고하셨습니다.
