디자인검색
Home > 고객센터 > 자료실

자료실

자료실 글자간격, 낱말간격 차이점
2021-07-09 15:59:01
하나솔루션 조회수 25
121.66.28.43
[글자/단어/줄 간격 조절 속성]
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이나 %는 해당 영역의 글자 크기에 대한 비율 개념이므로 글자 크기를 조절하면 그에 따라 간격도 조절이 되므로 유동성이 있기 때문이다.

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns2.webit.kr
  211.215.17.212
상단으로 바로가기