그밖에 유용한 Font 속성들

text-align 좌우 정렬

text-align: left; 

text-align: center;

text-align: justify; /* 글자 간격을 벌려서 좌우 끝을 맞춘다. */

 

text-indent 들여 쓰기

text-indent: 1rem;

 

text-decoration

text-decoration: underline; /* 밑줄 */

text-decoration: line-through; /* 가운데 줄 */

 

text-transform 대소문자 변환

text-decoration: uppercase; /* 대문자 변환 */

text-decoration: lowercase; /* 소문자 변환 */

text-decoration: capitalize; /* 단어 첫 글자만 대문자 */

 

한 줄로 표시되고 width를 넘었을 때 ...으로 표시하는 방법

width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 

(2줄 이상인 경우에는 line-clamp를 이용한다.)

 

Multi Column (CSS 3)

column-count: 2; /* 칼럼 수 */

column-gap: 2rem; /* 칼럼 간격 */

column-rule: 3px dotted grey; /* 칼럼을 나누는 선 */