글 서식과 관련된 CSS 정리 (정렬, 자간, 행간 등)

 

 

 

한글이나 워드 등 문서 프로그램을 보면 서식이라는 메뉴가 있다.

거기에서 글꼴과 폰트 크기, 자간과 줄간격 등등 여러 가지를 설정할 수 있다.

CSS에서도 이처럼 설정 가능한 속성 등에 대해 알아보자.

 

먼저 글꼴 및 폰트 설정은 아래 글에 정리되어있으니 생략하겠다.

Css 폰트 적용 방법과 종류

 

 

1. text-align : 텍스트의 정렬(방향)을 설정하는 속성

가장 많이 사용되는 속성 중 하나로 text나 display가 block인 요소를 가로 정렬할 수 있다.

 

속성 값	설명
start	해당 속성에 기본값. 쓰기 방식에 따라 왼쪽 또는 오른쪽으로 정렬한다.
left	해당 속성에 기본값. 왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬. 양쪽에 간격을 맞추기 위해 띄어쓰기 간격이 기존과 다를 수 있다. 하지만 사용빈도가 낮다.

 

 

* text-align-last

문단의 마지막 text를 정렬하는 속성이다. 기존 text-align과 속성 값이 동일하나 auto(자동)가 추가되어있다.

justify 속성을 확인하기 좋다.

 

 

 

 

2. letter-spacing : 글자 사이 간격을 설정하는 속성

자간을 설정할 수 있는 속성이며 속성 값에서 음수도 사용가능하다.

쓸 수 있는 단위는 px, em, rem 등이 있다.

숫자가 클수록 간격이 벌어지며 작을수록 좁아진다.

자간이 좁으면 글자끼리 겹쳐질 수도 있다.

 

 

 

* word-spacing

letter-spacing이 글자가 기준이었다면 word-spacing은 단어 간에 간격을 설정하는 속성이다.

속성 값은 letter-spacing과 동일하다. 사용빈도는 낮다.

 

 

3. line-height : 줄 간격을 설정하는 속성

행간을 설정하는 속성이며 앞서 설명한 letter-spacing과 달리 %로도 설정 가능하다.

 

 

 

4. word-break : 자동 줄바꿈 때 단어를 기준으로 하는 속성

속성 값	설명
normal	해당 속성에 기본값.
keep-all	단어를 유지 하면서 줄바꿈이 적용됨.
break-all	한,중,일에서는 적용 되지않음. 부모 요소를 벗어나기 전에 줄바꿈 된다.

* 추가로 break-word 속성 값이 존재하지만 overflow-wrap: break-word 속성과 동일하므로 권장하지않는다.