HTML 간격 조절: 글자간격 단어간격 줄간격 letter-spaceing word-spacing line-height

블로그에서는 일반적으로 어느 정도 틀이 짜여 있으므로, 별도로 글자 간격이나 단어 간격 또는 줄 간격을 조절할 일은 없는 것 같다.
메뉴나 특정한 영역 등에서는 간격 조절이 필요할 때가 있다. 방법은 다음과 같이 태그 속성을 주면 된다.

[글자/단어/줄 간격 조절 속성]

letter-spacing: 1.1em;     글자 간격
word-spacing: 1.2em;     단어(낱말) 간격
line-height: 1.5em;          줄 간격

글자간격 (letter-spacing)과 낱말간격(word-spacing) 차이점

말 그대로 글자간격(letter-spaicng)은 글자 (영어에서는 알파벳) 하나 하나의 간격을 조절하는 것이고, 낱말간격 (word-spacing)은 낱말 하나 하나의 간격을 조절하는 것이다. 여기서 낱말은 띄어 쓰기를 기준으로 하나의 낱말로 인식된다. 간격 속성을 준 모습을 비교해 보면 아래와 같다.


간격 속성을 설정하지 않은 모습

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

글자 간격을 실제 적용한 모습 letter-spacing: 1em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

글자 간격 (letter-spacing)을 주었으므로, 하나 하나의 글자 간격이 벌어짐


낱말 간격을 실제 적용한 모습 word-spacing: 1em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

낱말 간격 (word-spacing)을 주었으므로, 띄어 쓰기를 기준으로 하여 낱말 하나 하나의 간격이 벌어짐



간격 속성을 설정하지 않은 모습

I don't think of anything except that I could keep on proving my figuring was right.

글자 간격을 실제 적용한 모습 letter-spacing: 1em

I don't think of anything except that I could keep on proving my figuring was right.

낱말 간격을 실제 적용한 모습 word-spacing: 1em

I don't think of anything except that I could keep on proving my figuring was right.

줄 간격 설정 line-height

줄 간격 속성을 주지 않은 모습 (블로거 자체 설정이 적용됨)

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다. 신시에는 산목이 있었고 치우 때에는 투전목이 있었으며 부여에는 서산이 있었다.

줄 간격 속성을 0으로 준 실제 모습 line-height: 0em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다. 신시에는 산목이 있었고 치우 때에는 투전목이 있었으며 부여에는 서산이 있었다.

줄간격을 0em으로 주면 줄 간의 간격이 없으므로, 위와 같이 겹쳐 보인다.


줄 간격 속성을 1.5em으로 준 실제 모습 line-height: 1.5em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다. 신시에는 산목이 있었고 치우 때에는 투전목이 있었으며 부여에는 서산이 있었다.

줄 간격 속성을 3em 으로 준 실제 모습 line-height: 3em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다. 신시에는 산목이 있었고 치우 때에는 투전목이 있었으며 부여에는 서산이 있었다.

글자간격, 낱말간격 그리고 줄간격을 주는 수치 단위는 px, pt로 하여도 되지만, 그 보다는 em 이나 % 로 주는 것이 좋을 것 같다.

px(픽셀)과 pt(포인트)는 고정되므로 블로거나 웹페이지의 전체적인 글자 크기를 조절하여도 반영이 되지 않지만, em이나 %는 해당 영역의 글자 크기에 대한 비율 개념이므로 글자 크기를 조절하면 그에 따라 간격도 조절이 되므로 유동성이 있기 때문이다.

>> HTML FONT tag: 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법
>> HTML 단위: 글자 등의 크기를 지정하는 단위 : px, pt, %, em 특성과 차이점
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...