CSS Text 관련 속성

mozilla에 css fonts, css text라고 검색하면 관련 속성이 30개가 넘게 나온다. 외울 수 없으니 자주 사용하는 것만 간단히 파악하고 다른 것들은 필요할 때 찾아서 쓰도록 하자. 한글이나 워드 프로그램에서 글자를 꾸며 보았을 것이다. 대표적으로 글자 크기 변경, 정렬, 글자 색 변경 이 있다. 이런 기능들을  css를 활용하여 적용하는 작업인 셈이다.

 

아래 설명할 것들은 글자가 들어가는 태그라면 가능하다. <p>, <h1> 과 같은 것들에서 글자를 사용하기 때문이다.

 

font 관련 속성 (글자 레벨에서의 속성)

font-size : 글자의 크기를 조정

font-weight: 글자 굵기 조정

font-style: font 스타일로 normal | italic | oblique 등이 있음

color: 글자 색상 설정

 

text 관련 속성 (글 전체적인 속성)

text-align: 문단 정렬 

text-indent: 문단 들여쓰기

text-shadow: 그림자

text-overflow: 텍스트가 설정해둔 영역 넓이를 초과한 경우 처리방식 

work-break: 다음 줄로 넘어갈 때 단어를 유지할지 여부

text-decoration: 텍스트에 선으로 꾸미는 방법

 

이외에도 많은 속성이 존재하며 필요에 따라 속성들을 살펴보면서 적용하면 되겠다. font-size, color, word-break 정도는 기억해두자.